/* /Areas/Admin/Components/ModuleBuilderSkeleton.razor.rz.scp.css */
/* ========== MODULE BUILDER SKELETON ========== */

/* ── Tab bar ─────────────────────────────────────────── */

.mbs-skel-tabs[b-s3d0y4gw8d] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--bs-gray-300);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* ── Split layout — mirrors .module-builder-split ─────── */

.mbs-skel-split[b-s3d0y4gw8d] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: start;
}

/* ── Tree panel ─────────────────────────────────────── */

.mbs-skel-tree-panel[b-s3d0y4gw8d] {
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 10px;
    overflow: hidden;
}

.mbs-skel-tree-header[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem 0.4rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.mbs-skel-tree-title[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mbs-skel-tree-btns[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.mbs-skel-tree-body[b-s3d0y4gw8d] {
    padding: 0.25rem 0.1rem;
    display: flex;
    flex-direction: column;
}

/* Node row — mirrors .tree-node-row */
.mbs-skel-tree-node[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    box-sizing: border-box;
    padding-right: 0.5rem;
}

/* Question nodes are slightly shorter */
.mbs-skel-tree-node--q[b-s3d0y4gw8d] {
    height: 28px;
}

/* Badge pushed to the right */
.mbs-skel-badge[b-s3d0y4gw8d] {
    margin-left: auto;
}

/* ── Editor panel ────────────────────────────────────── */

.mbs-skel-editor-panel[b-s3d0y4gw8d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Mobile tree toggle — mirrors .module-builder-tree-toggle-btn */
.mbs-skel-tree-toggle[b-s3d0y4gw8d] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
}

/* ── Editor card ─────────────────────────────────────── */

.mbs-skel-card[b-s3d0y4gw8d] {
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    overflow: hidden;
}

.mbs-skel-card-head[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.mbs-skel-card-head-actions[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mbs-skel-card-body[b-s3d0y4gw8d] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Form elements ───────────────────────────────────── */

.mbs-skel-field[b-s3d0y4gw8d] {
    display: flex;
    flex-direction: column;
}

.mbs-skel-field-2col[b-s3d0y4gw8d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mbs-skel-checkbox[b-s3d0y4gw8d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Mobile (<= 900px) ───────────────────────────────── */

@media (max-width: 900px) {
    .mbs-skel-split[b-s3d0y4gw8d] {
        grid-template-columns: 1fr;
    }

    .mbs-skel-tree-panel[b-s3d0y4gw8d] {
        display: none;
    }

    .mbs-skel-tree-toggle[b-s3d0y4gw8d] {
        display: flex;
    }
}
/* /Areas/Admin/Components/ModuleEditorInner.razor.rz.scp.css */
.module-editor-form[b-4dasg0id3h] {
    margin-bottom: 1rem;
}

.module-editor-row[b-4dasg0id3h] {
    margin-bottom: 0.75rem;
}

.module-editor-row-inline[b-4dasg0id3h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

.module-editor-section-block[b-4dasg0id3h] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-gray-300);
}

.module-editor-section-header[b-4dasg0id3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.module-editor-section-label[b-4dasg0id3h] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
}

.module-editor-empty[b-4dasg0id3h] {
    text-align: center;
    padding: 1.5rem;
    color: var(--bs-gray-600);
    background: var(--bs-gray-100);
    border-radius: 6px;
    border: 1px dashed var(--bs-gray-300);
    font-size: 0.875rem;
}

/* ========== ACCORDION LIST STYLES ========== */
.module-editor-submodules-list[b-4dasg0id3h],
.module-editor-sections-list[b-4dasg0id3h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordion-submodule-content[b-4dasg0id3h],
.accordion-section-content[b-4dasg0id3h] {
    padding: 0.5rem 0;
}

/* ========== MODULE RULE GROUPING ========== */
.module-editor-rule-group[b-4dasg0id3h] {
    position: relative;
    border-radius: 6px;
    padding: 1rem;
    padding-top: 2rem;
    margin-top: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.module-editor-rule-group[data-rule="ONE_OF"][b-4dasg0id3h] {
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    border: 2px solid var(--bs-primary);
}

.module-editor-rule-group[data-rule="ONE_OF"] .module-editor-rule-label[b-4dasg0id3h] {
    background: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--bs-primary) 30%, transparent);
}

.module-editor-rule-label[b-4dasg0id3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0;
    position: absolute;
    top: -0.85rem;
    left: 1rem;
    letter-spacing: 0.02em;
}

.module-editor-rule-icon[b-4dasg0id3h] {
    font-size: 1rem;
    font-weight: 700;
}

.module-editor-submodules-list[b-4dasg0id3h] {
    position: relative;
}

.module-editor-rule-group .module-editor-submodules-list[b-4dasg0id3h] {
    padding: 0 0.5rem;
}

/* OneOf visual separator between siblings */
.module-editor-submodule-wrapper[data-rule-group="true"][b-4dasg0id3h] {
    position: relative;
}

.module-editor-submodule-wrapper[data-rule-group="true"]:not(:first-child)[b-4dasg0id3h]::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: var(--bs-primary);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .module-editor-section-header[b-4dasg0id3h] {
        flex-direction: column;
        align-items: stretch;
    }

    .module-editor-row-inline[b-4dasg0id3h] {
        grid-template-columns: 1fr;
    }

    .module-editor-rule-group[b-4dasg0id3h] {
        padding: 1rem;
        padding-top: 2.5rem;
    }
}

/* Optional Resource Types */
.optional-resource-types-list[b-4dasg0id3h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.optional-resource-type-item[b-4dasg0id3h] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 0.75rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    background: var(--bs-gray-100);
}

.optional-resource-type-fields[b-4dasg0id3h] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    flex: 1;
}

/* /Areas/Admin/Components/ModulesOverviewSkeleton.razor.rz.scp.css */
/* ========== MODULES OVERVIEW SKELETON ========== */

.overview-actions[b-rradu75ov8] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.modules-skel-grid[b-rradu75ov8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.module-card-badges[b-rradu75ov8] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.module-card-header-left[b-rradu75ov8] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.module-card-body[b-rradu75ov8] {
    display: flex;
    gap: 1.5rem;
}

.module-card-stat[b-rradu75ov8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (max-width: 640px) {
    .modules-skel-grid[b-rradu75ov8] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Admin/Components/NotificationRulesEditor.razor.rz.scp.css */
/* One flex gap owns the whole form's vertical rhythm so every gap is identical (fields, variables,
   repeat, the Active switch and the Save action alike). The components bring uneven margins of their
   own - inputs/combos/textareas 1rem, the checkbox none - so those are neutralised below. */
.workflow-inline-form[b-rtvwn7u545] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.workflow-inline-form[b-rtvwn7u545]  .app-input,
.workflow-inline-form[b-rtvwn7u545]  .app-combo,
.workflow-inline-form[b-rtvwn7u545]  .app-textarea,
.workflow-inline-form[b-rtvwn7u545]  .notif-var-panel {
    margin-bottom: 0;
}

/* Sections inside an expanded rule (Conditions / Recipients / Attachments) */

.notif-rule-section[b-rtvwn7u545] {
    padding: 0.75rem 0;
    border-top: 1px solid var(--bs-gray-300);
}

.notif-rule-section--last[b-rtvwn7u545] {
    padding-bottom: 0;
}

.notif-rule-section-header[b-rtvwn7u545] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.notif-rule-section-title[b-rtvwn7u545] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-gray-600);
}

.notif-empty-hint[b-rtvwn7u545] {
    font-size: 0.8rem;
    color: var(--bs-gray-600);
    margin: 0.25rem 0 0;
    font-style: italic;
}

/* Condition chain display */

.condition-chain[b-rtvwn7u545] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.condition-block[b-rtvwn7u545] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.condition-connector[b-rtvwn7u545] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-gray-600);
    background: var(--bs-gray-200);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.condition-pill[b-rtvwn7u545] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 20px;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    font-size: 0.82rem;
    flex: 1;
    min-width: 0;
}

.condition-pill-text[b-rtvwn7u545] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recipient groups (tag-input style) */

.recipient-group[b-rtvwn7u545] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-gray-300);
}

.recipient-group:last-child[b-rtvwn7u545] {
    border-bottom: none;
}

.recipient-group-label[b-rtvwn7u545] {
    flex: 0 0 2.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
    padding-top: 0.3rem;
    text-align: right;
}

.recipient-group-body[b-rtvwn7u545] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.recipient-tag-row[b-rtvwn7u545] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
}

.recipient-tag[b-rtvwn7u545] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.35rem 0.2rem 0.6rem;
    background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 50%, transparent);
    border-radius: 1rem;
    font-size: 0.8rem;
    color: var(--bs-body-color);
    max-width: 100%;
}

.recipient-tag-text[b-rtvwn7u545] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.recipient-tag[b-rtvwn7u545]  .app-button.recipient-tag-remove {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.45;
    padding: 0;
    box-shadow: none;
    line-height: 1;
    min-width: 0;
}

.recipient-tag[b-rtvwn7u545]  .app-button.recipient-tag-remove:hover:not(:disabled) {
    background: none;
    opacity: 1;
    color: var(--bs-danger);
    box-shadow: none;
}

/* Attachment section */

.attachment-type-description[b-rtvwn7u545] {
    font-size: 0.8rem;
    color: var(--bs-gray-600);
    font-style: italic;
    margin: -0.25rem 0 0.5rem;
}

.attachment-list[b-rtvwn7u545] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.attachment-item[b-rtvwn7u545] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
}

.attachment-item-body[b-rtvwn7u545] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.attachment-item-label[b-rtvwn7u545] {
    font-size: 0.85rem;
    font-weight: 500;
}

.attachment-item-desc[b-rtvwn7u545] {
    font-size: 0.77rem;
    color: var(--bs-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Areas/Admin/Components/PredefinedAnswerEditor.razor.rz.scp.css */
.answer-editor[b-yqn5dwtr46] {
    margin-bottom: 0.5rem;
}

.answer-editor-row[b-yqn5dwtr46] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
}

.answer-editor-index[b-yqn5dwtr46] {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, var(--bs-gray-600));
    min-width: 1.5rem;
    text-align: center;
}

/* Each control shares one row; the text input flexes and can shrink so nothing wraps. */
.answer-field[b-yqn5dwtr46] {
    min-width: 0;
}

.answer-field-text[b-yqn5dwtr46] {
    /* Fills the row so it always spans full width (no dead space); naturally smaller
       than before because it now shares the row with order/parent/delete. */
    flex: 1 1 auto;
    min-width: 120px;
}

.answer-field-order[b-yqn5dwtr46] {
    flex: 0 0 64px;
}

.answer-field-parent[b-yqn5dwtr46] {
    /* Wide enough that the combo's own placeholder/selected text ("Belongs to answer")
       never wraps to a second line. */
    flex: 0 0 220px;
}

.answer-field-actions[b-yqn5dwtr46] {
    flex: 0 0 auto;
}
/* /Areas/Admin/Components/QuestionEditor.razor.rz.scp.css */
.question-editor-body[b-3qd9xgds2n] {
    padding: 1rem 0;
}

.question-editor-form-row[b-3qd9xgds2n] {
    margin-bottom: 0.75rem;
}

.question-editor-form-row-inline[b-3qd9xgds2n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Labeled group divider used to break the long form into scannable sections. */
.qe-group-label[b-3qd9xgds2n] {
    margin: 1.5rem 0 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-gray-600);
}

.question-editor-checkboxes[b-3qd9xgds2n] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.25rem;
}

.question-editor-answers[b-3qd9xgds2n] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.question-editor-answers-header[b-3qd9xgds2n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.question-editor-answers-title[b-3qd9xgds2n] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-gray-600);
}

/* ========== Date/Time Mode Toggle ========== */
.datetime-mode-toggle[b-3qd9xgds2n] {
    display: flex;
    gap: 0;
    background: var(--bs-gray-100);
    border-radius: 8px;
    padding: 3px;
    width: fit-content;
}

.datetime-mode-btn[b-3qd9xgds2n] {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--bs-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.datetime-mode-btn:hover:not(.is-active)[b-3qd9xgds2n] {
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.5);
}

.datetime-mode-btn.is-active[b-3qd9xgds2n] {
    background: var(--bs-white);
    color: var(--bs-body-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* /Areas/Admin/Components/SectionEditor.razor.rz.scp.css */
.section-editor-form-row[b-9ecautokhj] {
    margin-bottom: 1rem;
}

.section-editor-form-row-inline[b-9ecautokhj] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.section-editor-questions[b-9ecautokhj] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, var(--bs-gray-300));
}

.section-editor-questions-header[b-9ecautokhj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-editor-questions-title[b-9ecautokhj] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, var(--bs-body-color));
}
/* /Areas/Admin/Components/UserEditPageSkeleton.razor.rz.scp.css */
/* ========== USER EDIT PAGE SKELETON ========== */

.user-edit-page[b-t7uz9mvsng] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ue-skel-header-actions[b-t7uz9mvsng] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ue-skel-user-grid[b-t7uz9mvsng] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.ue-skel-user-field[b-t7uz9mvsng] {
    display: flex;
    flex-direction: column;
}

.ue-skel-hint-fields[b-t7uz9mvsng] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.ue-skel-hint-field[b-t7uz9mvsng] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1200px) {
    .ue-skel-user-grid[b-t7uz9mvsng] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .ue-skel-user-grid[b-t7uz9mvsng] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .ue-skel-user-grid[b-t7uz9mvsng] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Admin/Components/UserFilterPanel.razor.rz.scp.css */
/* ========== HOST: positions the dropdown relative to the trigger ========== */

.filter-panel-host[b-jfr4exl5bp] {
    position: relative;
    display: inline-block;
}

/* ========== TRIGGER BUTTON ========== */

.filter-btn[b-jfr4exl5bp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-btn--active[b-jfr4exl5bp] {
    border-color: var(--bs-primary, var(--bs-primary)) !important;
    color: var(--bs-primary, var(--bs-primary)) !important;
}

.filter-count-badge[b-jfr4exl5bp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bs-primary, var(--bs-primary));
    color: var(--color-black);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* ========== DESKTOP DROPDOWN PANEL ========== */

.filter-dropdown[b-jfr4exl5bp] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    transform: none;
    min-width: 320px;
    max-width: 400px;
    width: max-content;
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    animation: filter-dropdown-appear-b-jfr4exl5bp 0.15s ease;
}

.filter-dropdown--upward[b-jfr4exl5bp] {
    animation: filter-dropdown-appear-up-b-jfr4exl5bp 0.15s ease;
}

@keyframes filter-dropdown-appear-b-jfr4exl5bp {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes filter-dropdown-appear-up-b-jfr4exl5bp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-dropdown__header[b-jfr4exl5bp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem 0.5rem;
    border-bottom: 1px solid var(--bs-gray-100);
}

.filter-dropdown__title[b-jfr4exl5bp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.filter-dropdown__close[b-jfr4exl5bp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--bs-gray-600);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.filter-dropdown__close:hover[b-jfr4exl5bp] {
    background: var(--bs-gray-100);
    color: var(--bs-body-color);
}

.filter-dropdown__body[b-jfr4exl5bp] {
    max-height: 420px;
    overflow-y: auto;
}

/* ========== FILTER SECTIONS (shared desktop + mobile) ========== */

.filter-section[b-jfr4exl5bp] {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--bs-gray-100);
}

.filter-section--last[b-jfr4exl5bp] {
    border-bottom: none;
}

.filter-section__title[b-jfr4exl5bp] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-gray-600);
    margin: 0 0 0.625rem;
}

.filter-section__title--spaced[b-jfr4exl5bp] {
    margin-top: 0.875rem;
}

.filter-section[b-jfr4exl5bp]  .app-combo,
.filter-section[b-jfr4exl5bp]  .app-input {
    width: 100%;
    margin-bottom: 0;
}

.filter-checkbox[b-jfr4exl5bp] {
    margin-bottom: 0.375rem;
}

.filter-checkbox:last-of-type[b-jfr4exl5bp] {
    margin-bottom: 0;
}

/* ========== FOOTER ========== */

.filter-footer[b-jfr4exl5bp] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--bs-gray-300);
    background: var(--bs-gray-100);
}

/* ========== MOBILE BOTTOM SHEET ADJUSTMENTS ========== */

@media (max-width: 767.98px) {
    .filter-section[b-jfr4exl5bp] {
        padding: 0.875rem 0;
    }

    .filter-section:has(.filter-checkbox)[b-jfr4exl5bp] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-section:has(.filter-checkbox) .filter-checkbox[b-jfr4exl5bp] {
        margin-bottom: 0;
    }

    .bs-footer .filter-footer[b-jfr4exl5bp] {
        padding: 0;
        background: transparent;
        border-top: none;
    }
}
/* /Areas/Admin/Components/UsersManagementSkeleton.razor.rz.scp.css */
/* ========== USERS MANAGEMENT SKELETON ========== */

.users-skel-table[b-usvfb44z0s] {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--bs-gray-300);
    background-color: var(--bs-white);
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.users-skel-scroll[b-usvfb44z0s] {
    width: 100%;
    overflow-x: auto;
    min-width: 720px;
}

.users-skel-head[b-usvfb44z0s] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-300);
}

.users-skel-row[b-usvfb44z0s] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    border-bottom: 1px solid var(--bs-gray-300);
}

.users-skel-row:last-child[b-usvfb44z0s] {
    border-bottom: none;
}

.users-skel-col[b-usvfb44z0s] {
    flex-shrink: 0;
}

.users-col-name[b-usvfb44z0s]     { flex: 0 0 14%; }
.users-col-lastname[b-usvfb44z0s] { flex: 0 0 14%; }
.users-col-email[b-usvfb44z0s]    { flex: 0 0 28%; }
.users-col-role[b-usvfb44z0s]     { flex: 0 0 18%; }
.users-col-status[b-usvfb44z0s]   { flex: 0 0 14%; }
.users-col-action[b-usvfb44z0s]   { flex: 0 0 80px; }

@media (max-width: 992px) {
    .users-page-header .users-header-search[b-usvfb44z0s] {
        display: none;
    }
}
/* /Areas/Admin/Components/WorkflowTransitionsEditor.razor.rz.scp.css */
.workflow-role-chips[b-t937piypbb] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* /Areas/Admin/Pages/ModuleBuilder.razor.rz.scp.css */
/* ========== TREE + EDITOR SPLIT LAYOUT ========== */
.module-builder-split[b-g939a82xls] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: start;
    min-height: 0;
}

/* ── Tree panel ─────────────────────────────────── */

.module-builder-tree-panel[b-g939a82xls] {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-400) transparent;
}

.module-builder-tree-header[b-g939a82xls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem 0.4rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.module-builder-tree-header-actions[b-g939a82xls] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.module-builder-tree-icon-btn[b-g939a82xls] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--bs-gray-600);
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.module-builder-tree-icon-btn:hover[b-g939a82xls] {
    background: var(--bs-gray-200);
    color: var(--bs-body-color);
}

/* ── Tree node action buttons (inline icon buttons in NodeActions) ── */

.tree-node-action-btn[b-g939a82xls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--bs-gray-500);
    padding: 2px;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

.tree-node-action-btn:hover[b-g939a82xls] {
    background: var(--bs-gray-300);
    color: var(--bs-gray-700);
}

.tree-node-action-btn.danger:hover[b-g939a82xls] {
    background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
    color: var(--bs-danger);
}

/* ── Editor panel card appear animation ─────────── */

@keyframes editor-card-appear-b-g939a82xls {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.module-builder-editor-card-wrapper[b-g939a82xls] {
    animation: editor-card-appear-b-g939a82xls 0.18s ease;
}

.module-builder-tree-title[b-g939a82xls] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.module-builder-tree-close[b-g939a82xls] {
    display: none;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--bs-gray-600);
    line-height: 1;
}

.module-builder-tree-close:hover[b-g939a82xls] {
    background: var(--bs-gray-200);
    color: var(--bs-body-color);
}

/* ── Editor panel ───────────────────────────────── */

.module-builder-editor-panel[b-g939a82xls] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Mobile toggle button (hidden on desktop) ───── */

.module-builder-tree-toggle-btn[b-g939a82xls] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
}

.module-builder-tree-toggle-btn:hover[b-g939a82xls] {
    background: var(--bs-gray-200);
    border-color: var(--bs-gray-400);
}

.module-builder-tree-toggle-btn span[b-g939a82xls] {
    flex: 1;
}

/* ── Mobile (<= 900px) ──────────────────────────── */

@media (max-width: 900px) {
    .module-builder-split[b-g939a82xls] {
        grid-template-columns: 1fr;
    }

    /* Tree panel hidden on mobile — shown via AppBottomSheet */
    .module-builder-tree-panel[b-g939a82xls] {
        display: none;
    }

    .module-builder-tree-toggle-btn[b-g939a82xls] {
        display: flex;
    }
}


.module-builder-sheet-tree-actions[b-g939a82xls] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--bs-gray-200);
    margin-bottom: 0.25rem;
}

/* ========== GROUP EDITOR PANEL ========== */

.group-editor-section[b-g939a82xls] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-editor-section-header[b-g939a82xls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.group-editor-section-label[b-g939a82xls] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.group-editor-empty[b-g939a82xls] {
    font-size: 0.85rem;
    color: var(--bs-gray-500);
    padding: 0.5rem 0;
}

.group-question-list[b-g939a82xls] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.group-question-item[b-g939a82xls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    color: inherit;
}

.group-question-item--member:hover[b-g939a82xls] {
    background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--bs-danger) 45%, transparent);
}

.group-question-item--member:hover .group-question-label[b-g939a82xls] {
    color: var(--bs-danger);
}

.group-question-item--available:hover[b-g939a82xls] {
    background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
    border-color: var(--bs-primary);
}

.group-question-item--available:hover .group-question-label[b-g939a82xls] {
    color: var(--bs-body-color);
}

.group-question-label[b-g939a82xls] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-gray-700);
}

/* /Areas/Admin/Pages/ModulesOverview.razor.rz.scp.css */
.overview-actions[b-1sj402qbke] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.modules-grid[b-1sj402qbke] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.module-card-badges[b-1sj402qbke] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.module-card-header-left[b-1sj402qbke] {
    display: flex;
    align-items: center;
    color: var(--bs-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.module-card-body[b-1sj402qbke] {
    display: flex;
    gap: 1.5rem;
}

.module-card-stat[b-1sj402qbke] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-1sj402qbke] {
    font-size: 0.75rem;
    color: var(--text-secondary, var(--bs-gray-600));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-1sj402qbke] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, var(--bs-body-color));
}
/* /Areas/Admin/Pages/UserEditPage.razor.rz.scp.css */
.user-edit-page[b-jt5c2wt6a6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Areas/Admin/Pages/UsersManagementPage.razor.rz.scp.css */
.users-page-header[b-vuq017fjoj]  .page-header-title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
}

.users-page-header[b-vuq017fjoj]  .page-title {
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
}

.users-page-header[b-vuq017fjoj]  .page-header-actions {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 0;
}

.users-page-header[b-vuq017fjoj]  .page-header-actions > .users-page-header-toolbar {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.users-page-header-toolbar[b-vuq017fjoj] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
}

.users-header-search[b-vuq017fjoj] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
}

.users-search-by[b-vuq017fjoj] {
    flex: 0 0 150px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.users-search-input[b-vuq017fjoj] {
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

.users-search-by[b-vuq017fjoj]  .app-combo,
.users-search-input[b-vuq017fjoj]  .app-input {
    width: 100%;
    margin-bottom: 0;
}

.users-search-input[b-vuq017fjoj]  .app-form-control {
    width: 100%;
}

.users-page-header-toolbar[b-vuq017fjoj]  .filter-panel-host {
    flex-shrink: 0;
}
/* /Areas/Approvals/Components/AccessRequestFilterPanel.razor.rz.scp.css */
/* ========== HOST: positions the dropdown relative to the trigger ========== */

.filter-panel-host[b-24s2s7npyd] {
    position: relative;
    display: inline-block;
}

/* ========== TRIGGER BUTTON ========== */

.filter-btn[b-24s2s7npyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-btn--active[b-24s2s7npyd] {
    border-color: var(--bs-primary, #6366f1) !important;
    color: var(--bs-primary, #6366f1) !important;
}

.filter-count-badge[b-24s2s7npyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bs-primary, #6366f1);
    color: var(--color-black);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* ========== DESKTOP DROPDOWN PANEL ========== */

.filter-dropdown[b-24s2s7npyd] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    transform: none;
    min-width: 320px;
    max-width: 400px;
    width: max-content;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    animation: filter-dropdown-appear-b-24s2s7npyd 0.15s ease;
}

@keyframes filter-dropdown-appear-b-24s2s7npyd {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-dropdown__header[b-24s2s7npyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-dropdown__title[b-24s2s7npyd] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.filter-dropdown__close[b-24s2s7npyd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #68707d;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.filter-dropdown__close:hover[b-24s2s7npyd] {
    background: #f3f4f6;
    color: #111827;
}

.filter-dropdown__body[b-24s2s7npyd] {
    max-height: 420px;
    overflow-y: auto;
}

.filter-section[b-24s2s7npyd] {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-section--last[b-24s2s7npyd] {
    border-bottom: none;
}

.filter-section__title[b-24s2s7npyd] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #68707d;
    margin: 0 0 0.625rem;
}

.filter-checkbox[b-24s2s7npyd] {
    margin-bottom: 0.375rem;
}

.filter-checkbox:last-of-type[b-24s2s7npyd] {
    margin-bottom: 0;
}

.filter-footer[b-24s2s7npyd] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

@media (max-width: 767.98px) {
    .filter-section[b-24s2s7npyd] {
        padding: 0.875rem 0;
    }

    .filter-section:has(.filter-checkbox)[b-24s2s7npyd] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-section:has(.filter-checkbox) .filter-checkbox[b-24s2s7npyd] {
        margin-bottom: 0;
    }

    .bs-footer .filter-footer[b-24s2s7npyd] {
        padding: 0;
        background: transparent;
        border-top: none;
    }
}
/* /Areas/Approvals/Components/AccessRequestsOverviewSkeleton.razor.rz.scp.css */
/* ========== ACCESS REQUESTS OVERVIEW SKELETON ========== */

.ar-skel-table[b-231ix38jz1] {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--bs-gray-300);
    background-color: var(--bs-white);
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.ar-skel-scroll[b-231ix38jz1] {
    width: 100%;
    overflow-x: auto;
    min-width: 720px;
}

.ar-skel-head[b-231ix38jz1] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-300);
}

.ar-skel-row[b-231ix38jz1] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    border-bottom: 1px solid var(--bs-gray-300);
}

.ar-skel-row:last-child[b-231ix38jz1] {
    border-bottom: none;
}

.ar-skel-col[b-231ix38jz1] {
    flex-shrink: 0;
}

.ar-col-reqby[b-231ix38jz1]   { flex: 0 0 25%; }
.ar-col-hint[b-231ix38jz1]    { flex: 0 0 15%; }
.ar-col-date[b-231ix38jz1]    { flex: 0 0 15%; }
.ar-col-status[b-231ix38jz1]  { flex: 0 0 15%; }
.ar-col-decided[b-231ix38jz1] { flex: 0 0 25%; }
.ar-col-action[b-231ix38jz1]  { flex: 0 0 80px; }
/* /Areas/Approvals/Components/ResourceCard.razor.rz.scp.css */
/* ========== CARD CONTAINER ========== */
.resource-card[b-kmmvl9d87p] {
    /* Fixed width and height for stability */
    width: 160px;
    height: 140px;

    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* Styling */
    background: #ffffff;
    border: 1.5px solid #e0e2e7;
    border-radius: 6px;
    padding: 16px;

    /* Shadows */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    /* Interaction */
    cursor: pointer;
    user-select: none;

    /* Positioning */
    position: relative;

    /* Transitions */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;

    /* Ensure content stays within bounds */
    overflow: hidden;

    /* Performance */
    contain: content;
}

/* ========== TITLE ========== */
.resource-title[b-kmmvl9d87p] {
    /* Typography */
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--bs-body-color);

    /* Layout */
    text-align: center;
    word-wrap: break-word;

    /* Constrain to card width minus padding */
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Ellipsis for long titles */
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ========== BADGE POSITIONING ========== */
.selected-badge[b-kmmvl9d87p] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* ========== HOVER STATE (DESKTOP) ========== */
.resource-card:hover[b-kmmvl9d87p] {
    /* Lift and enlarge slightly */
    transform: translateY(-6px) scale(1.04) translateZ(0);

    /* Deeper shadow */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);

    /* Highlight border */
    border-color: var(--bs-primary);
}

/* ========== ACTIVE/PRESS STATE ========== */
.resource-card:active[b-kmmvl9d87p] {
    /* Press down slightly */
    transform: translateY(-2px) scale(0.98) translateZ(0);

    /* Reduced shadow */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ========== SELECTED STATE ========== */
.resource-card.selected[b-kmmvl9d87p] {
    /* Primary border and background */
    border-color: var(--bs-primary);
    border-width: 2px;
    background: linear-gradient(135deg, rgba(238, 212, 132, 0.12) 0%, rgba(238, 212, 132, 0.06) 100%);

    /* Elevated shadow */
    box-shadow: 0 4px 12px rgba(238, 212, 132, 0.2);
}

/* ========== SELECTED + HOVER ========== */
.resource-card.selected:hover[b-kmmvl9d87p] {
    transform: translateY(-6px) scale(1.04) translateZ(0);
    box-shadow: 0 8px 16px rgba(238, 212, 132, 0.25);
}

/* ========== TABLET (768px and below) ========== */
@media (max-width: 768px) {
    .resource-card[b-kmmvl9d87p] {
        width: 150px;
        height: 130px;
        padding: 14px;
        gap: 6px;
    }

    .resource-title[b-kmmvl9d87p] {
        font-size: 0.85rem;
    }
}

/* ========== MOBILE (640px and below) ========== */
@media (max-width: 640px) {
    .resource-card[b-kmmvl9d87p] {
        width: 140px;
        height: 120px;
        padding: 12px;
        gap: 6px;
    }

    .resource-title[b-kmmvl9d87p] {
        font-size: 0.8rem;
    }
}

/* ========== SMALL MOBILE (480px and below) ========== */
@media (max-width: 480px) {
    .resource-card[b-kmmvl9d87p] {
        width: 130px;
        height: 110px;
        padding: 10px;
        gap: 4px;
    }

    .resource-title[b-kmmvl9d87p] {
        font-size: 0.75rem;
    }
}

/* ========== ACCESSIBILITY ========== */
.resource-card:focus-visible[b-kmmvl9d87p] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.resource-card:focus[b-kmmvl9d87p] {
    outline: none;
}
/* /Areas/Approvals/Components/ReviewAccessRequestSkeleton.razor.rz.scp.css */
/* ========== REVIEW ACCESS REQUEST SKELETON ========== */

/* Mirror the real page's .resource-items spacing so the gaps between the user-info
   card and the item cards are consistent (1rem), matching the loaded layout. */
.rv-skel-resource-items[b-aehal54l0x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.rv-skel-header-actions[b-aehal54l0x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rv-skel-user-grid[b-aehal54l0x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.rv-skel-user-field[b-aehal54l0x] {
    display: flex;
    flex-direction: column;
}

.rv-skel-hint-fields[b-aehal54l0x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.rv-skel-hint-field[b-aehal54l0x] {
    display: flex;
    flex-direction: column;
}

.rv-skel-suggestions[b-aehal54l0x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.rv-skel-suggestion-card[b-aehal54l0x] {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 1rem;
    background: var(--bs-white);
}

.rv-skel-suggestion-head[b-aehal54l0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rv-skel-search-table[b-aehal54l0x] {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    overflow: hidden;
}

.rv-skel-search-head[b-aehal54l0x],
.rv-skel-search-filters[b-aehal54l0x],
.rv-skel-search-row[b-aehal54l0x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.rv-skel-search-head[b-aehal54l0x] {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.rv-skel-search-filters[b-aehal54l0x] {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.rv-skel-search-row[b-aehal54l0x] {
    border-bottom: 1px solid var(--bs-border-color);
}

.rv-skel-search-row:last-child[b-aehal54l0x] {
    border-bottom: none;
}

@media (max-width: 1200px) {
    .rv-skel-user-grid[b-aehal54l0x] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rv-skel-suggestions[b-aehal54l0x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .rv-skel-user-grid[b-aehal54l0x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .rv-skel-suggestions[b-aehal54l0x] {
        grid-template-columns: 1fr;
    }

    .rv-skel-search-head[b-aehal54l0x],
    .rv-skel-search-filters[b-aehal54l0x],
    .rv-skel-search-row[b-aehal54l0x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .rv-skel-user-grid[b-aehal54l0x] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Approvals/Pages/AccessRequestsOverview.razor.rz.scp.css */
.approvals-page-header[b-b85y5gu0t3]  .page-header-title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
}

.approvals-page-header[b-b85y5gu0t3]  .page-title {
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
}

.approvals-page-header[b-b85y5gu0t3]  .page-header-actions {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 0;
}

.approvals-page-header[b-b85y5gu0t3]  .page-header-actions > .approvals-page-header-toolbar {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.approvals-page-header-toolbar[b-b85y5gu0t3] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
}

.approvals-page-header-toolbar[b-b85y5gu0t3]  .filter-panel-host {
    flex-shrink: 0;
}
/* /Areas/Approvals/Pages/ReviewAccessRequest.razor.rz.scp.css */
/* ── Request metadata ─────────────────────────────────────────── */
.request-meta[b-e5z1vm8vps] {
    padding: 0.875rem 1.25rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.request-meta-row[b-e5z1vm8vps] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.request-meta-label[b-e5z1vm8vps] {
    font-weight: 600;
    flex-shrink: 0;
}

.request-meta-value[b-e5z1vm8vps] {
    color: var(--bs-secondary-color);
    word-break: break-word;
}

/* ── Section label ────────────────────────────────────────────── */
.section-label[b-e5z1vm8vps] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

/* ── Module group cards ───────────────────────────────────────── */
.module-groups[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Decision buttons (shared by card header + role rows) ─────── */
.decision-buttons[b-e5z1vm8vps] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Role items list ──────────────────────────────────────────── */
.role-items[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
}

.role-items--blocked[b-e5z1vm8vps] {
    opacity: 0.5;
    pointer-events: none;
}

.cascade-notice[b-e5z1vm8vps] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--bs-danger-rgb), 0.08);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--bs-danger);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.role-item[b-e5z1vm8vps] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    gap: 0.75rem;
    flex-wrap: wrap;
    transition: border-color 0.15s ease;
}

.role-item:hover[b-e5z1vm8vps] {
    border-color: var(--bs-primary);
}

.role-item-info[b-e5z1vm8vps] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

.role-name[b-e5z1vm8vps] {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decision-buttons--sm[b-e5z1vm8vps] {
    gap: 0.375rem;
}

/* ── Comment textarea ─────────────────────────────────────────── */
.item-comment[b-e5z1vm8vps] {
    border-top: 1px solid var(--bs-border-color);
}

/* ── Ungrouped / other-resource cards ────────────────────────── */
.ungrouped-items[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Requested-resource cards ─────────────────────────────────── */
/* Separates the resource cards from the user-details card above and keeps a
   consistent rhythm between multiple resource items. */
.resource-items[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

/* ── Non-hint (dropdown-selected) override section ────────────── */
.resource-selection-current[b-e5z1vm8vps] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 576px) {
    .decision-buttons[b-e5z1vm8vps] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .role-item[b-e5z1vm8vps] {
        flex-direction: column;
        align-items: stretch;
    }

    .role-item-info[b-e5z1vm8vps] {
        flex-wrap: wrap;
    }

    .decision-buttons--sm[b-e5z1vm8vps] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

/* ── Hint review layout ───────────────────────────────────────── */
.hint-review-section[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hint-fields-grid[b-e5z1vm8vps] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.hint-panel-title[b-e5z1vm8vps] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

/* ── Hint field rows (user-side) ──────────────────────────────── */
.hint-field[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.4rem 0.6rem;
    background: var(--bs-tertiary-bg);
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
}

.hint-field-label[b-e5z1vm8vps] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hint-field-value[b-e5z1vm8vps] {
    font-size: 0.875rem;
    color: var(--bs-body-color);
    word-break: break-word;
}

/* ── Suggestions list ─────────────────────────────────────────── */
.hint-suggestions[b-e5z1vm8vps] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.hint-suggestions--row[b-e5z1vm8vps] {
    width: 100%;
}

@media (max-width: 1200px) {
    .hint-suggestions[b-e5z1vm8vps] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .hint-suggestions[b-e5z1vm8vps] {
        grid-template-columns: 1fr;
    }
}

.hint-suggestions[b-e5z1vm8vps]  .hint-selected-card.selected,
.hint-suggestions[b-e5z1vm8vps]  .hint-selected-card.selected:hover {
    background: color-mix(in srgb, var(--bs-primary) 5%, transparent);
    border-color: var(--bs-primary);
    transform: none;
}

.hint-selected-details[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hint-selected-detail-row[b-e5z1vm8vps] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.hint-selected-detail-label[b-e5z1vm8vps] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.hint-selected-detail-value[b-e5z1vm8vps] {
    color: var(--bs-secondary-color);
    word-break: break-word;
}

/* ── Score bar + text ─────────────────────────────────────────── */
.hint-score[b-e5z1vm8vps] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 5rem;
}

.hint-score-bar[b-e5z1vm8vps] {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--bs-gray-200);
    overflow: hidden;
}

.hint-score-fill[b-e5z1vm8vps] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hint-score-fill--success[b-e5z1vm8vps] {
    background: linear-gradient(90deg, var(--bs-success), #20c997);
}

.hint-score-fill--warning[b-e5z1vm8vps] {
    background: linear-gradient(90deg, var(--bs-warning), #fd7e14);
}

.hint-score-fill--muted[b-e5z1vm8vps] {
    background: var(--bs-secondary);
}

.hint-score-text[b-e5z1vm8vps] {
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.hint-score-text--success[b-e5z1vm8vps] {
    color: var(--bs-success-text-emphasis);
}

.hint-score-text--warning[b-e5z1vm8vps] {
    color: var(--bs-warning-text-emphasis);
}

.hint-score-text--muted[b-e5z1vm8vps] {
    color: var(--bs-secondary);
}

/* ── Match reasons (inside suggestion card) ───────────────────── */
.hint-match-reasons[b-e5z1vm8vps] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hint-match-reason[b-e5z1vm8vps] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary);
    overflow: hidden;
}

.hint-match-reason-key[b-e5z1vm8vps] {
    font-weight: 700;
    margin-right: 0.2rem;
    color: var(--bs-body-color);
}

.hint-match-reason-values[b-e5z1vm8vps] {
    opacity: 0.85;
}

.hint-field-score[b-e5z1vm8vps] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.hint-field-score--success[b-e5z1vm8vps] {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.hint-field-score--warning[b-e5z1vm8vps] {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning-text-emphasis);
}

.hint-field-score--danger[b-e5z1vm8vps] {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

/* ── Search section ───────────────────────────────────────────── */
.hint-search-section[b-e5z1vm8vps] {
    width: 100%;
}

.hint-search-section--secondary[b-e5z1vm8vps] {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color);
    margin-bottom: 2rem;
}


/* The catalog columns are data-driven (per resource type), so the table uses auto layout - the
   component's documented choice for such tables: it sizes columns to content and scrolls instead
   of shredding them into one-character strips. Let it scroll horizontally when it overflows. */
.hint-search-section[b-e5z1vm8vps]  .app-table-scroll {
    overflow-x: auto;
}
/* /Areas/Auth/Components/AccessRequestStatusSkeleton.razor.rz.scp.css */
/* ========== AUTH SKELETON SHARED ========== */
/* These styles are used by auth-area skeleton components.   Global CSS (AuthPages.css) provides .auth-card, .auth-header, etc. */

/* List inside auth-content that mirrors .page-list-group */
.auth-skel-list[b-ywac4ag33k] {
    border: 1px solid #e0e2e7;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.auth-skel-list-item[b-ywac4ag33k] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e0e2e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-skel-list-item:last-child[b-ywac4ag33k] {
    border-bottom: none;
}

/* Header row for the requested-access group (mirrors .page-list-item--heading). */
.auth-skel-list-heading[b-ywac4ag33k] {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e2e7;
}

.auth-skel-notice[b-ywac4ag33k] {
    padding: 0.75rem 1rem;
    background: var(--bs-gray-100);
    border-radius: 8px;
}
/* /Areas/Auth/Components/EmailConfirmationSkeleton.razor.rz.scp.css */
/* ========== EMAIL CONFIRMATION SKELETON ========== */

.email-skel-center[b-wrzzx1na3o] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}
/* /Areas/Auth/Pages/AccessRequestStatus.razor.rz.scp.css */
/* Render each detail row as label + value on a single line, instead of the shared
   PageLayout stacked layout (label above value). */
.page-list-item[b-vidbezgv89] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-list-item-label[b-vidbezgv89] {
    margin-bottom: 0;
}

.page-list-item-value[b-vidbezgv89] {
    text-align: right;
}

/* Keep the support email address intact on a single line rather than wrapping mid-address. */
.support-link[b-vidbezgv89] {
    white-space: nowrap;
}

/* Section header for the requested-access group. */
.page-list-item--heading[b-vidbezgv89] {
    background-color: #f8f9fa;
}

    .page-list-item--heading .page-list-item-label[b-vidbezgv89] {
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #6c757d;
    }
/* /Areas/Auth/Pages/EmailConfirmationPage.razor.rz.scp.css */
.auth-card[b-wi7srnfex9] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.auth-state[b-wi7srnfex9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.auth-state h2[b-wi7srnfex9] {
    font-size: 1.4rem;
    font-weight: 600;
}

.auth-state p[b-wi7srnfex9] {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.auth-state.success h2[b-wi7srnfex9] {
    color: #16a34a;
}

.auth-state.error h2[b-wi7srnfex9] {
    color: #dc2626;
}

/* Icon in header title */
[b-wi7srnfex9] .auth-header .auth-title .app-icon {
    margin-right: 0.5rem;
    vertical-align: middle;
    display: inline-block;
}

[b-wi7srnfex9] .auth-header .auth-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* /Areas/Auth/Pages/LoginPage.razor.rz.scp.css */
.mobile-log-logo[b-4b7kjvl6f8] {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}
/* /Areas/Auth/Pages/RegistrationPage.razor.rz.scp.css */
/* ========== REGISTRATION STEP 1 — shared helpers ========== */

/* Tighten the gap between every field row in Step 1 */
.reg-step1-form[b-nj3xh493sa] {
    gap: 0.35rem;
}

.reg-step1-field[b-nj3xh493sa] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.reg-step1-label[b-nj3xh493sa] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #3a3a3a;
    margin-bottom: 3px;
}

/* Drop AppInput's own bottom margin so field spacing is controlled purely by the form gap, and
   tighten the internal label-to-input gap when used in Step 1. */
.reg-step1-field[b-nj3xh493sa]  .app-input {
    margin-bottom: 0;
    gap: 3px;
}

/* Password visibility toggle inside the Suffix slot */
.reg-pw-toggle[b-nj3xh493sa] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0 4px;
    cursor: pointer;
    color: #9ca3af;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.reg-pw-toggle:hover[b-nj3xh493sa] {
    color: #6b7280;
}

/* ========== MOBILE REGISTRATION STEP 2 ========== */
.mobile-reg-logo[b-nj3xh493sa] {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}

.mobile-reg-section-title[b-nj3xh493sa] {
    font-size: 14px;
    font-weight: 600;
    color: #171616;
    margin-bottom: 16px;
}

.mobile-reg-terms[b-nj3xh493sa] {
    margin: 16px 0;
}

.mobile-reg-terms-label[b-nj3xh493sa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.mobile-reg-checkbox[b-nj3xh493sa] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #EDD484;
}

.mobile-reg-terms-text[b-nj3xh493sa] {
    font-size: 12px;
    line-height: 1.5;
    color: #494545;
}

.mobile-reg-note[b-nj3xh493sa] {
    text-align: center;
    font-size: 12px;
    color: #8B8178;
    margin-top: 12px;
    margin-bottom: 0;
}
/* /Areas/Auth/Pages/TermsAndConditionsPage.razor.rz.scp.css */
.terms-card[b-6pyys2k760] {
    max-width: 1100px;
    min-height: 82vh;
    display: flex;
    flex-direction: column;
}

.terms-card .auth-content[b-6pyys2k760] {
    flex: 1;
}

[b-6pyys2k760] .terms-markdown-content {
    margin: 0;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 70vh;
    overflow: auto;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: justify;
    padding: 0 5px 0 5px;
}

[b-6pyys2k760] .terms-markdown-content h1,
[b-6pyys2k760] .terms-markdown-content h2,
[b-6pyys2k760] .terms-markdown-content h3,
[b-6pyys2k760] .terms-markdown-content h4,
[b-6pyys2k760] .terms-markdown-content h5,
[b-6pyys2k760] .terms-markdown-content h6,
[b-6pyys2k760] .terms-markdown-content p,
[b-6pyys2k760] .terms-markdown-content ul,
[b-6pyys2k760] .terms-markdown-content ol,
[b-6pyys2k760] .terms-markdown-content li,
[b-6pyys2k760] .terms-markdown-content blockquote {
    margin: 0;
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .terms-card[b-6pyys2k760] {
        min-height: 88vh;
    }

    [b-6pyys2k760] .terms-markdown-content {
        max-height: 65vh;
    }
}

[b-6pyys2k760] .terms-markdown-content p:empty {
    display: none;
}
/* /Areas/Home/Components/ReportCard.razor.rz.scp.css */
/* ============================================================
   ReportCard — supplements AppCard with card-specific styles
   ============================================================ */

/* ---- Override AppCard header so badge stays left and button right
        at every breakpoint (cancels the mobile column-stack)   ---- */
.report-card-wrapper[b-o0r08221lp]  .app-card-header {
    flex-direction: row !important;
    align-items: center;
    padding: 14px 16px;
}

.report-card-wrapper[b-o0r08221lp]  .app-card-header-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    flex-wrap: nowrap;
}

/* ---- Three-dots menu anchor (positions the dropdown)        ---- */
.report-card-menu[b-o0r08221lp] {
    position: relative;
    flex-shrink: 0;
}

/* ---- Dropdown panel ---- */
.report-card-dropdown[b-o0r08221lp] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
    overflow: hidden;
    animation: reportCardScaleIn-b-o0r08221lp 0.15s ease-out both;
    transform-origin: top right;
}

.report-card-dropdown-item[b-o0r08221lp] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s ease;
    touch-action: manipulation;
}

.report-card-dropdown-item:disabled[b-o0r08221lp] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.report-card-dropdown-item:hover:not(:disabled)[b-o0r08221lp],
.report-card-dropdown-item:focus-visible:not(:disabled)[b-o0r08221lp] {
    background: var(--color-bg-secondary);
}

.report-card-dropdown-item:focus-visible[b-o0r08221lp] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.report-card-dropdown-item svg[b-o0r08221lp] {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

/* ---- Transparent backdrop to close the menu on outside tap ---- */
.report-card-backdrop[b-o0r08221lp] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

/* ---- Data rows inside the card body ---- */
.report-card-row[b-o0r08221lp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.report-card-row + .report-card-row[b-o0r08221lp] {
    margin-top: 6px;
}

.report-card-label[b-o0r08221lp] {
    color: var(--color-text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.report-card-value[b-o0r08221lp] {
    color: var(--color-text-primary);
    font-weight: 400;
    text-align: right;
    word-break: break-word;
}

/* ---- Dropdown entrance animation ---- */
@keyframes reportCardScaleIn-b-o0r08221lp {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .report-card-dropdown[b-o0r08221lp] {
        animation: none;
    }
}

.status-archived[b-o0r08221lp]  .app-card {
    opacity: 0.7;
    filter: saturate(0.4);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.status-deleted[b-o0r08221lp]  .app-card {
    opacity: 0.55;
    filter: saturate(0.2) sepia(0.15);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .status-archived[b-o0r08221lp]  .app-card,
    .status-deleted[b-o0r08221lp]  .app-card {
        transition: none;
    }
}
/* /Areas/Home/Components/ReportFilterPanel.razor.rz.scp.css */
/* ========== HOST: positions the dropdown relative to the trigger ========== */

.filter-panel-host[b-7x2a2lc91d] {
    position: relative;
    display: inline-block;
}

/* ========== TRIGGER BUTTON ========== */

.filter-btn[b-7x2a2lc91d] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-btn--active[b-7x2a2lc91d] {
    /* Highlight the button when filters are active */
    border-color: var(--bs-primary, #6366f1) !important;
    color: var(--bs-primary, #6366f1) !important;
}

.filter-count-badge[b-7x2a2lc91d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bs-primary, #6366f1);
    color: var(--color-black);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* ========== DESKTOP DROPDOWN PANEL ========== */

.filter-dropdown[b-7x2a2lc91d] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    transform: none;
    min-width: 320px;
    max-width: 400px;
    width: max-content;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    animation: filter-dropdown-appear-b-7x2a2lc91d 0.15s ease;
}

.filter-dropdown--upward[b-7x2a2lc91d] {
    animation: filter-dropdown-appear-up-b-7x2a2lc91d 0.15s ease;
}

@keyframes filter-dropdown-appear-b-7x2a2lc91d {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes filter-dropdown-appear-up-b-7x2a2lc91d {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-dropdown__header[b-7x2a2lc91d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-dropdown__title[b-7x2a2lc91d] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.filter-dropdown__close[b-7x2a2lc91d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #68707d;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.filter-dropdown__close:hover[b-7x2a2lc91d] {
    background: #f3f4f6;
    color: #111827;
}

.filter-dropdown__body[b-7x2a2lc91d] {
    max-height: 420px;
    overflow-y: auto;
}

/* ========== FILTER SECTIONS (shared desktop + mobile) ========== */

.filter-section[b-7x2a2lc91d] {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-section--last[b-7x2a2lc91d] {
    border-bottom: none;
}

.filter-section__title[b-7x2a2lc91d] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #68707d;
    margin: 0 0 0.625rem;
}

.filter-section__empty[b-7x2a2lc91d] {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0;
}

.filter-checkbox[b-7x2a2lc91d] {
    margin-bottom: 0.375rem;
}

.filter-checkbox:last-of-type[b-7x2a2lc91d] {
    margin-bottom: 0;
}

/* ========== CREATOR SEARCH ========== */

.creator-selected[b-7x2a2lc91d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0f4ff;
    border: 1px solid #c7d7fd;
    border-radius: 8px;
}

.creator-selected__name[b-7x2a2lc91d] {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 500;
}

.creator-selected__clear[b-7x2a2lc91d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #68707d;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.creator-selected__clear:hover[b-7x2a2lc91d] {
    background: #dce8fd;
    color: #111827;
}

.creator-results[b-7x2a2lc91d] {
    margin-top: 0.375rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.creator-result[b-7x2a2lc91d] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    color: #111827;
    cursor: pointer;
    transition: background 0.1s;
}

.creator-result:last-child[b-7x2a2lc91d] {
    border-bottom: none;
}

.creator-result:hover[b-7x2a2lc91d] {
    background: #f9fafb;
}

/* ========== DATE MODE TOGGLE ========== */

.date-mode-toggle[b-7x2a2lc91d] {
    display: flex;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.date-mode-btn[b-7x2a2lc91d] {
    flex: 1;
    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    color: #68707d;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.date-mode-btn + .date-mode-btn[b-7x2a2lc91d] {
    border-left: 1px solid #e5e7eb;
}

.date-mode-btn.active[b-7x2a2lc91d] {
    background: var(--bs-primary, #6366f1);
    color: var(--color-black);
    font-weight: 500;
}

.date-mode-btn:not(.active):hover[b-7x2a2lc91d] {
    background: #f3f4f6;
    color: #111827;
}

.date-range-row[b-7x2a2lc91d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ========== FOOTER ========== */

.filter-footer[b-7x2a2lc91d] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* ========== MOBILE BOTTOM SHEET ADJUSTMENTS ========== */
/* The bottom sheet body has its own padding; sections inherit it cleanly */

@media (max-width: 767.98px) {
    .filter-section[b-7x2a2lc91d] {
        padding: 0.875rem 0;
    }

    .filter-section:has(.filter-checkbox)[b-7x2a2lc91d] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-section:has(.filter-checkbox) .filter-checkbox[b-7x2a2lc91d] {
        margin-bottom: 0;
    }

    .bs-footer .filter-footer[b-7x2a2lc91d] {
        padding: 0;
        background: transparent;
        border-top: none;
    }
}

/* /Areas/Home/Home.razor.rz.scp.css */
/* ========== MOBILE HOME SCREEN ========== */
.mobile-home[b-v9hky29wma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.mobile-home-actions[b-v9hky29wma] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 300px;
}

/* Card outer wrapper */
.mobile-home-card[b-v9hky29wma] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 300px;
    height: 100px;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.mobile-home-card:active[b-v9hky29wma] {
    transform: scale(0.97);
}

/* Primary card — golden background */
.mobile-home-card--primary[b-v9hky29wma] {
    background: #EDD484;
}

/* Secondary card — white background */
.mobile-home-card--secondary[b-v9hky29wma] {
    background: #FFFFFF;
}

/* Container Left row */
.mobile-home-card-container[b-v9hky29wma] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 16px;
    gap: 20px;
    width: 300px;
    height: 45px;
    border-radius: 37px;
}

/* Circle icon wrapper */
.mobile-home-card-icon[b-v9hky29wma] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* White circle for primary card */
.mobile-home-card-icon--white[b-v9hky29wma] {
    background: #FFFFFF;
    color: #171616;
}

/* Gold circle for secondary card */
.mobile-home-card-icon--gold[b-v9hky29wma] {
    background: rgba(237, 212, 132, 0.5);
    color: #171616;
}

/* Card label */
.mobile-home-card-label[b-v9hky29wma] {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    color: #494545;
}
/* /Areas/Overview/Components/OverviewReportsTableSkeleton.razor.rz.scp.css */
.overview-reports-table-skeleton[b-z6s0qyi7rl] {
    width: 100%;
}

.overview-reports-table-skeleton .app-table-skeleton-table[b-z6s0qyi7rl] {
    width: 100%;
    table-layout: fixed;
}

.overview-reports-table-skeleton .app-table-command-header[b-z6s0qyi7rl],
.overview-reports-table-skeleton .app-table-command-cell[b-z6s0qyi7rl] {
    width: 184px;
    text-align: center;
}

.overview-reports-table-skeleton .app-table-skeleton-command-actions[b-z6s0qyi7rl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.overview-reports-table-skeleton .app-table-command-header[b-z6s0qyi7rl]  .app-skeleton {
    margin-left: auto;
    margin-right: auto;
}
/* /Areas/Overview/Overview.razor.rz.scp.css */
/* ========== Overview sections ========== */
.overview-section-title[b-i02egh7phg] {
    letter-spacing: 0.04em;
}

.overview-local-section + .overview-remote-section[b-i02egh7phg] {
    margin-top: 0;
}

.mobile-home[b-i02egh7phg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.mobile-home--survey[b-i02egh7phg] {
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
}

.mobile-home-actions[b-i02egh7phg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 300px;
}

/* Card outer wrapper — matches Frame 1000003907 */
.mobile-home-card[b-i02egh7phg] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 300px;
    height: 100px;
    border: none;
    border-radius: 8px;
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

    .mobile-home-card:active[b-i02egh7phg] {
        transform: scale(0.97);
    }

/* Primary card — golden background */
.mobile-home-card--primary[b-i02egh7phg] {
    background: #EDD484;
}

/* Secondary card — white background */
.mobile-home-card--secondary[b-i02egh7phg] {
    background: #FFFFFF;
}

/* Container Left row — matches "Container Left" */
.mobile-home-card-container[b-i02egh7phg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 16px;
    gap: 20px;
    width: 300px;
    height: 45px;
    border-radius: 37px;
}

/* Circle icon wrapper */
.mobile-home-card-icon[b-i02egh7phg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* White circle for primary card */
.mobile-home-card-icon--white[b-i02egh7phg] {
    background: #FFFFFF;
    color: #171616;
}

/* Gold circle for secondary card */
.mobile-home-card-icon--gold[b-i02egh7phg] {
    background: rgba(237, 212, 132, 0.5);
    color: #171616;
}

/* Card label — matches "placeholder-text" */
.mobile-home-card-label[b-i02egh7phg] {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    color: #494545;
}

/* ========== INLINE SURVEY LIST (MOBILE) ========== */
.survey-list-view[b-i02egh7phg] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0;
}

/* ========== Status filter tabs ========== */
.overview-status-tabs[b-i02egh7phg] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .overview-status-tabs[b-i02egh7phg]::-webkit-scrollbar {
        display: none;
    }

.overview-status-tabs[b-i02egh7phg]  .app-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ========== Pagination ========== */
.survey-pagination[b-i02egh7phg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.survey-page-info[b-i02egh7phg] {
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-gray-600);
}

/* ========== Loading & empty ========== */
.survey-loading[b-i02egh7phg] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.survey-empty[b-i02egh7phg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--bs-gray-400);
}

    .survey-empty p[b-i02egh7phg] {
        margin: 0;
        font-size: 15px;
        text-align: center;
    }

.survey-scroll-sentinel[b-i02egh7phg] {
    height: 1px;
}

/* ========== Success toast (mobile) ========== */
.survey-toast[b-i02egh7phg] {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1e1e1e;
    color: #fff;
    border-radius: 50px;
    padding: 12px 18px 12px 14px;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    animation: toast-in-b-i02egh7phg 200ms ease;
}

@keyframes toast-in-b-i02egh7phg {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.survey-toast-icon[b-i02egh7phg] {
    color: #4caf50;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.survey-toast-message[b-i02egh7phg] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.survey-toast-dismiss[b-i02egh7phg] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}

/* /Areas/Reports/Components/DateTimeQuestion.razor.rz.scp.css */
.datetime-question[b-fi2zbpwejy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.datetime-question-date[b-fi2zbpwejy],
.datetime-question-time[b-fi2zbpwejy] {
    width: 100%;
}

/* When time picker is disabled, show visual feedback */
.datetime-question-time[b-fi2zbpwejy]  .app-input-wrapper.is-disabled {
    opacity: 0.6;
}

/* On larger screens, show side by side */
@media (min-width: 576px) {
    .datetime-question[b-fi2zbpwejy] {
        flex-direction: row;
        gap: 1rem;
    }

    .datetime-question-date[b-fi2zbpwejy] {
        flex: 1.2;
    }

    .datetime-question-time[b-fi2zbpwejy] {
        flex: 0.8;
    }
}
/* /Areas/Reports/Components/OneOfSelectorPills.razor.rz.scp.css */
.one-of-pills[b-jnh4f01hv3] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 0 1rem;
}

.pill[b-jnh4f01hv3] {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #111827;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.pill:focus-visible[b-jnh4f01hv3] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.pill--active[b-jnh4f01hv3] {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border: 2px solid var(--bs-primary);
    color: #111827;
}

.pill--inactive:hover[b-jnh4f01hv3] {
    border-color: #9ca3af;
    background: #f9fafb;
}

.one-of-pills--disabled[b-jnh4f01hv3] {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .pill[b-jnh4f01hv3] {
        transition: none;
    }
}
/* /Areas/Reports/Components/PredefinedListQuestion.razor.rz.scp.css */
.predefined-list-question[b-v32v1dc3lu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}

.predefined-list-label[b-v32v1dc3lu] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
}

.predefined-list-required[b-v32v1dc3lu] {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}

.predefined-list-empty[b-v32v1dc3lu] {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    padding: 8px 0;
}

.predefined-list-options[b-v32v1dc3lu] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.predefined-list-option[b-v32v1dc3lu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 14px;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    border-left: 3px solid transparent;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.predefined-list-option:last-child[b-v32v1dc3lu] {
    border-bottom: none;
}

/* Hover — only on non-touch devices to avoid sticky hover on mobile */
@media (hover: hover) {
    .predefined-list-option:not(.disabled):not(.selected):hover[b-v32v1dc3lu] {
        background: var(--bs-gray-200);
    }

    .predefined-list-option.selected:not(.disabled):hover[b-v32v1dc3lu] {
        background: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    }
}

/* Pressed feedback on touch */
.predefined-list-option:not(.disabled):active[b-v32v1dc3lu] {
    background: var(--bs-gray-200);
}

/* Selected state */
.predefined-list-option.selected[b-v32v1dc3lu] {
    background: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    border-left-color: var(--bs-primary);
}

.predefined-list-option.selected .predefined-list-option-text[b-v32v1dc3lu] {
    font-weight: 500;
    color: var(--bs-black);
}

/* Keyboard focus ring */
.predefined-list-option:focus-visible[b-v32v1dc3lu] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.predefined-list-option.disabled[b-v32v1dc3lu] {
    cursor: not-allowed;
    opacity: 0.6;
}

.predefined-list-option-text[b-v32v1dc3lu] {
    font-size: 14px;
    color: var(--text-primary, #1e293b);
    flex: 1;
    line-height: 1.4;
}
/* /Areas/Reports/Components/QuestionGroupRenderer.razor.rz.scp.css */
/* Question Group Container */
.question-group-container[b-sp4g9xjkn1] {
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 6px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
}

.question-group-container:hover[b-sp4g9xjkn1] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header Section */
.question-group-header[b-sp4g9xjkn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(to bottom, var(--bs-body-bg), var(--bs-tertiary-bg));
    border-bottom: 2px solid var(--bs-border-color);
    gap: 16px;
}

.question-group-title[b-sp4g9xjkn1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.question-group-title h4[b-sp4g9xjkn1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    flex: 1;
    min-width: 0;
}

.question-group-title[b-sp4g9xjkn1]  .app-icon {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.question-group-add-answer.is-disabled[b-sp4g9xjkn1] {
    display: inline-block;
    cursor: not-allowed;
}

/* Items Container */
.question-group-items[b-sp4g9xjkn1] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Item Number Badge (rendered via RenderItemNumberBadge in accordion TitleContent) */
.item-number[b-sp4g9xjkn1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border: 2px solid var(--bs-primary-border-subtle);
    border-radius: 50%;
    padding: 0 8px;
    flex-shrink: 0;
}

/* Remove action — right-aligned below answer fields */
.question-group-item-remove[b-sp4g9xjkn1] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    width: 100%;
}

/* Item Fields — flex column so Remove stays at bottom */
.question-group-item-fields[b-sp4g9xjkn1] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 4px;
    min-width: 0;
}

/* Question grid inside each answer set / accordion */
.question-group-item-fields-grid[b-sp4g9xjkn1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
    align-items: start;
    min-width: 0;
}

/* Wide desktop only: 3 columns (below 1000px stays single column) */
@media (min-width: 1000px) {
    .question-group-item-fields-grid:not(.question-group-item-fields-grid--single)[b-sp4g9xjkn1],
    .question-group-item-fields-grid--single[b-sp4g9xjkn1] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.question-group-item-fields-grid[b-sp4g9xjkn1]  .question-wrapper {
    margin-bottom: 16px;
    min-width: 0;
}

/* Picture picker inside groups: fixed thumb size, wrap to next row when needed */
.question-group-item-fields-grid[b-sp4g9xjkn1]  .app-picture-picker {
    min-width: 0;
}

.question-group-item-fields-grid[b-sp4g9xjkn1]  .pp-thumb,
.question-group-item-fields-grid[b-sp4g9xjkn1]  .pp-thumb--add {
    flex: 0 0 125px;
    width: 125px;
    height: 125px;
    aspect-ratio: auto;
}

/* Mobile: 1 column */
@media (max-width: 575.98px) {
    .question-group-item-fields-grid[b-sp4g9xjkn1],
    .question-group-item-fields-grid--single[b-sp4g9xjkn1] {
        grid-template-columns: 1fr;
    }

    .question-group-item-fields-grid[b-sp4g9xjkn1]  .question-wrapper {
        margin-bottom: 12px;
    }
}

.question-group-item-fields.removing[b-sp4g9xjkn1] {
    animation: slideOutFade-b-sp4g9xjkn1 0.3s cubic-bezier(0.6, -0.28, 0.74, 0.05) forwards;
    pointer-events: none;
}

/* Accordion grid — 3 per row only at 1000px+ */
@media (min-width: 1000px) {
    .question-group-accordion-grid[b-sp4g9xjkn1]  .app-accordion {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 1.5rem;
        align-items: start;
    }

    .question-group-accordion-grid[b-sp4g9xjkn1]  .accordion-section {
        align-self: start;
        height: auto;
        break-inside: avoid;
        min-width: 0;
    }
}

/* Animations */
@keyframes slideOutFade-b-sp4g9xjkn1 {
    0% {
        opacity: 1;
        transform: scale(1) translateX(0);
        max-height: 1000px;
        margin-bottom: 16px;
    }

    50% {
        opacity: 0.3;
        transform: scale(0.95) translateX(-20px);
    }

    100% {
        opacity: 0;
        transform: scale(0.9) translateX(-40px);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .question-group-header[b-sp4g9xjkn1] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }

    .question-group-title h4[b-sp4g9xjkn1] {
        font-size: 0.9375rem;
    }

    .question-group-items[b-sp4g9xjkn1] {
        padding: 12px;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .question-group-header[b-sp4g9xjkn1] {
        padding: 14px;
    }

    .question-group-items[b-sp4g9xjkn1] {
        padding: 10px;
        gap: 0;
    }

    .item-number[b-sp4g9xjkn1] {
        min-width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }
}

/* Touch Targets */
@media (hover: none) and (pointer: coarse) {
    .question-group-header[b-sp4g9xjkn1]  .btn {
        min-height: 44px;
        padding: 12px 16px;
    }
}

.question-group-pagination[b-sp4g9xjkn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 8px;
}

.question-group-pagination .pagination-info[b-sp4g9xjkn1] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    min-width: 90px;
    text-align: center;
}
/* /Areas/Reports/Components/QuestionRenderer.razor.rz.scp.css */
.question-wrapper[b-k9o189qxto] {
    margin-bottom: 24px;
}

.question-wrapper:last-child[b-k9o189qxto] {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .question-wrapper[b-k9o189qxto] {
        margin-bottom: 0;
    }

    /* Checkbox / option lists — same spacing as filter panels */
    .question-wrapper[b-k9o189qxto]  :has(> .app-checkbox ~ .app-checkbox) {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .question-wrapper[b-k9o189qxto]  :has(> .app-checkbox ~ .app-checkbox) > .app-checkbox {
        margin-bottom: 0;
    }

    .question-wrapper[b-k9o189qxto]  .app-radio-group {
        gap: 0.75rem;
    }

    .question-wrapper[b-k9o189qxto]  .predefined-list-options {
        gap: 0.75rem;
        border: none;
        overflow: visible;
    }

    .question-wrapper[b-k9o189qxto]  .predefined-list-option {
        border: 1px solid var(--bs-border-color, #e2e8f0);
        border-radius: 8px;
    }

    .question-wrapper[b-k9o189qxto]  .predefined-list-option:last-child {
        border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    }
}
/* /Areas/Reports/Components/RadioButtonGroupQuestion.razor.rz.scp.css */
.radio-button-group-question[b-evkeakgrfh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.radio-button-group-label[b-evkeakgrfh] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
}

.radio-button-group-required[b-evkeakgrfh] {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}

.radio-button-group-empty[b-evkeakgrfh] {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    padding: 0.5rem 0;
}
/* /Areas/Reports/Components/ReportFormSkeleton.razor.rz.scp.css */
/* ========== REPORT FORM SKELETON ========== */

/* Mobile top bar skeleton */
.rf-skel-top-bar[b-w28d6yic90] {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--color-surface, #fff);
}

@media (min-width: 768px) {
    .rf-skel-top-bar[b-w28d6yic90] {
        display: none;
    }
}

/* Card-style content area — uses page-card for styling, this adds layout */
.rf-skel-card[b-w28d6yic90] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
}

/* Individual question block */
.rf-skel-question[b-w28d6yic90] {
    display: flex;
    flex-direction: column;
}

/* Activity + notification logs row */
.rf-skel-logs-row[b-w28d6yic90] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.rf-skel-logs-row > .page-card[b-w28d6yic90] {
    min-width: 0;
}

@media (min-width: 768px) {
    .rf-skel-logs-row[b-w28d6yic90] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
}

.rf-skel-log-entry[b-w28d6yic90] {
    display: flex;
    flex-direction: column;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.rf-skel-log-entry:last-child[b-w28d6yic90] {
    border-bottom: none;
}
/* /Areas/Reports/Components/ReportMobileTopBar.razor.rz.scp.css */
.report-mobile-top-bar[b-vjrtegptg8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 16px;
    background: var(--color-surface);
}

.report-mobile-top-bar__start[b-vjrtegptg8] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Areas/Reports/Components/ReportNavBarContent.razor.rz.scp.css */
.report-nav-bar-content[b-7b8mv7vf3m] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}
/* /Areas/Reports/Components/ReportsOverviewSkeleton.razor.rz.scp.css */
/* /Areas/Reports/Components/SectionCard.razor.rz.scp.css */
.section-card[b-f3veijgh4a] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.section-card:hover[b-f3veijgh4a] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section-card.expanded[b-f3veijgh4a] {
    border-color: var(--bs-primary);
}

/* ========== SECTION HEADER ========== */
.section-header[b-f3veijgh4a] {
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.section-header:hover[b-f3veijgh4a] {
    background-color: #f9fafb;
}

.section-title-row[b-f3veijgh4a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-title[b-f3veijgh4a] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.section-title h4[b-f3veijgh4a] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.section-status[b-f3veijgh4a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-text[b-f3veijgh4a] {
    font-size: 14px;
    font-weight: 600;
    color: #68707d;
}

/* ========== PROGRESS BAR ========== */
.section-progress-bar[b-f3veijgh4a] {
    width: 100%;
}

.progress[b-f3veijgh4a] {
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-f3veijgh4a] {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.progress-bar.bg-danger[b-f3veijgh4a] {
    background-color: #ef4444;
}

.progress-bar.bg-warning[b-f3veijgh4a] {
    background-color: #f59e0b;
}

.progress-bar.bg-success[b-f3veijgh4a] {
    background-color: #10b981;
}

/* ========== SECTION CONTENT ========== */
.section-content[b-f3veijgh4a] {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    animation: slideDown-b-f3veijgh4a 0.3s ease;
}

@keyframes slideDown-b-f3veijgh4a {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== TEXT SUCCESS ========== */
.text-success[b-f3veijgh4a] {
    color: #10b981;
}

/* ========== QUESTION STYLES ========== */
.question-hint[b-f3veijgh4a] {
    display: block;
    font-size: 12px;
    color: #68707d;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .section-card[b-f3veijgh4a] {
        margin-bottom: 12px;
    }

    .section-header[b-f3veijgh4a] {
        padding: 14px 16px;
    }

    .section-content[b-f3veijgh4a] {
        padding: 16px;
    }

    .section-title h4[b-f3veijgh4a] {
        font-size: 15px;
    }
}
/* /Areas/Reports/Components/SelectModuleSkeleton.razor.rz.scp.css */
/* ========== SELECT MODULE SKELETON ========== */

/* Outer card — mirrors .page-card */
.sm-skel-card[b-eaq13xtu8z] {
    background-color: var(--bs-white);
    border: 1px solid #e0e2e7;
    border-radius: 16px;
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.sm-skel-card-header[b-eaq13xtu8z] {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #e0e2e7;
}

/* List container — matches .module-list gap */
.sm-skel-list[b-eaq13xtu8z] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each row — mirrors .module-item */
.sm-skel-row[b-eaq13xtu8z] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e2e7;
    min-height: 56px; /* touch-target height */
}

.sm-skel-row:last-child[b-eaq13xtu8z] {
    border-bottom: none;
}

.sm-skel-info[b-eaq13xtu8z] {
    display: flex;
    align-items: center;
    flex: 1;
}

@media (max-width: 768px) {
    .sm-skel-row[b-eaq13xtu8z] {
        padding: 14px 16px;
    }
}
/* /Areas/Reports/Components/SwipeContainer.razor.rz.scp.css */
/* ============================================================
   SwipeContainer — 3-panel horizontal swipe layout
   ============================================================
   Structure:
     .swipe-container
       .swipe-sticky          (optional fixed header — NOT translated)
       .swipe-panels-wrapper  (position: relative anchor for abs panels)
         .swipe-panel.swipe-panel--prev     (absolutely positioned, off left)
         .swipe-panel.swipe-panel--current  (in normal flow → defines height)
         .swipe-panel.swipe-panel--next     (absolutely positioned, off right)

   The sticky slot renders above the panels and does NOT participate in
   the swipe translation. The panels wrapper provides the positioning
   context so prev/next absolute panels don't overlap the sticky header.
   ============================================================ */

.swipe-container[b-rx0cb757tk] {
    position: relative;
    width: 100%;
    min-height: 100%;
    /* Allow the browser to handle vertical scrolling natively;
       horizontal panning is intercepted by swipe-navigate.js. */
    touch-action: pan-y;
    padding-bottom: 4rem; /* space above navbar on mobile */
}

/* ----- sticky header slot — never translated ----- */

.swipe-sticky[b-rx0cb757tk] {
    position: relative;
    z-index: 2;
}

/* ----- panels wrapper — provides positioning context for prev/next ----- */

.swipe-panels-wrapper[b-rx0cb757tk] {
    position: relative;
    transition: height 200ms ease;
}

/* ----- shared panel base ----- */

.swipe-panel[b-rx0cb757tk] {
    width: 100%;
    will-change: transform;
    /* Default easing applied when JS resets panels or springs back.
       Overridden to 'none' during an active drag so movement is 1:1. */
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----- prev panel: off-screen left, absolutely positioned ----- */

.swipe-panel--prev[b-rx0cb757tk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Initial CSS position; JS overrides with pixel values on init. */
    transform: translateX(-110%);
}

/* ----- current panel: in normal flow, determines container height ----- */

.swipe-panel--current[b-rx0cb757tk] {
    /* Intentionally NOT absolutely positioned.
       Keeps the container tall enough to contain the visible content. */
    transform: translateX(0);
}

/* ----- next panel: off-screen right, absolutely positioned ----- */

.swipe-panel--next[b-rx0cb757tk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Initial CSS position; JS overrides with pixel values on init. */
    transform: translateX(110%);
}

/* ----- reduced-motion override ----- */

@media (prefers-reduced-motion: reduce) {
    .swipe-panel[b-rx0cb757tk] {
        transition: none;
    }
}
/* /Areas/Reports/Pages/ReportFormPage.razor.rz.scp.css */
/* ========== Question grid ========== */
/*
 * .question-grid is built via RenderTreeBuilder so it does not receive the
 * Blazor CSS isolation scope attribute.  We must pierce into it from a
 * statically-rendered ancestor that does carry the attribute.
 */
.step-content[b-y14uekpuv6]  .question-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
}

.step-content[b-y14uekpuv6],
.step-content[b-y14uekpuv6]  .question-grid > * {
    min-width: 0;
}

@media (min-width: 600px) and (max-width: 1023px) {
    .step-content[b-y14uekpuv6]  .question-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .step-content[b-y14uekpuv6]  .question-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .step-content[b-y14uekpuv6]  .question-grid .question-group-container {
        grid-column: 1 / -1;
    }
}

/* === Step content area === */
.step-content[b-y14uekpuv6] {
    animation: step-fade-in-b-y14uekpuv6 200ms ease;
    overflow: hidden;
}

@keyframes step-fade-in-b-y14uekpuv6 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === One-of-pills sticky bar (mobile) === */
.one-of-pills-sticky[b-y14uekpuv6] {
    animation: pills-fade-in-b-y14uekpuv6 180ms ease both;
}

@keyframes pills-fade-in-b-y14uekpuv6 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === One-of-pills inside swipe panel === */
.one-of-pills-panel[b-y14uekpuv6] {
    padding: 8px 0 4px;
}

/* === Section heading === */
.section-heading[b-y14uekpuv6] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* === Mobile responsive === */
@media (max-width: 767px) {
    .step-content[b-y14uekpuv6] {
        /* Swipe provides the transition on mobile; suppress the fade-in to avoid double animation. */
        animation: none;
    }
}

/* === Desktop responsive === */
@media (min-width: 768px) {
    .step-progress-row[b-y14uekpuv6] {
        padding: 12px 0 16px;
    }
}

/* ========== Report logs row ========== */
.report-logs-row[b-y14uekpuv6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.report-logs-row > .page-card[b-y14uekpuv6] {
    min-width: 0;
}

@media (min-width: 768px) {
    .report-logs-row[b-y14uekpuv6] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .report-logs-row > .page-card:only-child[b-y14uekpuv6] {
        grid-column: 1 / -1;
    }
}

/* ========== Activity log ========== */
.activity-log-list[b-y14uekpuv6] {
    display: flex;
    flex-direction: column;
}

.activity-log-row[b-y14uekpuv6] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.activity-log-row:last-child[b-y14uekpuv6] {
    border-bottom: none;
}

.activity-log-desc[b-y14uekpuv6] {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.activity-log-meta[b-y14uekpuv6] {
    flex-shrink: 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ========== Notification log ========== */
.notification-log-list[b-y14uekpuv6] {
    display: flex;
    flex-direction: column;
}

.notification-log-row[b-y14uekpuv6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.notification-log-row:last-child[b-y14uekpuv6] {
    border-bottom: none;
}

.notification-log-info strong[b-y14uekpuv6] {
    display: block;
    font-size: 0.8125rem;
    word-break: break-word;
}

.notification-log-status[b-y14uekpuv6] {
    font-size: 0.875rem;
}

.notification-log-date[b-y14uekpuv6] {
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .notification-log-row[b-y14uekpuv6] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

.report-header-progress[b-y14uekpuv6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-delete-reason[b-y14uekpuv6] {
    font-size: 0.875rem;
    color: var(--bs-gray);
}
/* /Areas/Settings/Components/ProfilePageSkeleton.razor.rz.scp.css */
.user-edit-page[b-ir1603gioe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-form-row[b-ir1603gioe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.profile-form-actions[b-ir1603gioe] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 576px) {
    .profile-form-row[b-ir1603gioe] {
        grid-template-columns: 1fr;
    }
}

.profile-card-header-left[b-ir1603gioe] {
    display: flex;
    align-items: center;
}
/* /Areas/Settings/Components/ResourceHistorySkeleton.razor.rz.scp.css */
/* ========== RESOURCE HISTORY SKELETON ========== */

.rh-skel-list[b-6e9flzplrq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-card-header[b-6e9flzplrq] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.history-card-title[b-6e9flzplrq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-card-body[b-6e9flzplrq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rh-skel-items-list[b-6e9flzplrq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rh-skel-request-item[b-6e9flzplrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
}

.rh-skel-item-info[b-6e9flzplrq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

@media (max-width: 576px) {
    .history-card-header[b-6e9flzplrq] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .rh-skel-request-item[b-6e9flzplrq] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Areas/Settings/Pages/ContactFormPage.razor.rz.scp.css */
.contact-form-container[b-kmyaw0b9jh] {
    max-width: 600px;
}

.contact-form-intro[b-kmyaw0b9jh] {
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}

.contact-form-fields[b-kmyaw0b9jh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form-actions[b-kmyaw0b9jh] {
    display: flex;
    justify-content: center;
}

/* ── Success bottom sheet body ── */

.contact-form-success-sheet[b-kmyaw0b9jh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0 0.5rem;
    text-align: center;
}

.contact-form-success-message[b-kmyaw0b9jh] {
    margin: 0;
    font-size: 1rem;
}

.contact-form-success-reference[b-kmyaw0b9jh] {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}
/* /Areas/Settings/Pages/ProfilePage.razor.rz.scp.css */
.user-edit-page[b-48mdx7q8o3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-form-row[b-48mdx7q8o3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.profile-form-actions[b-48mdx7q8o3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.profile-card-header-left[b-48mdx7q8o3] {
    display: flex;
    align-items: center;
    color: var(--bs-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .profile-form-row[b-48mdx7q8o3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .user-edit-page[b-48mdx7q8o3]  .app-card-header {
        flex-direction: row;
        align-items: center;
    }

    .user-edit-page[b-48mdx7q8o3]  .app-card-header-content {
        width: auto;
        justify-content: flex-end;
    }
}
/* /Areas/Settings/Pages/ResourceAccessRequestPage.razor.rz.scp.css */
.resource-access-page[b-3x24r6gp0k] {
    margin: 0 auto;
}

.new-request-container[b-3x24r6gp0k] {
    animation: fadeIn-b-3x24r6gp0k 0.3s ease-out;
}

.resource-selectors[b-3x24r6gp0k] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.resource-selector-section[b-3x24r6gp0k] {
    padding: 1.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.section-title[b-3x24r6gp0k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.resource-selector-actions[b-3x24r6gp0k] {
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    justify-content: end;
}

.request-history-container[b-3x24r6gp0k] {
    animation: fadeIn-b-3x24r6gp0k 0.3s ease-out;
}

.history-loading[b-3x24r6gp0k],
.history-empty[b-3x24r6gp0k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.history-empty[b-3x24r6gp0k] {
    color: var(--bs-secondary);
}

.history-list[b-3x24r6gp0k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-card[b-3x24r6gp0k] {
    transition: all 0.2s ease;
}

.history-card:hover[b-3x24r6gp0k] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.history-card-header[b-3x24r6gp0k] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.history-card-title[b-3x24r6gp0k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-card-title h5[b-3x24r6gp0k] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.history-card-body[b-3x24r6gp0k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.request-items[b-3x24r6gp0k] {
    margin-top: 1rem;
}

.items-title[b-3x24r6gp0k] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--bs-secondary);
}

.items-list[b-3x24r6gp0k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.request-item[b-3x24r6gp0k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    border-left: 3px solid var(--bs-gray);
    transition: all 0.2s ease;
}

.request-item:hover[b-3x24r6gp0k] {
    background: var(--bs-gray-200);
    border-left-color: var(--bs-primary);
}

.item-info[b-3x24r6gp0k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.item-name[b-3x24r6gp0k] {
    font-weight: 500;
    font-size: 0.875rem;
}

.item-type[b-3x24r6gp0k] {
    font-size: 0.75rem;
}

.history-stats[b-3x24r6gp0k] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.history-stat[b-3x24r6gp0k] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.history-stat.pending[b-3x24r6gp0k] {
    background: rgba(255, 193, 7, 0.1);
    color: var(--bs-warning);
}

.history-stat.approved[b-3x24r6gp0k] {
    background: rgba(25, 135, 84, 0.1);
    color: var(--bs-success);
}

.history-stat.rejected[b-3x24r6gp0k] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.history-pagination[b-3x24r6gp0k] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@keyframes fadeIn-b-3x24r6gp0k {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .resource-selector-section[b-3x24r6gp0k] {
        padding: 1rem;
    }

    .section-title[b-3x24r6gp0k] {
        font-size: 1rem;
    }

    .history-card-header[b-3x24r6gp0k] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .resource-selector-actions[b-3x24r6gp0k] {
        flex-direction: column;
    }

    .history-stats[b-3x24r6gp0k] {
        flex-direction: column;
    }
}
/* /Areas/Settings/Pages/SecurityPage.razor.rz.scp.css */
.security-page[b-ayai785fvn] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.security-card-header-left[b-ayai785fvn] {
    display: flex;
    align-items: center;
    color: var(--bs-primary);
}

.security-sessions-header-actions[b-ayai785fvn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.security-section-description[b-ayai785fvn] {
    margin: 0 0 1rem;
    color: var(--bs-secondary);
}

.security-form[b-ayai785fvn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.security-form-row[b-ayai785fvn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.security-form-row:not(.security-form-inline-row) .security-form-field[b-ayai785fvn] {
    width: 33.333%;
    max-width: 33.333%;
    min-width: 0;
}

.security-form-row:not(.security-form-inline-row) .security-form-field[b-ayai785fvn]  .app-input {
    width: 100%;
    margin-bottom: 0;
}

.security-form-field .validation-message[b-ayai785fvn] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

.security-form-inline-row[b-ayai785fvn] {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.75rem;
}

.security-form-inline-row[b-ayai785fvn]  .app-input {
    flex: 0 0 33.333%;
    width: 33.333%;
    max-width: 33.333%;
    min-width: 0;
    margin-bottom: 0;
}

.security-form-inline-row[b-ayai785fvn]  .app-button {
    flex-shrink: 0;
    min-height: 48px;
}

@media (max-width: 768px) {
    .security-form-inline-row[b-ayai785fvn] {
        flex-direction: column;
        align-items: stretch;
    }

    .security-form-inline-row[b-ayai785fvn]  .app-input {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    .security-form-inline-row[b-ayai785fvn]  .app-button {
        width: 100%;
    }

    .security-form-row:not(.security-form-inline-row) .security-form-field[b-ayai785fvn] {
        width: 100%;
        max-width: 100%;
    }
}

.security-form-actions[b-ayai785fvn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.security-sessions-list[b-ayai785fvn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.security-session-item[b-ayai785fvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.security-session-info[b-ayai785fvn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.security-session-title[b-ayai785fvn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 600;
}

.security-session-meta[b-ayai785fvn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--bs-secondary);
    font-size: 0.875rem;
}

/* Keep the icon next to the title on mobile — override AppCard's column layout */
@media (max-width: 768px) {
    .security-page[b-ayai785fvn]  .app-card-header {
        flex-direction: row;
        align-items: center;
    }

    .security-page[b-ayai785fvn]  .app-card-header-content {
        width: auto;
        justify-content: flex-end;
    }
}
/* /Areas/Settings/Pages/SettingsPage.razor.rz.scp.css */
.settings-container[b-qv8y46w701] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 0;
}

.settings-profile-banner[b-qv8y46w701] {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--bs-primary);
    border-radius: 6px;
    color: var(--bs-black);
}

.settings-profile-avatar[b-qv8y46w701] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 1.125rem;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
}

.settings-profile-info[b-qv8y46w701] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-profile-name[b-qv8y46w701] {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .settings-profile-banner[b-qv8y46w701] {
        display: flex;
    }
}

.settings-grid[b-qv8y46w701] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .settings-grid[b-qv8y46w701] {
        grid-template-columns: 1fr;
    }
}

.settings-card-link[b-qv8y46w701] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-card-link:hover .settings-card-icon[b-qv8y46w701] {
    color: var(--bs-gray-dark);
}

.disabled[b-qv8y46w701] {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-card-offline[b-qv8y46w701] {
    pointer-events: none;
}

.settings-card-offline .settings-card-icon[b-qv8y46w701] {
    filter: grayscale(0.35);
}

.settings-card-icon[b-qv8y46w701] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--bs-primary);
    border-radius: 6px;
    color: var(--bs-gray);
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.settings-offline-badge[b-qv8y46w701] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-white);
    color: var(--bs-warning);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border: 1.5px solid var(--bs-white);
}

.settings-card-content[b-qv8y46w701] {
    flex: 1;
    margin-top: 1rem;
    min-width: 0;
}

.settings-card-title[b-qv8y46w701] {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.settings-card-description[b-qv8y46w701] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    line-height: 1.4;
}

.badge[b-qv8y46w701] {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.pwa-install-steps[b-qv8y46w701] {
    padding-left: 1.25rem;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.settings-card-icon--danger[b-qv8y46w701] {
    background-color: var(--bs-danger);
}

.settings-card-title--danger[b-qv8y46w701] {
    color: var(--bs-danger);
}

.settings-version[b-qv8y46w701] {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-secondary);
}
/* /Areas/Settings/Pages/SettingsTermsAndConditionsPage.razor.rz.scp.css */
.settings-terms-page[b-25ncr4eett] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-terms-card-icon[b-25ncr4eett] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

[b-25ncr4eett] .settings-terms-markdown {
    margin: 0;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 69vh;
    overflow: auto;
    line-height: 1.55;
    padding: 0 5px 0 5px;
}

[b-25ncr4eett] .settings-terms-markdown h1,
[b-25ncr4eett] .settings-terms-markdown h2,
[b-25ncr4eett] .settings-terms-markdown h3,
[b-25ncr4eett] .settings-terms-markdown h4,
[b-25ncr4eett] .settings-terms-markdown h5,
[b-25ncr4eett] .settings-terms-markdown h6,
[b-25ncr4eett] .settings-terms-markdown p,
[b-25ncr4eett] .settings-terms-markdown ul,
[b-25ncr4eett] .settings-terms-markdown ol,
[b-25ncr4eett] .settings-terms-markdown li,
[b-25ncr4eett] .settings-terms-markdown blockquote {
    margin: 0;
    color: var(--color-text-primary);
}

[b-25ncr4eett] .settings-terms-markdown p,
[b-25ncr4eett] .settings-terms-markdown li,
[b-25ncr4eett] .settings-terms-markdown blockquote {
    text-align: justify;
}

[b-25ncr4eett] .settings-terms-markdown p:empty {
    display: none;
}

@media (max-width: 768px) {
    .settings-terms-page[b-25ncr4eett]  .app-card-header {
        flex-direction: row !important;
        align-items: center;
    }

    .settings-terms-page[b-25ncr4eett]  .app-card-header-content {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .settings-terms-card-icon[b-25ncr4eett] {
        width: auto;
        justify-content: flex-end;
    }

    [b-25ncr4eett] .settings-terms-markdown {
        max-height: calc(100dvh - 375px);
    }
}
/* /Areas/Tickets/Components/TicketDetailSkeleton.razor.rz.scp.css */
.td-skel-header-info[b-c31wy9n4i6] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-light, #f3f4f6);
    width: 100%;
}

.td-skel-page[b-c31wy9n4i6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.td-skel-layout-info[b-c31wy9n4i6],
.td-skel-layout-conversation[b-c31wy9n4i6] {
    min-width: 0;
}

.td-skel-layout-conversation[b-c31wy9n4i6]  .app-card {
    width: 100%;
}

.td-skel-layout-info[b-c31wy9n4i6]  .app-card {
    width: 100%;
}

.td-skel-layout-info[b-c31wy9n4i6] {
    container-type: inline-size;
    container-name: ticket-info-skel;
}

.td-skel-details-grid[b-c31wy9n4i6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
    width: 100%;
}

.td-skel-details-block[b-c31wy9n4i6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
}

.td-skel-chat[b-c31wy9n4i6] {
    display: flex;
    flex-direction: column;
    min-height: 20rem;
    max-height: calc(100vh - 16rem);
}

.td-skel-chat-thread[b-c31wy9n4i6] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-bottom: 1rem;
}

.td-skel-message[b-c31wy9n4i6] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: min(85%, 36rem);
}

.td-skel-message--own[b-c31wy9n4i6] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.td-skel-message--other[b-c31wy9n4i6] {
    align-self: flex-start;
}

.td-skel-message-content[b-c31wy9n4i6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.td-skel-message-meta[b-c31wy9n4i6] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0 0.25rem;
}

.td-skel-message--own .td-skel-message-meta[b-c31wy9n4i6] {
    flex-direction: row-reverse;
}

.td-skel-message-bubble[b-c31wy9n4i6] {
    padding: 0.625rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 50%, transparent);
    border-radius: 0.75rem;
    background: var(--bs-white, #fff);
}

.td-skel-message--own .td-skel-message-bubble[b-c31wy9n4i6] {
    background: color-mix(in srgb, var(--bs-primary) 50%, transparent);
}

.td-skel-chat-composer[b-c31wy9n4i6] {
    flex-shrink: 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border-light, #f3f4f6);
}

.td-skel-composer-row[b-c31wy9n4i6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@container ticket-info-skel (max-width: 360px) {
    .td-skel-details-grid[b-c31wy9n4i6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container ticket-info-skel (max-width: 220px) {
    .td-skel-details-grid[b-c31wy9n4i6] {
        grid-template-columns: 1fr;
    }
}

/* ── mobile (≤768px) ── */
@media (max-width: 768px) {
    .td-skel-layout-conversation[b-c31wy9n4i6]  .app-card-header {
        display: none;
    }

    .td-skel-layout-conversation[b-c31wy9n4i6]  .app-card {
        display: flex;
        flex-direction: column;
        height: auto;
        flex: none;
    }

    .td-skel-layout-conversation[b-c31wy9n4i6]  .app-card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .td-skel-layout-conversation[b-c31wy9n4i6] {
        margin-bottom: 1.5rem;
    }

    .td-skel-details-grid[b-c31wy9n4i6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .td-skel-chat[b-c31wy9n4i6] {
        flex: 1 1 auto;
        min-height: 20rem;
        max-height: calc(100dvh - 15rem);
    }

    .td-skel-chat-thread[b-c31wy9n4i6] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: hidden;
    }
}

@media (max-width: 380px) {
    .td-skel-details-grid[b-c31wy9n4i6] {
        grid-template-columns: 1fr;
    }
}

/* ── desktop (≥992px) ── */
@media (min-width: 992px) {
    .td-skel-page[b-c31wy9n4i6] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .td-skel-layout-conversation[b-c31wy9n4i6] {
        order: 1;
        flex: 2 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .td-skel-layout-info[b-c31wy9n4i6] {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        align-self: flex-start;
    }

    .td-skel-layout-conversation[b-c31wy9n4i6]  .app-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .td-skel-layout-conversation[b-c31wy9n4i6]  .app-card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .td-skel-chat[b-c31wy9n4i6] {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 12rem);
    }

    .td-skel-chat-thread[b-c31wy9n4i6] {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
}
/* /Areas/Tickets/Components/TicketFilterPanel.razor.rz.scp.css */
/* ========== HOST: positions the dropdown relative to the trigger ========== */

.filter-panel-host[b-nn5951n8cr] {
    position: relative;
    display: inline-block;
}

/* ========== TRIGGER BUTTON ========== */

.filter-btn[b-nn5951n8cr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-btn--active[b-nn5951n8cr] {
    /* Highlight the button when filters are active */
    border-color: var(--bs-primary, #6366f1) !important;
    color: var(--bs-primary, #6366f1) !important;
}

.filter-count-badge[b-nn5951n8cr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bs-primary, #6366f1);
    color: var(--color-black);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* ========== DESKTOP DROPDOWN PANEL ========== */

.filter-dropdown[b-nn5951n8cr] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    transform: none;
    min-width: 320px;
    max-width: 400px;
    width: max-content;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    overflow: hidden;
    animation: filter-dropdown-appear-b-nn5951n8cr 0.15s ease;
}

.filter-dropdown--upward[b-nn5951n8cr] {
    animation: filter-dropdown-appear-up-b-nn5951n8cr 0.15s ease;
}

@keyframes filter-dropdown-appear-b-nn5951n8cr {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes filter-dropdown-appear-up-b-nn5951n8cr {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-dropdown__header[b-nn5951n8cr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-dropdown__title[b-nn5951n8cr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.filter-dropdown__close[b-nn5951n8cr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #68707d;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.filter-dropdown__close:hover[b-nn5951n8cr] {
    background: #f3f4f6;
    color: #111827;
}

.filter-dropdown__body[b-nn5951n8cr] {
    max-height: 420px;
    overflow-y: auto;
}

/* ========== FILTER SECTIONS (shared desktop + mobile) ========== */

.filter-section[b-nn5951n8cr] {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-section--last[b-nn5951n8cr] {
    border-bottom: none;
}

.filter-section__title[b-nn5951n8cr] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #68707d;
    margin: 0 0 0.625rem;
}

.filter-section__empty[b-nn5951n8cr] {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0;
}

.filter-checkbox[b-nn5951n8cr] {
    margin-bottom: 0.375rem;
}

.filter-checkbox:last-of-type[b-nn5951n8cr] {
    margin-bottom: 0;
}

/* ========== FOOTER ========== */

.filter-footer[b-nn5951n8cr] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* ========== MOBILE BOTTOM SHEET ADJUSTMENTS ========== */

@media (max-width: 767.98px) {
    .filter-section[b-nn5951n8cr] {
        padding: 0.875rem 0;
    }

    .filter-section:has(.filter-checkbox)[b-nn5951n8cr] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-section:has(.filter-checkbox) .filter-checkbox[b-nn5951n8cr] {
        margin-bottom: 0;
    }

    .bs-footer .filter-footer[b-nn5951n8cr] {
        padding: 0;
        background: transparent;
        border-top: none;
    }
}
/* /Areas/Tickets/Components/TicketInformationGrid.razor.rz.scp.css */
.ticket-information-grid[b-ccvfs5k6y7] {
    container-type: inline-size;
    container-name: ticket-info;
    width: 100%;
}

.ticket-details-grid[b-ccvfs5k6y7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
    width: 100%;
}

.ticket-details-block[b-ccvfs5k6y7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
}

.ticket-details-block--status-editable[b-ccvfs5k6y7] {
    min-width: 0;
}

.ticket-details-block--status-editable[b-ccvfs5k6y7]  .app-combo {
    width: 100%;
    max-width: 100%;
}

.ticket-details-label[b-ccvfs5k6y7] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    margin: 0;
}

.ticket-details-value[b-ccvfs5k6y7] {
    font-size: 0.9rem;
    color: var(--bs-body-color);
    word-break: break-word;
}

.ticket-details-link[b-ccvfs5k6y7] {
    font-size: 0.9rem;
    color: var(--bs-primary);
    text-decoration: none;
    word-break: break-word;
}

.ticket-details-link:hover[b-ccvfs5k6y7] {
    text-decoration: underline;
}

@container ticket-info (max-width: 360px) {
    .ticket-details-grid[b-ccvfs5k6y7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container ticket-info (max-width: 220px) {
    .ticket-details-grid[b-ccvfs5k6y7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ticket-details-grid[b-ccvfs5k6y7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .ticket-details-grid[b-ccvfs5k6y7] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Tickets/Pages/TicketDetail.razor.rz.scp.css */
/* ── shared / all breakpoints ──────────────────────────────── */
.ticket-detail-page[b-m0yxxs81lw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.ticket-detail-layout-info[b-m0yxxs81lw],
.ticket-detail-layout-conversation[b-m0yxxs81lw] {
    min-width: 0;
}

.ticket-detail-layout-info[b-m0yxxs81lw]  .app-card,
.ticket-detail-layout-conversation[b-m0yxxs81lw]  .app-card {
    width: 100%;
}

.ticket-detail-layout-conversation[b-m0yxxs81lw]  .ticket-detail-conversation-card {
    min-height: 20rem;
}

.ticket-detail-header-info[b-m0yxxs81lw] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-light, #f3f4f6);
}

/* Mobile: title left, header actions right — same row */
@media (max-width: 768px) {
    .ticket-detail-container[b-m0yxxs81lw]  .page-header-title-row {
        flex-direction: row;
        align-items: center;
    }

    .ticket-detail-container[b-m0yxxs81lw]  .page-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ticket-detail-container[b-m0yxxs81lw]  .page-header-actions {
        width: auto;
        margin-left: auto;
        flex-shrink: 0;
        justify-content: flex-end;
    }

    .ticket-detail-container[b-m0yxxs81lw]  .page-header-actions > * {
        flex: none;
        width: auto;
    }
}

.ticket-chat[b-m0yxxs81lw] {
    display: flex;
    flex-direction: column;
    min-height: 20rem;
    max-height: calc(100vh - 16rem);
}

/* Desktop default: thread scrolls internally */
.ticket-chat-thread[b-m0yxxs81lw] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.ticket-chat-composer[b-m0yxxs81lw] {
    flex-shrink: 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border-light, #f3f4f6);
}

.ticket-composer-row[b-m0yxxs81lw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ticket-composer-row[b-m0yxxs81lw]  .app-input {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.ticket-composer-row[b-m0yxxs81lw]  .app-form-input-field {
    min-height: 44px;
}

.ticket-send[b-m0yxxs81lw] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
}

.ticket-send[b-m0yxxs81lw]  .app-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.field-error[b-m0yxxs81lw] {
    margin: 0.375rem 0 0;
    color: var(--bs-danger);
}

/* ── mobile (≤768px): #mobile-main scrolls the whole page ── */
@media (max-width: 768px) {
    .ticket-detail-layout-conversation[b-m0yxxs81lw]  .app-card-header {
        display: none;
    }

    .ticket-detail-layout-conversation[b-m0yxxs81lw]  .app-card {
        display: flex;
        flex-direction: column;
        height: auto;
        flex: none;
    }

    .ticket-detail-layout-conversation[b-m0yxxs81lw]  .app-card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    /* Extra breathing room so composer clears the bottom nav when page is scrolled down */
    .ticket-detail-layout-conversation[b-m0yxxs81lw] {
        margin-bottom: 1.5rem;
    }

    .ticket-chat[b-m0yxxs81lw] {
        flex: 1 1 auto;
        min-height: 20rem;
        /* When messages grow beyond this, the thread scrolls internally */
        max-height: calc(100dvh - 15rem);
    }

    /* Thread: inner scroll kicks in once chat hits max-height */
    .ticket-chat-thread[b-m0yxxs81lw] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* ── desktop (≥992px): 2 columns, chat thread scrolls internally ── */
@media (min-width: 992px) {
    .ticket-detail-page[b-m0yxxs81lw] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .ticket-detail-page-alert[b-m0yxxs81lw] {
        flex: 0 0 100%;
        width: 100%;
    }

    .ticket-detail-layout-conversation[b-m0yxxs81lw] {
        order: 1;
        flex: 2 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .ticket-detail-layout-info[b-m0yxxs81lw] {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        align-self: flex-start;
    }

    /* Card fills column so the thread can scroll inside it */
    .ticket-detail-layout-conversation[b-m0yxxs81lw]  .app-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .ticket-detail-layout-conversation[b-m0yxxs81lw]  .app-card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .ticket-chat[b-m0yxxs81lw] {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 12rem);
    }

    .ticket-chat-thread[b-m0yxxs81lw] {
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
}
/* /Areas/Tickets/Pages/TicketsOverview.razor.rz.scp.css */
.ticket-create-intro[b-42ooze9m4e] {
    color: var(--bs-secondary-color);
    margin: 0 0 1rem;
}

.ticket-description-preview[b-42ooze9m4e] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    max-width: 100%;
    color: var(--bs-body-color);
    word-break: break-word;
}

.ticket-create-fields[b-42ooze9m4e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ticket-create-success-sheet[b-42ooze9m4e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0 0.5rem;
    text-align: center;
}

.ticket-create-success-message[b-42ooze9m4e] {
    margin: 0;
    font-size: 1rem;
}

.ticket-create-success-reference[b-42ooze9m4e] {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.ticket-overview-actions[b-42ooze9m4e] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ticket-cancel-help[b-42ooze9m4e] {
    margin-bottom: 0.75rem;
    color: var(--color-text-secondary, #6c757d);
}

.field-error[b-42ooze9m4e] {
    margin: 0.375rem 0 0;
    color: var(--bs-danger);
}
/* /Shared/Components/AppAccordion.razor.rz.scp.css */
.app-accordion[b-js23nm7uzb] {
    display: flex;
    flex-direction: column;
}

.app-accordion.flush .accordion-section[b-js23nm7uzb] {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    margin-bottom: 0;
}

.app-accordion.flush .accordion-section:first-child[b-js23nm7uzb] {
    border-top: none;
}

.app-accordion.flush .accordion-section:last-child[b-js23nm7uzb] {
    border-bottom: none;
}

.app-accordion.flush .accordion-section:hover[b-js23nm7uzb] {
    box-shadow: none;
}

.app-accordion.flush .accordion-section.open[b-js23nm7uzb] {
    box-shadow: none;
}
/* /Shared/Components/AppAccordionSection.razor.rz.scp.css */
.accordion-section[b-wwg6o3t5c4] {
    border-radius: 6px;
    border: 1px solid #dee2e6;
    margin-bottom: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s;
    overflow: hidden;
}

.accordion-section:last-child[b-wwg6o3t5c4] {
    margin-bottom: 0;
}

.accordion-section:hover[b-wwg6o3t5c4] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: var(--bs-primary);
}

.accordion-section.open[b-wwg6o3t5c4] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.accordion-header[b-wwg6o3t5c4] {
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
    color: var(--bs-body-color);
    background: transparent;
}

.accordion-header:hover[b-wwg6o3t5c4] {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.accordion-header:active[b-wwg6o3t5c4] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.accordion-section.open .accordion-header[b-wwg6o3t5c4] {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.accordion-section:not(.open) .accordion-header[b-wwg6o3t5c4] {
    background-color: transparent;
}

.accordion-header-main[b-wwg6o3t5c4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
}

.accordion-header-content[b-wwg6o3t5c4] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin-right: 1rem;
    justify-content: space-between;
    gap: 0.75rem;
}

.accordion-header-content-extra[b-wwg6o3t5c4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

.accordion-title[b-wwg6o3t5c4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion-header-badge[b-wwg6o3t5c4] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
}

.accordion-title-extra[b-wwg6o3t5c4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.accordion-title-icon[b-wwg6o3t5c4] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bs-primary);
    opacity: 0.8;
}

.accordion-header-description[b-wwg6o3t5c4] {
    font-weight: 500;
    color: var(--bs-secondary);
    font-size: 0.875rem;
}

.accordion-chevron[b-wwg6o3t5c4] {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.accordion-chevron.open[b-wwg6o3t5c4] {
    transform: rotate(180deg);
}

.accordion-header-footer[b-wwg6o3t5c4] {
    margin-top: 0.75rem;
    pointer-events: none;
}

/* CSS Grid collapse - smoothly animates to actual content height */
.accordion-collapse[b-wwg6o3t5c4] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-collapse.show[b-wwg6o3t5c4] {
    grid-template-rows: 1fr;
}

/* Wrapper needed for grid animation to work properly */
.accordion-body[b-wwg6o3t5c4] {
    min-height: 0; /* Required for grid animation */
    padding: 0 1.25rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 280ms ease 40ms,
                transform 280ms cubic-bezier(0.4, 0, 0.2, 1) 40ms,
                padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-collapse.show .accordion-body[b-wwg6o3t5c4] {
    padding: 1.25rem;
    opacity: 1;
    transform: translateY(0);
}

.accordion-collapse:not(.show) .accordion-body[b-wwg6o3t5c4] {
    pointer-events: none;
    padding: 0 !important;
}

/* Accessibility improvements */
.accordion-header:focus[b-wwg6o3t5c4] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.accordion-header:focus:not(:focus-visible)[b-wwg6o3t5c4] {
    outline: none;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .accordion-header[b-wwg6o3t5c4] {
        padding: 0.875rem 1rem;
    }

    .accordion-header-main[b-wwg6o3t5c4] {
        font-size: 0.9375rem;
    }

    .accordion-header-footer[b-wwg6o3t5c4] {
        margin-top: 0.5rem;
    }

    .accordion-collapse.show .accordion-body[b-wwg6o3t5c4] {
        padding: 1rem;
    }

    .accordion-body[b-wwg6o3t5c4] {
        padding: 0;
    }

    .accordion-header-description[b-wwg6o3t5c4] {
        display: none;
    }
}
/* /Shared/Components/AppAlert.razor.rz.scp.css */
/* ========== BASE ALERT ========== */
.app-alert[b-dcgqlghu9o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.5;
}

/* ========== ALERT ICON ========== */
.app-alert-icon[b-dcgqlghu9o] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== ALERT CONTENT ========== */
.app-alert-content[b-dcgqlghu9o] {
    flex: 1;
    min-width: 0;
}

.app-alert-title[b-dcgqlghu9o] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.app-alert-message[b-dcgqlghu9o] {
    margin: 0;
}

.app-alert-message p[b-dcgqlghu9o] {
    margin: 0;
}

.app-alert-message p + p[b-dcgqlghu9o] {
    margin-top: 8px;
}

/* ========== CLOSE BUTTON ========== */
.app-alert-close[b-dcgqlghu9o] {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-alert-close:hover[b-dcgqlghu9o] {
    opacity: 1;
}

.app-alert-close:focus-visible[b-dcgqlghu9o] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ========== INFO VARIANT ========== */
.app-alert-info[b-dcgqlghu9o] {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #0d47a1;
}

.app-alert-info .app-alert-icon[b-dcgqlghu9o] {
    color: #1976d2;
}

/* ========== SUCCESS VARIANT ========== */
.app-alert-success[b-dcgqlghu9o] {
    background-color: #e8f5e9;
    border-color: #81c784;
    color: #1b5e20;
}

.app-alert-success .app-alert-icon[b-dcgqlghu9o] {
    color: #2e7d32;
}

/* ========== WARNING VARIANT ========== */
.app-alert-warning[b-dcgqlghu9o] {
    background-color: #fff3e0;
    border-color: #ffb74d;
    color: #c24400;
}

.app-alert-warning .app-alert-icon[b-dcgqlghu9o] {
    color: #f57c00;
}

/* ========== DANGER VARIANT ========== */
.app-alert-danger[b-dcgqlghu9o] {
    background-color: #ffebee;
    border-color: #e57373;
    color: #b71c1c;
}

.app-alert-danger .app-alert-icon[b-dcgqlghu9o] {
    color: #c62828;
}
/* /Shared/Components/AppBadge.razor.rz.scp.css */
.app-badge[b-2nsa1ja4wg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    line-height: 1;
    font-size: 12px;
    min-height: 22px;
}

/* ========== SIZE VARIANTS ========== */
.app-badge.badge-small[b-2nsa1ja4wg] {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 6px;
}

.app-badge.badge-large[b-2nsa1ja4wg] {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 18px;
}

/* ========== COLOR VARIANTS ========== */
.app-badge-primary[b-2nsa1ja4wg]      { background-color: color-mix(in srgb, var(--bs-primary) 50%, transparent); color: var(--bs-black); }
.app-badge-success[b-2nsa1ja4wg]      { background-color: color-mix(in srgb, var(--bs-success) 50%, transparent); color: var(--bs-black); }
.app-badge-secondary[b-2nsa1ja4wg]    { background-color: color-mix(in srgb, var(--bs-secondary) 50%, transparent); color: var(--bs-black); }
.app-badge-danger[b-2nsa1ja4wg]       { background-color: color-mix(in srgb, var(--bs-danger) 50%, transparent); color: var(--bs-black); }
.app-badge-warning[b-2nsa1ja4wg]      { background-color: color-mix(in srgb, var(--bs-warning) 50%, transparent); color: var(--bs-black); }
.app-badge-info[b-2nsa1ja4wg]         { background-color: color-mix(in srgb, var(--bs-info) 50%, transparent); color: var(--bs-black); }

/* ========== BADGE CONTENT ========== */
.badge-icon[b-2nsa1ja4wg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-text[b-2nsa1ja4wg] {
    display: inline;
}

/* ========== DISMISS BUTTON ========== */
.badge-dismiss[b-2nsa1ja4wg] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    opacity: 0.8;
    transition: opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}

.badge-dismiss:hover[b-2nsa1ja4wg] {
    opacity: 1;
}

.badge-dismiss:focus[b-2nsa1ja4wg] {
    outline: 1px solid currentColor;
    outline-offset: 1px;
}

/* ========== ANIMATIONS ========== */
.app-badge-animate-in[b-2nsa1ja4wg] {
    animation: badge-pop-in-b-2nsa1ja4wg 0.3s ease-out;
}

.app-badge-animate-out[b-2nsa1ja4wg] {
    animation: badge-pop-out-b-2nsa1ja4wg 0.25s ease-in forwards;
}

@keyframes badge-pop-in-b-2nsa1ja4wg {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes badge-pop-out-b-2nsa1ja4wg {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translateY(-4px);
    }
}
/* /Shared/Components/AppBottomSheet.razor.rz.scp.css */
/* ========== Backdrop ========== */
.bs-backdrop[b-5gebvr20j7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: bs-fade-in-b-5gebvr20j7 200ms ease-out;
    touch-action: none;
    overscroll-behavior: none;
    pointer-events: auto;
}

/* Hidden until moved to document.body — avoids fixed-position bugs inside transformed swipe panels */
.bs-backdrop:not(.bs-attached)[b-5gebvr20j7] {
    visibility: hidden;
    pointer-events: none;
}

.bs-backdrop.bs-closing[b-5gebvr20j7] {
    animation: bs-fade-out-b-5gebvr20j7 300ms ease-in forwards;
}

/* ========== Sheet panel (mobile: bottom sheet) ========== */
.bs-sheet[b-5gebvr20j7] {
    width: 100%;
    max-width: 600px;
    max-height: 92dvh;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    touch-action: none;
}

/* Size variants (mobile only) */
.bs-sheet.bs-size-small[b-5gebvr20j7] {
    min-height: 25dvh;
}

.bs-sheet.bs-size-medium[b-5gebvr20j7] {
    min-height: 40dvh;
}

.bs-sheet.bs-size-large[b-5gebvr20j7] {
    min-height: 50dvh;
}

.bs-slide-in[b-5gebvr20j7] {
    animation: bs-slide-up-b-5gebvr20j7 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.bs-slide-out[b-5gebvr20j7] {
    animation: bs-slide-down-b-5gebvr20j7 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* ========== Drag zone (iOS-style handle area) ========== */
.bs-drag-zone[b-5gebvr20j7] {
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}

.bs-drag-zone:active[b-5gebvr20j7] {
    cursor: grabbing;
}

/* ========== Handle bar ========== */
.bs-handle-bar-wrapper[b-5gebvr20j7] {
    display: flex;
    justify-content: center;
    padding: 0.625rem 0 0.25rem;
    flex-shrink: 0;
}

.bs-handle-bar[b-5gebvr20j7] {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: #d1d5db;
}

/* ========== Header ========== */
.bs-header[b-5gebvr20j7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1.25rem 0.5rem;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}

.bs-header:active[b-5gebvr20j7] {
    cursor: grabbing;
}

.bs-title[b-5gebvr20j7] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
    margin: 0;
}

.bs-close-btn[b-5gebvr20j7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #68707d;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.bs-close-btn:hover[b-5gebvr20j7] {
    background: #e5e7eb;
    color: #1f2937;
}

.bs-close-btn:active[b-5gebvr20j7] {
    background: #d1d5db;
}

/* ========== Body ========== */
.bs-body[b-5gebvr20j7] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1.5rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.bs-body.bs-body--with-footer[b-5gebvr20j7] {
    padding-bottom: 0.75rem;
}

/* ========== Footer ========== */
.bs-footer[b-5gebvr20j7] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-shrink: 0;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    touch-action: none;
}

/* ========== Desktop mode — centered modal ========== */
.bs-backdrop.bs-desktop[b-5gebvr20j7] {
    align-items: center;
}

.bs-desktop .bs-sheet[b-5gebvr20j7] {
    border-radius: 20px;
    max-height: 85vh;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
}

.bs-desktop .bs-slide-in[b-5gebvr20j7] {
    animation: bs-scale-in-b-5gebvr20j7 200ms ease-out;
}

.bs-desktop .bs-slide-out[b-5gebvr20j7] {
    animation: bs-scale-out-b-5gebvr20j7 200ms ease-in forwards;
}

.bs-desktop .bs-header[b-5gebvr20j7] {
    padding: 1rem 1.5rem 0.75rem;
}

.bs-desktop .bs-body[b-5gebvr20j7] {
    padding: 0 1.5rem 1.5rem;
}

/* ========== Animations ========== */
@keyframes bs-fade-in-b-5gebvr20j7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bs-fade-out-b-5gebvr20j7 {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes bs-slide-up-b-5gebvr20j7 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes bs-slide-down-b-5gebvr20j7 {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

@keyframes bs-scale-in-b-5gebvr20j7 {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes bs-scale-out-b-5gebvr20j7 {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
}
/* /Shared/Components/AppBreadcrumb.razor.rz.scp.css */
.app-breadcrumb[b-5pgrnzuniq] {
    width: 100%;
    background: #f9fafb;
    animation: slideInDown-b-5pgrnzuniq 0.3s ease-out;
}

/* ========== BREADCRUMB LIST ========== */
.breadcrumb-list[b-5pgrnzuniq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ========== BREADCRUMB ITEM ========== */
.breadcrumb-item[b-5pgrnzuniq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--bs-black);
    line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;
}

.breadcrumb-item.active[b-5pgrnzuniq] {
    color: var(--bs-black);
    font-weight: 400;
}

/* ========== BREADCRUMB TEXT ========== */
.breadcrumb-text[b-5pgrnzuniq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* ========== BREADCRUMB BUTTON ========== */
.breadcrumb-button[b-5pgrnzuniq] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
    color: var(--bs-black);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .breadcrumb-button:hover[b-5pgrnzuniq] {
        background: none;
        color: var(--bs-black);
    }
}

.breadcrumb-button:active[b-5pgrnzuniq] {
    background: none;
    transform: scale(0.98);
}

.breadcrumb-button:focus-visible[b-5pgrnzuniq] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .breadcrumb-text[b-5pgrnzuniq] {
        max-width: 120px;
    }

    .breadcrumb-list[b-5pgrnzuniq] {
        gap: 6px;
    }

    .breadcrumb-item[b-5pgrnzuniq] {
        font-size: 13px;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes slideInDown-b-5pgrnzuniq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Shared/Components/AppButton.razor.rz.scp.css */
/* ========== RESET ANCHOR TAG STYLING ========== */
a.app-button[b-cspsanywm9] {
    text-decoration: none;
    color: inherit;
}

a.app-button:hover[b-cspsanywm9] {
    text-decoration: none;
}

a.app-button:visited[b-cspsanywm9] {
    color: inherit;
}

/* ========== BASE BUTTON STYLES ========== */
.app-button[b-cspsanywm9] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 8px 16px;
    border-radius: 100px;
    border: none;
    font-weight: var(--font-weight-medium);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-family-primary) !important;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: nowrap;
    min-height: 36px;
    text-transform: capitalize;
}

/* ========== ICON-ONLY BUTTONS (CIRCLE) ========== */
.app-button.icon-only[b-cspsanywm9] {
    padding: 0;
    border-radius: 50%;
    gap: 0;
}

/* Icon sizing for icon-only buttons lives in GetIconSize() (14/16/20 by ButtonSize) - the
   icon-only class only exists on the path that renders <AppIcon Size="@GetIconSize()" />. */

.app-button.icon-only.size-small[b-cspsanywm9] {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
}

.app-button.icon-only.size-medium[b-cspsanywm9] {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
}

.app-button.icon-only.size-large[b-cspsanywm9] {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
}

.button-icon-slot[b-cspsanywm9] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.app-button.icon-only .button-icon-slot[b-cspsanywm9] {
    width: 100%;
    height: 100%;
}

.button-icon-layer[b-cspsanywm9],
.button-spinner-layer[b-cspsanywm9] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.button-icon-layer.is-hidden[b-cspsanywm9] {
    opacity: 0;
    transform: scale(0.85);
}

.button-spinner-layer[b-cspsanywm9] {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

.button-spinner-layer.is-visible[b-cspsanywm9] {
    opacity: 1;
    transform: scale(1);
}

/* ========== SIZE VARIANTS ========== */
.app-button.size-medium[b-cspsanywm9] {
    min-height: 46px;
    padding: 8px 16px;
    font-size: 15px;
}

.app-button.size-small[b-cspsanywm9] {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 100px;
}

.app-button.size-large[b-cspsanywm9] {
    min-height: 56px;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 100px;
}

/* ========== STYLE VARIANTS ========== */
.app-button.variant-primary[b-cspsanywm9] {
    background: var(--bs-primary);
    color: var(--color-black);
    border: none;
    box-shadow: none;
}

@media (hover: hover) {
    .app-button.variant-primary:hover:not(:disabled)[b-cspsanywm9] {
        background-color: var(--color-yellow-bright);
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
    }
}

.app-button.variant-primary:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-secondary[b-cspsanywm9] {
    background: transparent;
    color: var(--color-black);
    box-shadow: 0 0 0 2px var(--bs-primary) inset;
}

@media (hover: hover) {
    .app-button.variant-secondary:hover:not(:disabled)[b-cspsanywm9] {
        background-color: rgba(237, 212, 132, 0.5);
        border-color: var(--bs-primary);
        transform: translateY(-1px);
    }
}

.app-button.variant-secondary:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: none;
}

.app-button.variant-dark[b-cspsanywm9] {
    background: var(--color-black);
    color: var(--bs-primary);
    border: 2px solid var(--color-black);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .app-button.variant-dark:hover:not(:disabled)[b-cspsanywm9] {
        background-color: rgba(73, 69, 69, 1);
        border-color: rgba(73, 69, 69, 1);
        color: rgba(241, 204, 85, 1);
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
    }
}

.app-button.variant-dark:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-muted[b-cspsanywm9] {
    background: rgb(172, 163, 154);
    color: var(--color-black);
    border: none;
    box-shadow: none;
}

@media (hover: hover) {
    .app-button.variant-muted:hover:not(:disabled)[b-cspsanywm9] {
        background-color: #b8b1a9;
        transform: translateY(-1px);
    }
}

.app-button.variant-muted:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: none;
}

.app-button.variant-success[b-cspsanywm9] {
    background: var(--bs-success);
    color: var(--color-white);
    border: none;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .app-button.variant-success:hover:not(:disabled)[b-cspsanywm9] {
        background-color: color-mix(in srgb, var(--bs-success), black 10%);
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
    }
}

.app-button.variant-success:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-danger[b-cspsanywm9] {
    background: var(--bs-danger);
    color: var(--color-white);
    border: none;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .app-button.variant-danger:hover:not(:disabled)[b-cspsanywm9] {
        background-color: color-mix(in srgb, var(--bs-danger), black 10%);
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
    }
}

.app-button.variant-danger:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-warning[b-cspsanywm9] {
    background: var(--bs-warning);
    color: var(--color-black);
    border: none;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .app-button.variant-warning:hover:not(:disabled)[b-cspsanywm9] {
        background-color: color-mix(in srgb, var(--bs-warning), black 10%);
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
    }
}

.app-button.variant-warning:active:not(:disabled)[b-cspsanywm9] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-outline[b-cspsanywm9] {
    background: transparent;
    color: var(--bs-gray-900);
    border: 2px solid var(--bs-primary);
    box-shadow: none;
}

@media (hover: hover) {
    .app-button.variant-outline:hover:not(:disabled)[b-cspsanywm9] {
        background: var(--bs-primary);
        color: var(--color-black);
        border-color: var(--bs-primary);
        box-shadow: none;
    }
}

.app-button.variant-outline:active:not(:disabled)[b-cspsanywm9] {
    background: color-mix(in srgb, var(--bs-primary), black 5%);
    box-shadow: none;
}

.app-button.variant-outline.is-selected[b-cspsanywm9] {
    border-color: var(--bs-primary);
    background-color: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    color: var(--color-black);
}

@media (hover: hover) {
    .app-button.variant-outline.is-selected:hover:not(:disabled)[b-cspsanywm9] {
        background-color: color-mix(in srgb, var(--bs-primary) 50%, transparent);
        color: var(--color-black);
        border-color: var(--bs-primary);
    }
}

.app-button.variant-outline.is-selected:active:not(:disabled)[b-cspsanywm9] {
    background-color: color-mix(in srgb, var(--bs-primary) 50%, transparent);
}

/* ========== FULL WIDTH ========== */
.app-button.full-width[b-cspsanywm9] {
    width: 100%;
}

/* ========== DISABLED STATE ========== */
.app-button:disabled[b-cspsanywm9] {
    opacity: 1;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.app-button.variant-primary:disabled[b-cspsanywm9],
.app-button.variant-dark:disabled[b-cspsanywm9],
.app-button.variant-muted:disabled[b-cspsanywm9],
.app-button.variant-success:disabled[b-cspsanywm9],
.app-button.variant-danger:disabled[b-cspsanywm9],
.app-button.variant-warning:disabled[b-cspsanywm9] {
    background: var(--bs-gray-400);
    color: var(--bs-gray-600);
    border-color: transparent;
}

.app-button.variant-secondary:disabled[b-cspsanywm9] {
    background: transparent;
    color: var(--bs-gray-500);
    box-shadow: 0 0 0 2px var(--bs-gray-400) inset;
    border-color: transparent;
}

.app-button.variant-outline:disabled[b-cspsanywm9] {
    background: transparent;
    color: var(--bs-gray-500);
    border-color: var(--bs-gray-400);
    box-shadow: none;
}

/* ========== SPINNER ========== */
.app-button .spinner[b-cspsanywm9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-cspsanywm9 0.6s linear infinite;
}

.app-button.icon-only .spinner[b-cspsanywm9] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
}

@keyframes spin-b-cspsanywm9 {
    to {
        transform: rotate(360deg);
    }
}

/* ========== FOCUS STATE (KEYBOARD) ========== */
.app-button:focus-visible[b-cspsanywm9] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.app-button.variant-outline:focus-visible[b-cspsanywm9] {
    outline-color: var(--bs-primary);
}

.app-button.variant-link[b-cspsanywm9] {
    background: transparent;
    color: var(--bs-primary);
    border: none;
    box-shadow: none;
    padding-left: 4px;
    padding-right: 4px;
}

@media (hover: hover) {
    .app-button.variant-link:hover:not(:disabled)[b-cspsanywm9] {
        background: transparent;
        color: color-mix(in srgb, var(--bs-primary), black 15%);
        text-decoration: underline;
        transform: none;
        box-shadow: none;
    }
}

.app-button.variant-link:active:not(:disabled)[b-cspsanywm9] {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
}

.app-button.variant-link:disabled[b-cspsanywm9] {
    background: transparent;
    color: var(--bs-gray-500);
    text-decoration: none;
    opacity: 1;
}

.app-button.variant-link:disabled[b-cspsanywm9]  .app-icon {
    color: var(--bs-gray-500);
}

.app-button.variant-link:focus-visible[b-cspsanywm9] {
    outline-color: var(--bs-primary);
}
/* /Shared/Components/AppCard.razor.rz.scp.css */
.app-card[b-ixn9umcw5g] {
    background: var(--color-white);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ========== CLICKABLE CARDS ========== */
.app-card.clickable[b-ixn9umcw5g] {
    cursor: pointer;
    animation: slideInUp-b-ixn9umcw5g 0.3s ease-out;
}

@media (hover: hover) {
    .app-card.clickable:hover[b-ixn9umcw5g] {
        border-color: #d1d5db;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }
}

.app-card.clickable:active[b-ixn9umcw5g] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========== SELECTED STATE ========== */
.app-card.selected[b-ixn9umcw5g] {
    border-color: var(--bs-primary);
    background: linear-gradient(135deg, var(--color-white) 0%, #f0f7ff 100%);
    box-shadow: 0 0 0 2px var(--bs-primary), 0 4px 12px rgba(13, 110, 253, 0.15);
}

@media (hover: hover) {
    .app-card.selected:hover[b-ixn9umcw5g] {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 2px var(--bs-primary), 0 6px 16px rgba(13, 110, 253, 0.2);
        transform: translateY(-2px);
    }
}

/* ========== FOCUS STATE ========== */
.app-card:focus-visible[b-ixn9umcw5g] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========== CARD HEADER ========== */
.app-card-header[b-ixn9umcw5g] {
    padding: 20px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.app-card-title[b-ixn9umcw5g] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.app-card-header-content[b-ixn9umcw5g] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ========== CARD BODY ========== */
.app-card-body[b-ixn9umcw5g] {
    padding: 20px;
    flex: 1;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ========== CARD FOOTER ========== */
.app-card-footer[b-ixn9umcw5g] {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-bg-secondary);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-radius: 0 0 12px 12px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .app-card-header[b-ixn9umcw5g] {
        flex-direction: column;
    }

    .app-card-header-content[b-ixn9umcw5g] {
        width: 100%;
        justify-content: flex-start;
    }

    .app-card-body[b-ixn9umcw5g] {
        padding: 16px;
    }

    .app-card-footer[b-ixn9umcw5g] {
        padding: 12px 16px;
    }
}

/* ========== STATUS STATES ========== */
.app-card--approved[b-ixn9umcw5g] {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.1);
}

.app-card--rejected[b-ixn9umcw5g] {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.08);
    opacity: 0.85;
}

/* ========== ANIMATIONS ========== */
@keyframes slideInUp-b-ixn9umcw5g {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown-b-ixn9umcw5g {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn-b-ixn9umcw5g {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Shared/Components/AppCheckbox.razor.rz.scp.css */
.app-checkbox[b-jgnk4xjrfj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-checkbox-label[b-jgnk4xjrfj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #1e293b);
    user-select: none;
}

.app-checkbox.disabled .app-checkbox-label[b-jgnk4xjrfj] {
    cursor: not-allowed;
    opacity: 0.5;
}

.app-checkbox-label input[type="checkbox"][b-jgnk4xjrfj] {
    width: 18px;
    height: 18px;
    accent-color: var(--bs-primary);
    cursor: inherit;
    margin: 0;
    flex-shrink: 0;
}

.app-checkbox-text[b-jgnk4xjrfj] {
    font-size: 0.875rem;
    font-weight: 500;
}

.app-checkbox-required[b-jgnk4xjrfj] {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}

/* Switch variant */
.app-switch .app-switch-track[b-jgnk4xjrfj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    border-radius: 6px;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.2s ease;
    cursor: pointer;
}

.app-switch.disabled .app-switch-track[b-jgnk4xjrfj] {
    cursor: not-allowed;
}

.app-switch-track:has(.app-switch-input:checked)[b-jgnk4xjrfj] {
    background: var(--bs-primary);
}

.app-switch-input[b-jgnk4xjrfj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: inherit;
    z-index: 1;
}

.app-switch-thumb[b-jgnk4xjrfj] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.app-switch-track:has(.app-switch-input:checked) .app-switch-thumb[b-jgnk4xjrfj] {
    transform: translateX(20px);
}

.app-switch-track:has(.app-switch-input:focus-visible)[b-jgnk4xjrfj] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Shared/Components/AppChip.razor.rz.scp.css */
.app-chip[b-3h6ynkx2l9] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    padding: 0.375rem 0.75rem;
    border: 1.5px solid var(--bs-gray-400);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--bs-body-color);
    touch-action: manipulation;
}

.app-chip:hover:not(:disabled)[b-3h6ynkx2l9] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    color: var(--bs-primary);
}

.app-chip--selected[b-3h6ynkx2l9] {
    border-color: var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 10%, transparent);
    color: var(--bs-success);
}

.app-chip--selected.app-chip--dismissible:hover:not(:disabled)[b-3h6ynkx2l9] {
    border-color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 10%, transparent);
    color: var(--bs-danger);
}

.app-chip:disabled[b-3h6ynkx2l9] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/Components/AppComboBox.razor.rz.scp.css */
/* ========== Container ========== */
.app-combo[b-hpltfxlo6k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-combo.mb-0[b-hpltfxlo6k] {
    margin-bottom: 0;
}

.app-combo.is-disabled[b-hpltfxlo6k] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.combo-label[b-hpltfxlo6k] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.combo-required[b-hpltfxlo6k] {
    color: var(--bs-danger);
}

/* ========== Control (Trigger) ========== */
.combo-control[b-hpltfxlo6k] {
    position: relative;
    width: 100%;
}

.combo-loading-overlay[b-hpltfxlo6k] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.app-combo.is-loading .combo-trigger[b-hpltfxlo6k] {
    opacity: 0.6;
}

.combo-trigger[b-hpltfxlo6k] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: white;
    border: 1px solid #e0e2e7;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-clip: padding-box;
    box-sizing: border-box;
    text-align: left;
    will-change: box-shadow, border-color;
}

.combo-trigger:focus-visible[b-hpltfxlo6k],
.combo-trigger.is-open[b-hpltfxlo6k] {
    color: var(--bs-body-color);
    background-color: #ffffff;
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(238, 212, 132, 0.25);
}

.combo-trigger:disabled[b-hpltfxlo6k] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

.combo-value[b-hpltfxlo6k] {
    flex: 1;
    min-width: 0;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}

.combo-placeholder[b-hpltfxlo6k] {
    color: #6c757d;
}

/* Muted display when the null/not-applicable option is selected */
.combo-null-selected[b-hpltfxlo6k] {
    color: #6c757d;
    font-style: italic;
}

.combo-actions[b-hpltfxlo6k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.combo-clear[b-hpltfxlo6k] {
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.combo-clear:hover[b-hpltfxlo6k] {
    background: #f0f0f0;
    color: var(--bs-body-color);
}

.combo-clear:focus-visible[b-hpltfxlo6k],
.combo-chip-remove:focus-visible[b-hpltfxlo6k] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.combo-chevron[b-hpltfxlo6k] {
    display: flex;
    align-items: center;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.combo-trigger.is-open .combo-chevron[b-hpltfxlo6k] {
    transform: rotate(180deg);
}

/* ========== Error Message ========== */
.combo-error[b-hpltfxlo6k] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: -0.25rem;
}

.app-combo.has-error .combo-trigger[b-hpltfxlo6k] {
    border-color: var(--bs-danger);
    background: #fff8f9;
}

.app-combo.has-error .combo-trigger:focus-visible[b-hpltfxlo6k] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* ========== Multi-select chips ========== */
.combo-chips[b-hpltfxlo6k] {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 4px;
    padding: 2px 0;
    flex: 1;
    min-width: 0;
}

/* Shown only when chips overflow — rendered as a flex sibling of .combo-chips */
.combo-chips-ellipsis[b-hpltfxlo6k] {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    padding: 0 2px;
    letter-spacing: 0.05em;
}

/* Hidden off-screen container used only for measuring chip widths */
.combo-chips-measure[b-hpltfxlo6k] {
    position: fixed;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.combo-chip[b-hpltfxlo6k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bs-primary);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
}

.combo-chip-remove[b-hpltfxlo6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.combo-chip-remove:hover[b-hpltfxlo6k] {
    color: var(--bs-danger);
    background: rgba(220, 53, 69, 0.1);
}

/* ========== Multi-select checkmarks ========== */
.combo-item-multi[b-hpltfxlo6k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.combo-check[b-hpltfxlo6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #c8ccd4;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.combo-check-on[b-hpltfxlo6k] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Note: Portal panel styles are in wwwroot/css/combo-portal.css (global styles) */
/* /Shared/Components/AppDatePicker.razor.rz.scp.css */
/* ========== Container ========== */
.app-date-picker[b-h4fy3r8fxq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-date-picker.is-disabled[b-h4fy3r8fxq] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.dp-label[b-h4fy3r8fxq] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.dp-required[b-h4fy3r8fxq] {
    color: var(--bs-danger);
}

/* ========== Control wrapper ========== */
.date-control[b-h4fy3r8fxq] {
    position: relative;
    width: 100%;
}

/* ========== Trigger ========== */
.date-trigger[b-h4fy3r8fxq] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e0e2e7;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    color: var(--bs-body-color);
}

.date-trigger:hover:not(:disabled)[b-h4fy3r8fxq] {
    border-color: #c8ccd4;
}

.date-trigger:focus-visible[b-h4fy3r8fxq] {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.date-trigger.is-open[b-h4fy3r8fxq] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.date-trigger:disabled[b-h4fy3r8fxq] {
    background: #e9ecef;
    cursor: not-allowed;
}

.date-placeholder[b-h4fy3r8fxq] {
    color: #6c757d;
    flex: 1;
}

.date-value[b-h4fy3r8fxq] {
    color: var(--bs-body-color);
    flex: 1;
}

.date-trigger-icon[b-h4fy3r8fxq] {
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.date-trigger:hover .date-trigger-icon[b-h4fy3r8fxq] {
    color: var(--bs-body-color);
}

/* ========== Clear button ========== */
.date-clear-btn[b-h4fy3r8fxq] {
    position: absolute;
    right: 2.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    z-index: 1;
}

.date-clear-btn:hover[b-h4fy3r8fxq] {
    color: var(--bs-body-color);
    background: #f0f0f0;
}

/* ========== Inline calendar (inside a bottom sheet) ========== */
.date-picker-inline[b-h4fy3r8fxq] {
    border: 1px solid #e0e2e7;
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
    margin-top: 0.5rem;
    overflow: hidden;
}

/* ========== Calendar content inside bottom sheet ========== */
.date-picker-content[b-h4fy3r8fxq] {
    padding: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Desktop - minimal padding */
@media (min-width: 769px) {
    .date-picker-content[b-h4fy3r8fxq] {
        padding: 0.5rem;
        max-width: 360px;
    }
}

/* ========== Header ========== */
.date-panel-header[b-h4fy3r8fxq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
}

.date-panel-title[b-h4fy3r8fxq] {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-gray-900);
    white-space: nowrap;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    transition: all 0.15s ease;
}

.date-panel-title:hover[b-h4fy3r8fxq] {
    background: var(--bs-primary);
    color: var(--bs-gray-900);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.date-panel-title:active[b-h4fy3r8fxq] {
    transform: translateY(0);
}

.date-nav-btn[b-h4fy3r8fxq] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    min-width: 40px;
    min-height: 40px;
}

.date-nav-btn:hover[b-h4fy3r8fxq] {
    background: #f3f4f6;
    color: var(--bs-body-color);
}

.date-nav-btn:active[b-h4fy3r8fxq] {
    background: #e5e7eb;
}

/* ========== Day grid ========== */
.date-grid[b-h4fy3r8fxq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.date-day-name[b-h4fy3r8fxq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-align: center;
    padding: 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.date-cell[b-h4fy3r8fxq],
.date-cell-empty[b-h4fy3r8fxq] {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: all 0.15s ease;
    min-height: 44px;
}

.date-cell-empty[b-h4fy3r8fxq] {
    cursor: default;
    pointer-events: none;
}

.date-cell:hover[b-h4fy3r8fxq] {
    background: #f3f4f6;
    transform: scale(1.05);
}

.date-cell:active[b-h4fy3r8fxq] {
    transform: scale(0.95);
}

.date-cell.is-today[b-h4fy3r8fxq] {
    font-weight: 700;
    background: rgba(238, 212, 132, 0.25);
    color: var(--bs-body-color);
}

.date-cell.is-selected[b-h4fy3r8fxq] {
    background: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 700;
}

.date-cell.is-selected:hover[b-h4fy3r8fxq] {
    filter: brightness(0.94);
}

.date-cell.is-disabled[b-h4fy3r8fxq] {
    color: #69728c;
    background: #f9fafb;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}

.date-cell.is-disabled:hover[b-h4fy3r8fxq] {
    transform: none;
    background: #f9fafb;
}

/* ========== Month/Year picker grid ========== */
.date-picker-grid[b-h4fy3r8fxq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

.date-picker-cell[b-h4fy3r8fxq] {
    padding: 1rem 0.5rem;
    text-align: center;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-body-color);
    transition: all 0.15s ease;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-picker-cell:hover[b-h4fy3r8fxq] {
    background: #f3f4f6;
    border-color: var(--bs-primary);
}

.date-picker-cell.is-selected[b-h4fy3r8fxq] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 700;
}

.date-picker-cell.is-current[b-h4fy3r8fxq] {
    border-color: var(--bs-primary);
    font-weight: 600;
}

/* ========== Footer ========== */
.date-panel-footer[b-h4fy3r8fxq] {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0.5rem 0.5rem;
    display: flex;
    justify-content: center;
}

.date-today-btn[b-h4fy3r8fxq] {
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--bs-gray-900);
    padding: 0.625rem 1.5rem;
    border-radius: 10px;
    transition: all 0.15s ease;
    min-height: 44px;
    width: 100%;
}

.date-today-btn:hover[b-h4fy3r8fxq] {
    background: var(--bs-primary);
    color: var(--bs-gray-900);
    transform: translateY(-1px);
}

.date-today-btn:active[b-h4fy3r8fxq] {
    transform: translateY(0);
}

/* ========== Mobile optimizations ========== */
@media (max-width: 768px) {
    .date-picker-content[b-h4fy3r8fxq] {
        padding: 0.75rem 0;
    }

    .date-grid[b-h4fy3r8fxq] {
        gap: 4px;
        padding: 0 0.75rem;
    }

    .date-cell[b-h4fy3r8fxq] {
        min-height: 48px;
        font-size: 1rem;
    }

    .date-nav-btn[b-h4fy3r8fxq] {
        min-width: 44px;
        min-height: 44px;
    }

    .date-today-btn[b-h4fy3r8fxq] {
        min-height: 52px;
        font-size: 1rem;
    }

    .date-picker-grid[b-h4fy3r8fxq] {
        gap: 12px;
        padding: 0 0.75rem;
    }

    .date-picker-cell[b-h4fy3r8fxq] {
        min-height: 56px;
        font-size: 1rem;
    }
}

/* ========== Touch device improvements ========== */
@media (hover: none) and (pointer: coarse) {
    .date-nav-btn[b-h4fy3r8fxq] {
        min-width: 44px;
        min-height: 44px;
    }

    .date-cell[b-h4fy3r8fxq] {
        min-height: 48px;
    }

    .date-today-btn[b-h4fy3r8fxq] {
        min-height: 52px;
    }

    .date-picker-cell[b-h4fy3r8fxq] {
        min-height: 56px;
    }
}

/* ========== Time picker ========== */
.time-section[b-h4fy3r8fxq] {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0.5rem 0.75rem;
}

.time-toggle-label[b-h4fy3r8fxq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0;
    user-select: none;
}

.time-toggle-checkbox[b-h4fy3r8fxq] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bs-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.time-toggle-text[b-h4fy3r8fxq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.time-picker-panel[b-h4fy3r8fxq] {
    margin-top: 1rem;
}

.time-columns[b-h4fy3r8fxq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.time-column[b-h4fy3r8fxq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.time-input[b-h4fy3r8fxq] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-body-color);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 6px;
    width: 72px;
    height: 64px;
    text-align: center;
    letter-spacing: 0.05em;
    outline: none;
    padding: 0;
    font-family: inherit;
    /* hide native spin arrows */
    -moz-appearance: textfield;
}

.time-input[b-h4fy3r8fxq]::-webkit-inner-spin-button,
.time-input[b-h4fy3r8fxq]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-input:focus[b-h4fy3r8fxq] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.time-spin-btn[b-h4fy3r8fxq] {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.time-spin-btn:hover[b-h4fy3r8fxq] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.time-spin-btn:active[b-h4fy3r8fxq] {
    background: var(--bs-primary);
    color: var(--bs-body-color);
}

.time-colon[b-h4fy3r8fxq] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-body-color);
    padding-bottom: 1.5rem;
    line-height: 1;
}

.time-column-label[b-h4fy3r8fxq] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

/* AM/PM column — vertically aligned with the number inputs */
.time-ampm-col[b-h4fy3r8fxq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding-top: calc(36px + 0.25rem);
}

.time-ampm-btn[b-h4fy3r8fxq] {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    width: 56px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
}

.time-ampm-btn.is-am[b-h4fy3r8fxq] {
    color: #6c757d;
}

.time-ampm-btn.is-am:hover[b-h4fy3r8fxq] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.time-ampm-btn.is-pm[b-h4fy3r8fxq] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.time-ampm-btn.is-pm:hover[b-h4fy3r8fxq] {
    filter: brightness(0.94);
}

/* ========== Footer row (Today + Confirm) ========== */
.date-footer-row[b-h4fy3r8fxq] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.date-footer-row .date-today-btn[b-h4fy3r8fxq] {
    flex: 1;
}

.date-confirm-btn[b-h4fy3r8fxq] {
    flex: 1;
    background: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--bs-body-color);
    padding: 0.625rem 1.5rem;
    border-radius: 10px;
    transition: all 0.15s ease;
    min-height: 44px;
}

.date-confirm-btn:hover[b-h4fy3r8fxq] {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.date-confirm-btn:active[b-h4fy3r8fxq] {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .time-input[b-h4fy3r8fxq] {
        width: 80px;
        height: 72px;
        font-size: 2.25rem;
    }

    .time-ampm-btn[b-h4fy3r8fxq] {
        width: 60px;
        height: 72px;
    }

    .time-ampm-col[b-h4fy3r8fxq] {
        padding-top: calc(40px + 0.25rem);
    }

    .time-spin-btn[b-h4fy3r8fxq] {
        width: 44px;
        height: 40px;
    }

    .date-confirm-btn[b-h4fy3r8fxq] {
        min-height: 52px;
        font-size: 1rem;
    }
}
/* /Shared/Components/AppFileUploader.razor.rz.scp.css */
/* ========== Container ========== */
.app-file-uploader[b-dhzhp96ocx] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-file-uploader.is-disabled[b-dhzhp96ocx] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.afu-label[b-dhzhp96ocx] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.afu-required[b-dhzhp96ocx] {
    color: var(--bs-danger);
}

.afu-hint[b-dhzhp96ocx] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* ========== Empty state ========== */
.afu-empty[b-dhzhp96ocx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 100px;
    border: 2px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
    color: #687482;
    font-size: 0.875rem;
}

/* ========== File list ========== */
.afu-file-list[b-dhzhp96ocx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.afu-file-item[b-dhzhp96ocx] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.afu-file-icon[b-dhzhp96ocx] {
    color: #68707d;
    flex-shrink: 0;
}

.afu-file-info[b-dhzhp96ocx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.afu-file-name[b-dhzhp96ocx] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afu-file-size[b-dhzhp96ocx] {
    font-size: 0.75rem;
    color: #6c757d;
}

.afu-remove-btn[b-dhzhp96ocx] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: #9ca3af;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.afu-remove-btn:hover[b-dhzhp96ocx] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

/* ========== Upload progress ========== */
.afu-uploading[b-dhzhp96ocx] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}

.afu-uploading-name[b-dhzhp96ocx] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #1d4ed8;
}

.afu-uploading-filename[b-dhzhp96ocx] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afu-upload-pct[b-dhzhp96ocx] {
    font-size: 0.75rem;
    color: #1d4ed8;
    text-align: right;
}

/* ========== Error ========== */
.afu-error[b-dhzhp96ocx] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    padding: 0.5rem 0.75rem;
    background: rgba(220, 53, 69, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ========== Footer ========== */
.afu-footer[b-dhzhp96ocx] {
    display: flex;
    justify-content: flex-start;
}

/* ========== Drag-over state ========== */
.app-file-uploader.afu-drag-over[b-dhzhp96ocx] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 3px;
    border-radius: 14px;
}

.app-file-uploader.afu-drag-over .afu-empty[b-dhzhp96ocx] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
    color: var(--bs-primary);
}
/* /Shared/Components/AppIcon.razor.rz.scp.css */
.app-icon[b-adwxxlao47] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
    flex-grow: 0;
}

.app-icon.sm[b-adwxxlao47] {
    font-size: 14px;
}

.app-icon.md[b-adwxxlao47] {
    font-size: 16px;
}

.app-icon.lg[b-adwxxlao47] {
    font-size: 20px;
}
/* /Shared/Components/AppInput.razor.rz.scp.css */
.app-input[b-id5znck8z0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-input.mb-0[b-id5znck8z0] {
    margin-bottom: 0;
}

/* ========== LABEL ========== */
.app-form-header[b-id5znck8z0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-form-label[b-id5znck8z0] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.app-form-label-required[b-id5znck8z0] {
    color: var(--bs-danger);
}

/* ========== INPUT FIELD CONTAINER ========== */
.app-form-input-field[b-id5znck8z0] {
    position: relative;
    display: flex;
    align-items: center;
}

/* ========== INPUT CONTROL ========== */
.app-form-control[b-id5znck8z0] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    padding-left: 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-clip: padding-box;
    border: 1px solid #e0e2e7;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    font-family: inherit;
}

.app-form-control[b-id5znck8z0]::placeholder {
    color: #6c757d;
    opacity: 1;
}

.app-form-control:focus[b-id5znck8z0] {
    color: var(--bs-body-color);
    background-color: #ffffff;
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(238, 212, 132, 0.25);
}

.app-form-control:disabled[b-id5znck8z0] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* ========== PREFIX/SUFFIX ========== */
.app-form-control.has-prefix[b-id5znck8z0] {
    padding-left: 2.75rem;
}

.app-form-control.has-suffix[b-id5znck8z0] {
    padding-right: 2.75rem;
}

.app-form-prefix[b-id5znck8z0],
.app-form-suffix[b-id5znck8z0] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #6c757d;
    pointer-events: none;
}

.app-form-prefix[b-id5znck8z0] {
    left: 0.75rem;
}

.app-form-suffix[b-id5znck8z0] {
    right: 0.75rem;
}

/* ========== CLEAR BUTTON ========== */
.app-form-clear-button[b-id5znck8z0] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #6c757d;
    font-size: 1.125rem;
    transition: color 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    text-transform: capitalize;
}

.app-form-clear-button:hover[b-id5znck8z0] {
    color: var(--bs-body-color);
}

.app-form-clear-button:focus[b-id5znck8z0] {
    outline: none;
}

/* ========== VALIDATION STATES ========== */
.app-input.state-error .app-form-control[b-id5znck8z0] {
    border-color: var(--bs-danger);
    background-color: #fff8f9;
}

.app-input.state-error .app-form-control:focus[b-id5znck8z0] {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    background-color: #ffffff;
}

.app-input.state-success .app-form-control[b-id5znck8z0] {
    border-color: var(--bs-success);
    background-color: #f8fdf7;
}

.app-input.state-success .app-form-control:focus[b-id5znck8z0] {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    background-color: #ffffff;
}

.app-input.state-warning .app-form-control[b-id5znck8z0] {
    border-color: var(--bs-warning);
    background-color: #fffdf8;
}

.app-input.state-warning .app-form-control:focus[b-id5znck8z0] {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    background-color: #ffffff;
}

/* ========== FEEDBACK MESSAGES ========== */
.app-form-error-message[b-id5znck8z0] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: 0.25rem;
}

.app-form-success-message[b-id5znck8z0] {
    font-size: 0.8125rem;
    color: var(--bs-success);
    margin-top: 0.25rem;
}

.app-form-warning-message[b-id5znck8z0] {
    font-size: 0.8125rem;
    color: var(--bs-warning);
    margin-top: 0.25rem;
}

.app-form-hint[b-id5znck8z0] {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* ========== CHARACTER COUNTER ========== */
.app-form-counter[b-id5znck8z0] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: right;
}

.app-form-counter.near-limit[b-id5znck8z0] {
    color: var(--bs-warning);
}

.app-form-counter.at-limit[b-id5znck8z0] {
    color: var(--bs-danger);
}

/* ========== DISABLED STATE ========== */
.app-input.disabled[b-id5znck8z0] {
    opacity: 0.65;
    pointer-events: none;
}

/* ========== LOADING STATE ========== */
.app-input.loading .app-form-control[b-id5znck8z0] {
    background-color: #e9ecef;
    cursor: wait;
    color: transparent;
    caret-color: transparent;
}

.app-input.loading .app-form-control[b-id5znck8z0]::placeholder {
    color: transparent;
}
/* /Shared/Components/AppNotificationVariablePanel.razor.rz.scp.css */
.notif-var-panel[b-4y2cizgwwk] {
    background: var(--app-surface-alt, #f8f9fa);
    border: 1px solid var(--app-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.6rem 0.75rem 0.65rem;
}

.notif-var-panel-header[b-4y2cizgwwk] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text-muted, #6c757d);
}

.notif-var-hint[b-4y2cizgwwk] {
    font-weight: 400;
    font-style: italic;
    margin-left: 0.15rem;
}

.notif-var-groups[b-4y2cizgwwk] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.notif-var-group[b-4y2cizgwwk] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.notif-var-group-label[b-4y2cizgwwk] {
    flex: 0 0 3.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted, #6c757d);
    padding-top: 0.25rem;
    text-align: right;
}

.notif-var-chips[b-4y2cizgwwk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
}

.notif-var-chip[b-4y2cizgwwk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: #3730a3;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    white-space: nowrap;
    line-height: 1.4;
}

.notif-var-chip:hover[b-4y2cizgwwk] {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.notif-var-chip--copied[b-4y2cizgwwk] {
    background: var(--bs-success-bg-subtle, #d1e7dd) !important;
    border-color: var(--bs-success-border-subtle, #a3cfbb) !important;
    color: var(--bs-success-text-emphasis, #0a3622) !important;
}

/* Answer row: combobox + chip side by side */
.notif-var-answer-row[b-4y2cizgwwk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}

.notif-var-answer-row[b-4y2cizgwwk]  .app-combobox {
    flex: 1 1 200px;
    min-width: 0;
}
/* /Shared/Components/AppPagination.razor.rz.scp.css */
.app-pagination[b-hn86y1vm1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    gap: 12px;
}

.app-pagination-nav[b-hn86y1vm1z] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-pagination-button[b-hn86y1vm1z] {
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 6px;
    color: #171616;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.app-pagination-button:hover:not(:disabled)[b-hn86y1vm1z] {
    opacity: 1;
    background-color: color-mix(in srgb, var(--bs-secondary) 20%, transparent);
}

.app-pagination-button:focus-visible[b-hn86y1vm1z] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.app-pagination-button:disabled[b-hn86y1vm1z] {
    opacity: 0.3;
    cursor: not-allowed;
}

.app-pagination-page-indicator[b-hn86y1vm1z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: #171616;
    min-width: 60px;
    justify-content: center;
}

.app-pagination-summary[b-hn86y1vm1z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.app-pagination-num[b-hn86y1vm1z] {
    font-weight: var(--font-weight-semi-bold);
    color: var(--bs-body-color);
}

.app-pagination-sep[b-hn86y1vm1z] {
    font-weight: 400;
}

@media (max-width: 640px) {
    .app-pagination-button[b-hn86y1vm1z] {
        padding: 6px 10px;
        font-size: 16px;
    }
}
/* /Shared/Components/AppPicturePicker.razor.rz.scp.css */
/* ========== Container ========== */
.app-picture-picker[b-2uhpavw0tk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.app-picture-picker.is-disabled[b-2uhpavw0tk] { }

/* ========== Label ========== */
.pp-label[b-2uhpavw0tk] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.pp-required[b-2uhpavw0tk] {
    color: var(--bs-danger);
}

/* ========== Horizontal picture strip ========== */
.pp-strip[b-2uhpavw0tk] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none;
    padding-bottom: 0.25rem;
    overscroll-behavior-x: contain;
    /* hide scrollbar on webkit while keeping scroll */
    scrollbar-width: none;
}

.pp-strip[b-2uhpavw0tk]::-webkit-scrollbar {
    display: none;
}

/* Desktop: wrap to next row instead of horizontal scroll */
@media (min-width: 768px) {
    .app-picture-picker[b-2uhpavw0tk] {
        overflow: visible;
    }

    .pp-strip[b-2uhpavw0tk] {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* ========== Individual picture thumbnail ========== */
.pp-thumb[b-2uhpavw0tk] {
    flex: 0 0 125px;
    position: relative;
    width: 125px;
    height: 125px;
    border-radius: 12px;
    overflow: hidden;
    background: #1c1c1e;
    scroll-snap-align: none;
}

.pp-thumb--add[b-2uhpavw0tk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    color: #687482;
    font-size: 0.6875rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.pp-thumb--add:hover[b-2uhpavw0tk] {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.pp-thumb--add:active[b-2uhpavw0tk] {
    background: #e5e7eb;
}

.pp-thumb--loading[b-2uhpavw0tk] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
}

.pp-image-btn[b-2uhpavw0tk] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.pp-image[b-2uhpavw0tk] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pp-remove-btn[b-2uhpavw0tk] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pp-remove-btn:hover[b-2uhpavw0tk] {
    background: rgba(220, 53, 69, 0.85);
}

/* ========== Empty state ========== */
.pp-empty[b-2uhpavw0tk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    background: #f9fafb;
    color: #687482;
    font-size: 0.875rem;
}

.pp-counter[b-2uhpavw0tk] {
    display: none;
    font-size: 0.8125rem;
    color: #6c757d;
    font-weight: 500;
}

@media (min-width: 768px) {
    .pp-counter[b-2uhpavw0tk] {
        display: block;
    }
}

/* ========== Error ========== */
.pp-error[b-2uhpavw0tk] {
    font-size: 0.8125rem;
    color: #6c757d;
}

.pp-error-validation[b-2uhpavw0tk] {
    color: var(--bs-danger);
    font-weight: 500;
}

/* ====================================================================== */
/*  ACTION OPTIONS (inside bottom sheet)                                  */
/* ====================================================================== */
.pp-action-options[b-2uhpavw0tk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-action-option[b-2uhpavw0tk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.pp-action-option:hover[b-2uhpavw0tk] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.pp-action-option:active[b-2uhpavw0tk] {
    background: #eef0f3;
}

.pp-action-icon[b-2uhpavw0tk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: rgba(238, 212, 132, 0.2);
    color: var(--bs-body-color);
    flex-shrink: 0;
}

.pp-action-text[b-2uhpavw0tk] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pp-action-text strong[b-2uhpavw0tk] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.pp-action-text small[b-2uhpavw0tk] {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* ====================================================================== */
/*  CAMERA OVERLAY                                                         */
/* ====================================================================== */
.pp-camera-overlay[b-2uhpavw0tk] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #000000;
    animation: pp-camera-enter-b-2uhpavw0tk 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-camera-loading[b-2uhpavw0tk] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.pp-camera-loading .app-spinner[b-2uhpavw0tk] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-2uhpavw0tk 0.8s linear infinite;
}

.pp-camera-stage[b-2uhpavw0tk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Shrink-wraps to the letterboxed video bounds so the viewfinder aligns with capture area. */
.pp-camera-frame[b-2uhpavw0tk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Fill available stage space; object-fit: contain letterboxes to native camera aspect ratio. */
.pp-camera-video[b-2uhpavw0tk] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.pp-hidden[b-2uhpavw0tk] {
    visibility: hidden;
}

/* ── Viewfinder — position/size set by JS inside the letterboxed preview ── */
.pp-camera-viewfinder[b-2uhpavw0tk] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;

    --vc: rgba(255, 255, 255, 0.85);
    --vt: 2px;
    --vl: 28px;

    background:
        /* top-left corner */
        linear-gradient(to right,  var(--vc) var(--vl), transparent 0) top    left  / var(--vl) var(--vt) no-repeat,
        linear-gradient(to bottom, var(--vc) var(--vl), transparent 0) top    left  / var(--vt) var(--vl) no-repeat,
        /* top-right corner */
        linear-gradient(to left,   var(--vc) var(--vl), transparent 0) top    right / var(--vl) var(--vt) no-repeat,
        linear-gradient(to bottom, var(--vc) var(--vl), transparent 0) top    right / var(--vt) var(--vl) no-repeat,
        /* bottom-left corner */
        linear-gradient(to right,  var(--vc) var(--vl), transparent 0) bottom left  / var(--vl) var(--vt) no-repeat,
        linear-gradient(to top,    var(--vc) var(--vl), transparent 0) bottom left  / var(--vt) var(--vl) no-repeat,
        /* bottom-right corner */
        linear-gradient(to left,   var(--vc) var(--vl), transparent 0) bottom right / var(--vl) var(--vt) no-repeat,
        linear-gradient(to top,    var(--vc) var(--vl), transparent 0) bottom right / var(--vt) var(--vl) no-repeat;
}

.pp-camera-controls[b-2uhpavw0tk] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2.5rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

.pp-camera-controls > *[b-2uhpavw0tk] {
    pointer-events: auto;
}

.pp-camera-cancel[b-2uhpavw0tk] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pp-camera-cancel:hover[b-2uhpavw0tk] {
    background: rgba(255, 255, 255, 0.3);
}

/* Flash / torch toggle (occupies the right slot of the controls row) */
.pp-camera-flash[b-2uhpavw0tk] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s, color 0.15s;
}

.pp-camera-flash:hover[b-2uhpavw0tk] {
    background: rgba(255, 255, 255, 0.3);
}

.pp-camera-flash.is-on[b-2uhpavw0tk] {
    background: #ffd60a;
    color: #1c1c1e;
}

.pp-camera-flash:disabled[b-2uhpavw0tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Shutter button — double-ring camera-style */
.pp-shutter-btn[b-2uhpavw0tk] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.pp-shutter-btn:active:not(:disabled)[b-2uhpavw0tk] {
    transform: scale(0.92);
}

.pp-shutter-btn:disabled[b-2uhpavw0tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pp-shutter-ring[b-2uhpavw0tk] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fafafa;
    border: 3px solid rgba(0, 0, 0, 0.08);
}

.pp-camera-spacer[b-2uhpavw0tk] {
    width: 44px;
    height: 44px;
}

/* ====================================================================== */
/*  PREVIEW OVERLAY                                                        */
/* ====================================================================== */
.pp-preview-overlay[b-2uhpavw0tk] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: pp-camera-enter-b-2uhpavw0tk 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-preview-image[b-2uhpavw0tk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pp-preview-controls[b-2uhpavw0tk] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

/* AppButton overrides inside the dark preview controls */
.pp-preview-controls .app-button[b-2uhpavw0tk] {
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 14px;
    padding: 0.75rem 1.5rem;
    gap: 8px;
}

/* ====================================================================== */
/*  LIGHTBOX OVERLAY                                                       */
/* ====================================================================== */
.pp-lightbox-overlay[b-2uhpavw0tk] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pp-camera-enter-b-2uhpavw0tk 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: zoom-out;
}

.pp-lightbox-image[b-2uhpavw0tk] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
    user-select: none;
    -webkit-user-drag: none;
}

.pp-lightbox-close[b-2uhpavw0tk] {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top, 0px));
    right: 1rem;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pp-lightbox-close:hover[b-2uhpavw0tk] {
    background: rgba(255, 255, 255, 0.28);
}

.pp-lightbox-nav[b-2uhpavw0tk] {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 1;
}

.pp-lightbox-nav-btn[b-2uhpavw0tk] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pp-lightbox-nav-btn:hover:not(:disabled)[b-2uhpavw0tk] {
    background: rgba(255, 255, 255, 0.28);
}

.pp-lightbox-nav-btn:disabled[b-2uhpavw0tk] {
    opacity: 0.3;
    cursor: default;
}

.pp-lightbox-counter[b-2uhpavw0tk] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    min-width: 4rem;
    text-align: center;
}

/* ====================================================================== */
/*  ANIMATIONS                                                             */
/* ====================================================================== */
@keyframes pp-camera-enter-b-2uhpavw0tk {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin-b-2uhpavw0tk {
    to { transform: rotate(360deg); }
}
/* /Shared/Components/AppPopup.razor.rz.scp.css */
.popup-backdrop[b-tpd7108lby] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: popup-fade-in-b-tpd7108lby 120ms ease-out;
    touch-action: none;
    overscroll-behavior: none;
}

.popup-backdrop.closeable[b-tpd7108lby] {
    cursor: pointer;
}

.popup-card[b-tpd7108lby] {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
    animation: popup-scale-in-b-tpd7108lby 140ms ease-out;
    position: relative;
}

/* ========== SIZE VARIANTS ========== */
.popup-card.popup-small[b-tpd7108lby] {
    max-width: 320px;
    padding: 1.5rem;
    border-radius: 16px;
}

.popup-card.popup-large[b-tpd7108lby] {
    max-width: 720px;
    padding: 2.5rem;
    border-radius: 24px;
}

/* ========== STYLE VARIANTS ========== */
.popup-card.success[b-tpd7108lby] {
    border-top: 4px solid var(--bs-success);
}

.popup-card.error[b-tpd7108lby] {
    border-top: 4px solid var(--bs-danger);
}

.popup-card.warning[b-tpd7108lby] {
    border-top: 4px solid var(--bs-warning);
}

/* ========== CLOSE BUTTON ========== */
.popup-close[b-tpd7108lby] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
}

.popup-close:hover[b-tpd7108lby] {
    color: var(--bs-body-color);
}

.popup-close:focus[b-tpd7108lby] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========== TITLE ========== */
.popup-title[b-tpd7108lby] {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--bs-body-color);
}

/* ========== CONTENT ========== */
.popup-content[b-tpd7108lby] {
    font-size: 0.95rem;
    color: var(--bs-gray-900);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ========== ACTIONS ========== */
.popup-actions[b-tpd7108lby] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.popup-button[b-tpd7108lby] {
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 3rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    text-transform: capitalize;
}

.popup-button.confirm[b-tpd7108lby] {
    background-color: var(--bs-primary);
    color: #212529;
}

.popup-button.confirm:hover[b-tpd7108lby] {
    background-color: color-mix(in srgb, var(--bs-primary), black 8%);
}

.popup-button.confirm:focus-visible[b-tpd7108lby] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.popup-button.cancel[b-tpd7108lby] {
    background-color: #e9ecef;
    color: var(--bs-body-color);
}

.popup-button.cancel:hover[b-tpd7108lby] {
    background-color: #dde0e3;
}

.popup-button.cancel:focus-visible[b-tpd7108lby] {
    outline: 2px solid #dde0e3;
    outline-offset: 2px;
}

.popup-button:disabled[b-tpd7108lby] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========== ANIMATIONS ========== */
@keyframes popup-fade-in-b-tpd7108lby {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popup-scale-in-b-tpd7108lby {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    .popup-card[b-tpd7108lby] {
        max-width: calc(100% - 2rem);
        width: 100%;
    }

    .popup-card.popup-small[b-tpd7108lby] {
        max-width: calc(100% - 2rem);
    }

    .popup-card.popup-large[b-tpd7108lby] {
        max-width: calc(100% - 2rem);
    }
}
/* /Shared/Components/AppProgressBar.razor.rz.scp.css */
.app-progress-bar-container[b-uqwrnbgt0p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.app-progress-label[b-uqwrnbgt0p] {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
}

.progress[b-uqwrnbgt0p] {
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-uqwrnbgt0p] {
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.progress-bar.bg-primary[b-uqwrnbgt0p] {
    background-color: var(--bs-primary);
}

.progress-bar.bg-success[b-uqwrnbgt0p] {
    background-color: var(--bs-success);
}

.progress-bar.bg-warning[b-uqwrnbgt0p] {
    background-color: var(--bs-warning);
}

.progress-bar.bg-danger[b-uqwrnbgt0p] {
    background-color: var(--bs-danger);
}

.progress-bar.bg-info[b-uqwrnbgt0p] {
    background-color: var(--bs-info);
}

.progress-bar.progress-bar-striped[b-uqwrnbgt0p] {
    background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent );
    background-size: 1rem 1rem;
}

.progress-bar.progress-bar-animated[b-uqwrnbgt0p] {
    animation: progress-bar-stripes-b-uqwrnbgt0p 1s linear infinite;
}

@keyframes progress-bar-stripes-b-uqwrnbgt0p {
    0% {
        background-position: 1rem 0;
    }

    100% {
        background-position: 0 0;
    }
}
/* /Shared/Components/AppRadioButtonGroup.razor.rz.scp.css */
.app-radio-group[b-9idtc6phsz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.app-radio-item[b-9idtc6phsz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.app-radio-input[b-9idtc6phsz] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    background-color: var(--surface, #fff);
    flex-shrink: 0;
    cursor: inherit;
    position: relative;
}

.app-radio-input:checked[b-9idtc6phsz] {
    border-color: var(--bs-primary);
    background-color: var(--surface, #fff);
}

.app-radio-input:checked[b-9idtc6phsz]::after {
    content: "";
    position: absolute;
    inset: 0.1875rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.app-radio-label[b-9idtc6phsz] {
    font-size: 0.875rem;
    line-height: 1.35;
    word-break: break-word;
}

.app-radio-input:focus-visible[b-9idtc6phsz] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.app-radio-item.disabled[b-9idtc6phsz] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Shared/Components/AppResourceSelector.razor.rz.scp.css */
.rs-container[b-5ljlcxbtei] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rs-type-group[b-5ljlcxbtei] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: none;
    border-radius: 0.5rem;
}

.rs-assigned-note[b-5ljlcxbtei] {
    font-size: 0.75rem;
    color: var(--bs-gray-600);
}

.rs-actions[b-5ljlcxbtei] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
/* /Shared/Components/AppSignaturePad.razor.rz.scp.css */
/* ========== Container ========== */
.app-signature-pad[b-05bslyxpfl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-signature-pad.is-disabled[b-05bslyxpfl] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.sp-label[b-05bslyxpfl] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.sp-required[b-05bslyxpfl] {
    color: var(--bs-danger);
}

/* ========== Empty state ========== */
.sp-empty[b-05bslyxpfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    background: #f9fafb;
    color: #687482;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.sp-empty:hover[b-05bslyxpfl] {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.sp-empty:active[b-05bslyxpfl] {
    background: #e5e7eb;
}

/* ========== Preview (saved signature) ========== */
.sp-preview[b-05bslyxpfl] {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    padding: 0.75rem;
}

.sp-preview-image[b-05bslyxpfl] {
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

/* ========== Form action buttons (edit/remove) ========== */
.sp-actions[b-05bslyxpfl] {
    display: flex;
    gap: 0.5rem;
}

.sp-action-remove[b-05bslyxpfl] {
    color: var(--bs-danger, #dc3545);
    border-color: rgba(220, 53, 69, 0.4);
}

.sp-action-remove:hover[b-05bslyxpfl] {
    background: rgba(220, 53, 69, 0.08);
    border-color: var(--bs-danger, #dc3545);
    color: var(--bs-danger, #dc3545);
}

/* ========== Canvas container inside bottom sheet ========== */
.sp-canvas-container[b-05bslyxpfl] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
    position: relative;
}

.sp-canvas[b-05bslyxpfl] {
    width: 100%;
    height: 360px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    cursor: crosshair;
    touch-action: none;
}

.sp-canvas-hint[b-05bslyxpfl] {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ========== Loading overlay (positioned on top of the canvas) ========== */
.sp-canvas-loading[b-05bslyxpfl] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: 6px;
    background: #f9fafb;
    color: #687482;
    font-size: 0.8125rem;
    z-index: 1;
}

/* /Shared/Components/AppSkeleton.razor.rz.scp.css */
/* ========== APP SKELETON ========== */
/* Reusable shimmer placeholder block for skeleton loading states.
   The shimmer uses transform: translateX() on a ::after pseudo-element so the
   animation runs on the browser compositor thread and is never blocked by
   WASM / JS work on the main thread. */

.app-skeleton[b-u3ue0sbigc] {
    display: block;
    background: #ebebeb;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.app-skeleton[b-u3ue0sbigc]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    will-change: transform;
    animation: app-skeleton-shimmer-b-u3ue0sbigc 1.6s ease-in-out infinite;
}

/* NOTE: @keyframes are not scoped by Blazor CSS isolation — intentionally global */
@keyframes app-skeleton-shimmer-b-u3ue0sbigc {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* /Shared/Components/AppTable.razor.rz.scp.css */
/* ========== APP TABLE ========== */

/* ── Top panel ─────────────────────────────────────────────────── */
.app-table-top-panel[b-r6q02diil8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.app-table-title[b-r6q02diil8] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.app-table-top-panel-toolbar[b-r6q02diil8] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
}

.app-table-top-panel-filters[b-r6q02diil8] {
    flex: 1;
    min-width: 0;
}

.app-table-top-panel-actions[b-r6q02diil8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .app-table-top-panel-toolbar[b-r6q02diil8] {
        align-items: center;
    }

    .app-table-top-panel-actions[b-r6q02diil8] {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}

/* ── Container ─────────────────────────────────────────────────── */
.app-table-container[b-r6q02diil8] {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--bs-gray-300);
    background-color: var(--bs-white);
    box-shadow: 0px 2px 8px 0 rgba(var(--bs-black-rgb), 0.08);
}

.app-table-scroll[b-r6q02diil8] {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px;
}

/* Fixed layout is the default: every declared column Width is an exact outer width (border-box, so
   the cell's 36px of horizontal padding is included) and columns never grow to fit their content.
   Any px Width must therefore budget for that padding - see .app-table-command-cell below. */
.app-table[b-r6q02diil8] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.55;
    table-layout: fixed;
}

/* Opt-out for matrix tables with a data-driven column count or colspan/rowspan headers, where the
   fixed algorithm cannot derive a sensible grid. Sizes to content and scrolls instead of shredding. */
.app-table--auto-layout[b-r6q02diil8] {
    width: auto;
    min-width: 100%;
    table-layout: auto;
}

.app-table--auto-layout .app-table-header-cell[b-r6q02diil8],
.app-table--auto-layout .app-table-head[b-r6q02diil8]  th {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* ========== TABLE HEAD ========== */
.app-table-head[b-r6q02diil8] {
    background-color: var(--bs-white);
    border-bottom: 2px solid var(--bs-primary);
}

.app-table-header-cell[b-r6q02diil8] {
    padding: 10px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--bs-body-color);
    user-select: none;
    vertical-align: middle;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-table-header-content[b-r6q02diil8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sort-button[b-r6q02diil8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-gray-600);
    flex-shrink: 0;
    text-transform: capitalize;
}

.sort-button:hover[b-r6q02diil8] {
    opacity: 0.7;
}

.sort-button.active[b-r6q02diil8] {
    color: var(--bs-black);
}

/* ========== TABLE BODY ========== */
.app-table-body[b-r6q02diil8] {
    background-color: var(--bs-white);
}

.app-table-row[b-r6q02diil8] {
    border-bottom: 1px solid var(--bs-gray-300);
    transition: background-color 0.15s ease-in-out;
}

.app-table-row:hover[b-r6q02diil8] {
    background-color: var(--bs-gray-100);
}

.app-table-row:last-child[b-r6q02diil8] {
    border-bottom: none;
}

.app-table-cell[b-r6q02diil8] {
    padding: 10px 18px;
    color: var(--bs-body-color);
    vertical-align: middle;
    word-break: break-word;
}

/* ========== TEMPLATE SUPPORT (HeaderTemplate / RowTemplate) ========== */
/* Elements rendered via custom templates are owned by the parent component and
   don't carry AppTable's CSS scope attribute. Use ::deep so the Blazor build tool
   emits .app-table-head[b-xxxx] th instead of requiring the scope attribute on th. */

.app-table-head[b-r6q02diil8]  th {
    padding: 10px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--bs-body-color);
    user-select: none;
    vertical-align: middle;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-table-head[b-r6q02diil8]  th.app-table-command-header {
    text-align: center;
}

.app-table-body[b-r6q02diil8]  tr {
    border-bottom: 1px solid var(--bs-gray-300);
    transition: background-color 0.15s ease-in-out;
}

.app-table-body[b-r6q02diil8]  tr:hover {
    background-color: var(--bs-gray-100);
}

.app-table-body[b-r6q02diil8]  tr:last-child {
    border-bottom: none;
}

.app-table-body[b-r6q02diil8]  td {
    padding: 10px 18px;
    color: var(--bs-body-color);
    vertical-align: middle;
    word-break: break-word;
}

/* ========== OPTIONAL: COLUMN-FILTER ROW & SELECTABLE ROWS ========== */
/* Opt-in helpers any table can use from its HeaderTemplate/RowTemplate:
   - a compact column-header row (app-table-col-header)
   - a second thead row of per-column filter inputs (app-table-filter-row / -cell)
   - clickable rows with a selected state (app-table-row-selectable / -selected).
   Styled via ::deep so template content (owned by the consumer) is reached. */

.app-table-head[b-r6q02diil8]  .app-table-filter-cell {
    padding-top: 0;
}

.app-table-head[b-r6q02diil8]  .app-table-filter-cell .app-input {
    padding-top: 0;
    margin-bottom: 0;
}

.app-table-body[b-r6q02diil8]  tr.app-table-row-selectable {
    cursor: pointer;
}

.app-table-body[b-r6q02diil8]  tr.app-table-row-selected,
.app-table-body[b-r6q02diil8]  tr.app-table-row-selected:hover {
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent) !important;
    outline: 1.5px solid var(--bs-primary);
    outline-offset: -1.5px;
}

/* ========== TABLE COMMANDS ========== */
/* Fixed-width, centered actions column. Note: the cell must remain a real table-cell (no display:flex
   on the th/td) or the table stops distributing its width to the other columns.
   Do not declare a Width on a command column - this rule owns it. min-width is the floor two 32px
   buttons plus their 8px gap need once the cell's 36px of padding is accounted for. */
.app-table-command-header[b-r6q02diil8],
.app-table-command-cell[b-r6q02diil8] {
    width: 184px;
    min-width: 108px;
    text-align: center;
}

.app-table-command-header[b-r6q02diil8]  .app-skeleton {
    margin-left: auto;
    margin-right: auto;
}

.app-table-command-cell[b-r6q02diil8]  .app-button-group,
.app-table-command-cell[b-r6q02diil8]  .d-flex {
    flex-wrap: wrap;
    justify-content: center;
}

/* Auto-layout tables size the command column to its buttons on a single row: width:1% collapses a
   table-layout:auto column to its content width, and nowrap keeps every action on one line however
   wide the set is - e.g. a text "Permissions" button beside icons, which never fit the fixed 184px
   and used to wrap to two rows. The column then grows to whatever the widest row needs. */
.app-table--auto-layout .app-table-command-header[b-r6q02diil8],
.app-table--auto-layout .app-table-command-cell[b-r6q02diil8] {
    width: 1%;
    white-space: nowrap;
}

.app-table--auto-layout .app-table-command-cell[b-r6q02diil8]  .app-button-group,
.app-table--auto-layout .app-table-command-cell[b-r6q02diil8]  .d-flex {
    flex-wrap: nowrap;
}

.app-table--auto-layout .app-table-command-cell[b-r6q02diil8]  .app-button {
    flex-shrink: 0;
}

.app-table-command-cell[b-r6q02diil8]  .app-tooltip--top {
    left: auto;
    right: 0;
    transform: translateY(4px) !important;
}

.app-table-command-cell[b-r6q02diil8]  .app-tooltip-wrapper:hover .app-tooltip--top,
.app-table-command-cell[b-r6q02diil8]  .app-tooltip-wrapper:focus-within .app-tooltip--top {
    transform: translateY(0) !important;
}

.app-table-command-cell[b-r6q02diil8]  .app-tooltip--top::after {
    left: auto;
    right: 13px;
    transform: none;
}

/* ========== TABLE LOADING STATE ========== */
.app-table-state[b-r6q02diil8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 40px 32px;
    border-radius: 6px;
    border: 1px solid var(--bs-gray-300);
    background: var(--bs-gray-200);
}

/* ========== INITIAL LOAD SKELETON ========== */
.app-table-skeleton-shell[b-r6q02diil8] {
    overflow: hidden;
}

.app-table-skeleton-table[b-r6q02diil8] {
    width: 100%;
}

.app-table-skeleton-command-actions[b-r6q02diil8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.app-table-skeleton-cards[b-r6q02diil8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 24px;
}

.app-table-skeleton-card[b-r6q02diil8] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 10px;
    padding: 14px 16px;
    gap: 10px;
}

.app-table-skeleton-card-top[b-r6q02diil8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-table-skeleton-card-detail[b-r6q02diil8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-table-skeleton-card-row[b-r6q02diil8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-table-skeleton-card-actions[b-r6q02diil8] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

/* ========== MOBILE CARD VIEW ========== */
.app-table-card-view[b-r6q02diil8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 24px;
}

.app-table-card-view--loading[b-r6q02diil8] {
    pointer-events: none;
    user-select: none;
}

.app-table-mobile-card[b-r6q02diil8] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 10px;
    padding: 14px 16px;
    gap: 10px;
    transition: box-shadow 150ms ease;
}

.app-table-mobile-card--clickable[b-r6q02diil8] {
    cursor: pointer;
}

.app-table-mobile-card--clickable:active[b-r6q02diil8] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.app-table-mobile-card-top[b-r6q02diil8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-table-mobile-card-status[b-r6q02diil8] {
    flex: 1;
    min-width: 0;
}

.app-table-mobile-card-details[b-r6q02diil8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-table-mobile-card-detail[b-r6q02diil8] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.app-table-mobile-card-label[b-r6q02diil8] {
    font-size: 13px;
    color: var(--bs-gray-600);
    flex-shrink: 0;
}

.app-table-mobile-card-value[b-r6q02diil8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-table-mobile-card-value[b-r6q02diil8]  .app-badge {
    font-size: 12px;
}

/* Wrapper used when items already exist and a page-change load is in progress */
.app-table-wrapper[b-r6q02diil8] {
    position: relative;
}

.app-table-overlay[b-r6q02diil8] {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bs-white) 70%, transparent);
    backdrop-filter: blur(2px);
}

.app-table-wrapper--loading .app-table-container[b-r6q02diil8] {
    pointer-events: none;
    user-select: none;
}

.app-table-empty p[b-r6q02diil8] {
    margin: 0;
    color: var(--bs-gray-600);
    font-size: 0.95rem;
}

/* Empty message rendered as a colspan row inside <tbody> when HeaderTemplate is used */
.app-table-empty-cell[b-r6q02diil8] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.app-table-empty-cell p[b-r6q02diil8] {
    margin: 0;
}

/* ========== TABLE PAGINATION ========== */
.app-table-pagination[b-r6q02diil8] {
    margin-top: 20px;
    padding: 0 4px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .app-table[b-r6q02diil8] {
        font-size: 0.8125rem;
    }

    .app-table-header-cell[b-r6q02diil8],
    .app-table-cell[b-r6q02diil8] {
        padding: 14px 16px;
    }

    .app-table-head[b-r6q02diil8]  th,
    .app-table-body[b-r6q02diil8]  td {
        padding: 14px 16px;
    }
}

@media (max-width: 768px) {
    .app-table[b-r6q02diil8] {
        font-size: 0.75rem;
    }

    .app-table-header-cell[b-r6q02diil8],
    .app-table-cell[b-r6q02diil8] {
        padding: 12px 14px;
    }

    .app-table-head[b-r6q02diil8]  th,
    .app-table-body[b-r6q02diil8]  td {
        padding: 12px 14px;
    }

    .app-table-command-header[b-r6q02diil8],
    .app-table-command-cell[b-r6q02diil8] {
        width: 140px;
    }

    .app-table-header-content[b-r6q02diil8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .sort-button[b-r6q02diil8] {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 640px) {
  /* Stacked table layout only for tables without dedicated mobile card view */
  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-scroll[b-r6q02diil8] {
    overflow-x: visible;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-container[b-r6q02diil8] {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 -16px;
    background-color: transparent;
  }

  .app-table-state[b-r6q02diil8] {
    min-height: 200px;
    padding: 24px 16px;
    border: none;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table[b-r6q02diil8] {
    background-color: transparent;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-body[b-r6q02diil8] {
    background-color: transparent;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-head[b-r6q02diil8] {
    display: none;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-body[b-r6q02diil8],
  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-row[b-r6q02diil8],
  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-cell[b-r6q02diil8] {
    display: block;
    width: 100%;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-row[b-r6q02diil8] {
    background: var(--color-white);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    margin: 0 16px 1.5rem;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-row:hover[b-r6q02diil8] {
    background: var(--color-white);
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: none;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-row:active[b-r6q02diil8] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-cell[b-r6q02diil8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: none;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-cell[b-r6q02diil8]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-cell:first-child[b-r6q02diil8] {
    padding-top: 20px;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-cell:last-child[b-r6q02diil8] {
    padding-bottom: 20px;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-command-cell[b-r6q02diil8] {
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-bg-secondary);
    border-radius: 0 0 12px 12px;
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-command-cell[b-r6q02diil8]::before {
    display: none;
  }

  .app-table-wrapper:not(.app-table-wrapper--mobile-cards) .app-table-command-cell[b-r6q02diil8]  .d-flex {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: flex-end;
  }
}
/* /Shared/Components/AppTabs.razor.rz.scp.css */
.app-tabs[b-nnwri3bwge] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.app-tabs-header[b-nnwri3bwge] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--bs-border-color);
    position: relative;
    background-color: var(--bs-gray-200);
    border-radius: 4px;
}

.app-tab-button[b-nnwri3bwge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bs-gray-600);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-bottom: -2px;
    white-space: nowrap;
    text-transform: capitalize;
}

.app-tab-button[b-nnwri3bwge]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bs-light);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px 8px 0 0;
    z-index: -1;
}

.app-tab-button:hover[b-nnwri3bwge]::before {
    opacity: 1;
}

.app-tab-button:hover[b-nnwri3bwge] {
    color: var(--bs-primary);
}

.app-tab-button.active[b-nnwri3bwge] {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.app-tab-button.active[b-nnwri3bwge]::before {
    opacity: 0;
}

.app-tabs-content[b-nnwri3bwge] {
    padding-top: 1.5rem;
}

.app-tab-panel[b-nnwri3bwge] {
    animation: tabFadeIn-b-nnwri3bwge 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-tab-panel.active[b-nnwri3bwge] {
    display: block;
}

@keyframes tabFadeIn-b-nnwri3bwge {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .app-tabs-header[b-nnwri3bwge] {
        flex-direction: column;
        border-bottom: none;
        gap: 0.25rem;
    }

    .app-tab-button[b-nnwri3bwge] {
        justify-content: flex-start;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--bs-border-color);
        border-radius: 8px;
        margin-bottom: 0;
    }

    .app-tab-button[b-nnwri3bwge]::before {
        border-radius: 8px;
    }

    .app-tab-button.active[b-nnwri3bwge] {
        background-color: var(--bs-primary);
        color: white;
        border-color: var(--bs-primary);
    }

    .app-tab-button.active[b-nnwri3bwge]::before {
        display: none;
    }

    .app-tabs-content[b-nnwri3bwge] {
        padding-top: 1rem;
    }
}

/* Tablet responsive */
@media (min-width: 577px) and (max-width: 768px) {
    .app-tab-button[b-nnwri3bwge] {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Accessibility */
.app-tab-button:focus-visible[b-nnwri3bwge] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    border-radius: 4px;
}
/* /Shared/Components/AppTextArea.razor.rz.scp.css */
.app-textarea[b-wvsw807jde] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-textarea .app-form-label[b-wvsw807jde] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.app-textarea .app-form-label-required[b-wvsw807jde] {
    color: var(--bs-danger);
}

.app-textarea .app-form-control[b-wvsw807jde] {
    min-height: 96px;
    max-height: 400px;
    padding: 12px 14px;
    resize: vertical;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.5;
    border-radius: 16px;
    border: 1px solid #e0e2e7;
}

.app-textarea .app-form-control.auto-grow[b-wvsw807jde] {
    resize: none;
    overflow: hidden;
}

.app-textarea .app-form-control:focus[b-wvsw807jde] {
    color: var(--bs-body-color);
    background-color: #fff;
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(238, 212, 132, 0.25);
}

.app-textarea .app-form-control:disabled[b-wvsw807jde] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* ========== VALIDATION STATES ========== */
.app-textarea.state-error .app-form-control[b-wvsw807jde] {
    border-color: var(--bs-danger);
    background-color: #fff8f9;
}

.app-textarea.state-error .app-form-control:focus[b-wvsw807jde] {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    background-color: #ffffff;
}

.app-textarea.state-success .app-form-control[b-wvsw807jde] {
    border-color: var(--bs-success);
    background-color: #f8fdf7;
}

.app-textarea.state-success .app-form-control:focus[b-wvsw807jde] {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    background-color: #ffffff;
}

.app-textarea.state-warning .app-form-control[b-wvsw807jde] {
    border-color: var(--bs-warning);
    background-color: #fffdf8;
}

.app-textarea.state-warning .app-form-control:focus[b-wvsw807jde] {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    background-color: #ffffff;
}

/* ========== FEEDBACK MESSAGES ========== */
.app-form-error-message[b-wvsw807jde] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: 0.25rem;
}

.app-form-success-message[b-wvsw807jde] {
    font-size: 0.8125rem;
    color: var(--bs-success);
    margin-top: 0.25rem;
}

.app-form-warning-message[b-wvsw807jde] {
    font-size: 0.8125rem;
    color: var(--bs-warning);
    margin-top: 0.25rem;
}

.app-form-hint[b-wvsw807jde] {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* ========== CHARACTER COUNTER ========== */
.app-form-counter[b-wvsw807jde] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: right;
}

.app-form-counter.near-limit[b-wvsw807jde] {
    color: var(--bs-warning);
}

.app-form-counter.at-limit[b-wvsw807jde] {
    color: var(--bs-danger);
}

/* ========== DISABLED STATE ========== */
.app-textarea.disabled[b-wvsw807jde] {
    opacity: 0.65;
    pointer-events: none;
}

/* ========== LOADING STATE ========== */
.app-textarea.loading .app-form-control[b-wvsw807jde] {
    background-color: #e9ecef;
    cursor: wait;
    color: transparent;
    caret-color: transparent;
}

.app-textarea.loading .app-form-control[b-wvsw807jde]::placeholder {
    color: transparent;
}
/* /Shared/Components/AppTimePicker.razor.rz.scp.css */
/* ========== Container ========== */
.app-time-picker[b-2sco5gsuft] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-time-picker.is-disabled[b-2sco5gsuft] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.tp-label[b-2sco5gsuft] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.tp-required[b-2sco5gsuft] {
    color: var(--bs-danger);
}

/* ========== Control wrapper ========== */
.tp-control[b-2sco5gsuft] {
    position: relative;
    width: 100%;
}

/* ========== Trigger ========== */
.tp-trigger[b-2sco5gsuft] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e0e2e7;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    color: var(--bs-body-color);
}

.tp-trigger:hover:not(:disabled)[b-2sco5gsuft] {
    border-color: #c8ccd4;
}

.tp-trigger:focus-visible[b-2sco5gsuft] {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.tp-trigger.is-open[b-2sco5gsuft] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.tp-trigger:disabled[b-2sco5gsuft] {
    background: #e9ecef;
    cursor: not-allowed;
}

.tp-placeholder[b-2sco5gsuft] {
    color: #6c757d;
    flex: 1;
}

.tp-value[b-2sco5gsuft] {
    color: var(--bs-body-color);
    flex: 1;
}

.tp-trigger-icon[b-2sco5gsuft] {
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ========== Clear button ========== */
.tp-clear-btn[b-2sco5gsuft] {
    position: absolute;
    right: 2.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    z-index: 1;
}

.tp-clear-btn:hover[b-2sco5gsuft] {
    color: var(--bs-body-color);
    background: #f0f0f0;
}

/* ========== Bottom sheet content ========== */
.tp-content[b-2sco5gsuft] {
    padding: 1rem 0.5rem 0.5rem;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* ========== Time Drum Picker ========== */
.time-drums[b-2sco5gsuft] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.time-drum-wrapper[b-2sco5gsuft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.time-drum-wrapper.time-drum-ampm[b-2sco5gsuft] {
    min-width: 64px;
}

.time-drum-label[b-2sco5gsuft] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.time-drum-container[b-2sco5gsuft] {
    position: relative;
    height: 132px; /* 3 items * 44px */
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.95) 100%
    );
}

.time-drum-highlight[b-2sco5gsuft] {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--bs-primary-bg-subtle);
    border-top: 1px solid var(--bs-primary-border-subtle);
    border-bottom: 1px solid var(--bs-primary-border-subtle);
    pointer-events: none;
    z-index: 1;
}

.time-drum[b-2sco5gsuft] {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 2;
}

.time-drum[b-2sco5gsuft]::-webkit-scrollbar {
    display: none;
}

.time-drum-padding[b-2sco5gsuft] {
    height: 44px;
    flex-shrink: 0;
}

.time-drum-item[b-2sco5gsuft] {
    height: 44px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #9ca3af;
    scroll-snap-align: center;
    cursor: pointer;
    transition: color 0.15s ease, font-weight 0.15s ease;
    user-select: none;
}

.time-drum-item.is-selected[b-2sco5gsuft] {
    color: var(--bs-body-color);
    font-weight: 700;
}

.time-drum-colon[b-2sco5gsuft] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-body-color);
    padding-top: calc(0.5rem + 0.6875rem + 0.5rem + 44px);
    line-height: 1;
}

/* ========== Footer ========== */
.tp-footer[b-2sco5gsuft] {
    display: flex;
    gap: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.tp-now-btn[b-2sco5gsuft] {
    flex: 1;
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--bs-gray-900);
    padding: 0.625rem 1rem;
    border-radius: 10px;
    transition: all 0.15s ease;
    min-height: 44px;
}

.tp-now-btn:hover[b-2sco5gsuft] {
    background: var(--bs-primary);
    color: var(--bs-gray-900);
}

.tp-confirm-btn[b-2sco5gsuft] {
    flex: 1;
    background: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--bs-body-color);
    padding: 0.625rem 1rem;
    border-radius: 10px;
    transition: all 0.15s ease;
    min-height: 44px;
}

.tp-confirm-btn:hover[b-2sco5gsuft] {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.tp-confirm-btn:active[b-2sco5gsuft] {
    transform: translateY(0);
}

/* ========== Mobile ========== */
@media (max-width: 768px) {
    .time-drum-item[b-2sco5gsuft] {
        font-size: 1.75rem;
        min-width: 80px;
    }

    .time-drum-colon[b-2sco5gsuft] {
        font-size: 2rem;
    }

    .tp-now-btn[b-2sco5gsuft],
    .tp-confirm-btn[b-2sco5gsuft] {
        min-height: 52px;
        font-size: 1rem;
    }
}
/* /Shared/Components/AppTooltip.razor.rz.scp.css */
/* ========== WRAPPER ========== */
.app-tooltip-wrapper[b-ktls1b5nyw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========== TOOLTIP BASE ========== */
.app-tooltip[b-ktls1b5nyw] {
    position: absolute;
    z-index: 1080;
    padding: 5px 10px;
    background-color: var(--color-black-alt);
    color: var(--color-white);
    font-size: 12px;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    /* hidden by default — transition-delay is set inline per instance */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear;
}

/* show on parent hover or focus-within: reset delay for hide (instant hide) */
.app-tooltip-wrapper:hover .app-tooltip[b-ktls1b5nyw],
.app-tooltip-wrapper:focus-within .app-tooltip[b-ktls1b5nyw] {
    opacity: 1;
    visibility: visible;
    transform: none !important;
    /* keep the instance-defined show delay; override visibility delay to 0 so it appears with opacity */
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear;
}

/* ========== ARROW SHARED ========== */
.app-tooltip[b-ktls1b5nyw]::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
    pointer-events: none;
}

/* ========== PLACEMENT: TOP (default) ========== */
.app-tooltip--top[b-ktls1b5nyw] {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.app-tooltip--top[b-ktls1b5nyw]::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--color-black-alt);
    border-bottom: none;
}

.app-tooltip-wrapper:hover .app-tooltip--top[b-ktls1b5nyw],
.app-tooltip-wrapper:focus-within .app-tooltip--top[b-ktls1b5nyw] {
    transform: translateX(-50%) translateY(0) !important;
}

/* ========== PLACEMENT: BOTTOM ========== */
.app-tooltip--bottom[b-ktls1b5nyw] {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.app-tooltip--bottom[b-ktls1b5nyw]::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--color-black-alt);
    border-top: none;
}

.app-tooltip-wrapper:hover .app-tooltip--bottom[b-ktls1b5nyw],
.app-tooltip-wrapper:focus-within .app-tooltip--bottom[b-ktls1b5nyw] {
    transform: translateX(-50%) translateY(0) !important;
}

/* ========== PLACEMENT: LEFT ========== */
.app-tooltip--left[b-ktls1b5nyw] {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

.app-tooltip--left[b-ktls1b5nyw]::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--color-black-alt);
    border-right: none;
}

.app-tooltip-wrapper:hover .app-tooltip--left[b-ktls1b5nyw],
.app-tooltip-wrapper:focus-within .app-tooltip--left[b-ktls1b5nyw] {
    transform: translateY(-50%) translateX(0) !important;
}

/* ========== PLACEMENT: RIGHT ========== */
.app-tooltip--right[b-ktls1b5nyw] {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

.app-tooltip--right[b-ktls1b5nyw]::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--color-black-alt);
    border-left: none;
}

.app-tooltip-wrapper:hover .app-tooltip--right[b-ktls1b5nyw],
.app-tooltip-wrapper:focus-within .app-tooltip--right[b-ktls1b5nyw] {
    transform: translateY(-50%) translateX(0) !important;
}
/* /Shared/Components/AppTreeView.razor.rz.scp.css */
.app-tree-view[b-t5qqi9q5o4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    user-select: none;
    padding: 0.25rem 0.1rem;
}
/* /Shared/Components/AppTreeViewNode.razor.rz.scp.css */
/* =====================================================
   APP TREE VIEW NODE
   ===================================================== */

.tree-node[b-vwwnk0sjg3] {
    display: flex;
    flex-direction: column;
    /* fix 1: constrain width to container so actions stay inside */
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ── Row ─────────────────────────────────────────────── */

.tree-node-row[b-vwwnk0sjg3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-right: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #334155;
    transition: background 0.15s ease, color 0.15s ease;
    /* fix 1: keep inside parent; fix 3: fixed height so actions don't push layout */
    min-height: 32px;
    height: 32px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    outline: none;
}

.tree-node-row:hover[b-vwwnk0sjg3] {
    background: #f1f5f9;
}

.tree-node-row:active[b-vwwnk0sjg3] {
    background: #e2e8f0;
    transition-duration: 0.05s;
}

.tree-node-row[draggable="true"][b-vwwnk0sjg3] {
    cursor: grab;
}

.tree-node-row[draggable="true"]:active[b-vwwnk0sjg3] {
    cursor: grabbing;
}

.tree-node-row.drag-over[b-vwwnk0sjg3] {
    background: rgba(59, 130, 246, 0.06);
}

.tree-node-row.drag-over[b-vwwnk0sjg3]::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: #3b82f6;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
}

.tree-node-row.selected[b-vwwnk0sjg3] {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
}

.tree-node-row.selected[b-vwwnk0sjg3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #0369a1;
    border-radius: 0 2px 2px 0;
    animation: tree-indicator-in-b-vwwnk0sjg3 0.18s ease;
}

@keyframes tree-indicator-in-b-vwwnk0sjg3 {
    from { opacity: 0; transform: scaleY(0.4); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* ── Toggle (expand/collapse chevron) ──────────────────── */

.tree-node-toggle[b-vwwnk0sjg3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #94a3b8;
    border-radius: 4px;
    padding: 2px;
    transition: background 0.12s, color 0.12s;
}

.tree-node-toggle:hover[b-vwwnk0sjg3] {
    background: #e2e8f0;
    color: #475569;
}

.tree-node-toggle-icon[b-vwwnk0sjg3] {
    display: flex;
    align-items: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-node-toggle.expanded .tree-node-toggle-icon[b-vwwnk0sjg3] {
    transform: rotate(90deg);
}

.tree-node-toggle-placeholder[b-vwwnk0sjg3] {
    display: inline-block;
    width: 14px;
    flex-shrink: 0;
}

/* ── Icon ───────────────────────────────────────────────── */

.tree-node-icon[b-vwwnk0sjg3] {
    display: flex;
    align-items: center;
    color: #3b82f6;
    flex-shrink: 0;
    transition: color 0.15s;
}

.tree-node-row.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #0369a1;
}

/* ── Label ──────────────────────────────────────────────── */

.tree-node-label[b-vwwnk0sjg3] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Actions — fix 3: use opacity so layout stays stable ── */

.tree-node-actions[b-vwwnk0sjg3] {
    /* always in layout — no height jump on hover */
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

@keyframes tree-actions-in-b-vwwnk0sjg3 {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tree-node-row:hover .tree-node-actions[b-vwwnk0sjg3],
.tree-node-row.selected .tree-node-actions[b-vwwnk0sjg3] {
    opacity: 1;
    pointer-events: auto;
    animation: tree-actions-in-b-vwwnk0sjg3 0.12s ease;
}

/* ── Children (animated expand/collapse) ───────────────── */

.tree-node-children[b-vwwnk0sjg3] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease;
    overflow: hidden;
    opacity: 0;
    width: 100%;
    min-width: 0;
}

.tree-node-children.expanded[b-vwwnk0sjg3] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tree-node-children-inner[b-vwwnk0sjg3] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ── Section node variant ───────────────────────────────── */

.tree-node-row.tree-node--section .tree-node-icon[b-vwwnk0sjg3] {
    color: #7c3aed;
}

.tree-node-row.tree-node--section.selected[b-vwwnk0sjg3] {
    background: #f5f3ff;
    color: #6d28d9;
}

.tree-node-row.tree-node--section.selected[b-vwwnk0sjg3]::before {
    background: #7c3aed;
}

.tree-node-row.tree-node--section.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #6d28d9;
}

/* ── Question group variant ─────────────────────────────── */

.tree-node-row.tree-node--group .tree-node-icon[b-vwwnk0sjg3] {
    color: #d97706;
}

.tree-node-row.tree-node--group.selected[b-vwwnk0sjg3] {
    background: #fef3c7;
    color: #b45309;
}

.tree-node-row.tree-node--group.selected[b-vwwnk0sjg3]::before {
    background: #d97706;
}

.tree-node-row.tree-node--group.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #b45309;
}

/* ── Question node variant ──────────────────────────────── */

.tree-node-row.tree-node--question[b-vwwnk0sjg3] {
    font-size: 0.8rem;
    color: #475569;
    height: 28px;
    min-height: 28px;
}

.tree-node-row.tree-node--question .tree-node-icon[b-vwwnk0sjg3] {
    color: #94a3b8;
}

.tree-node-row.tree-node--question.selected[b-vwwnk0sjg3] {
    background: #f0fdf4;
    color: #166534;
}

.tree-node-row.tree-node--question.selected[b-vwwnk0sjg3]::before {
    background: #16a34a;
}

.tree-node-row.tree-node--question.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #16a34a;
}

/* ── fix 5: dependency indicator on question icon ────────── */

.tree-node-row.tree-node--has-deps .tree-node-icon[b-vwwnk0sjg3] {
    color: #f59e0b;
}

.tree-node-row.tree-node--has-deps.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #d97706;
}

/* ── Dependency source (other questions depend on this) ─── */

.tree-node-row.tree-node--dep-source .tree-node-icon[b-vwwnk0sjg3] {
    color: #8b5cf6;
}

.tree-node-row.tree-node--dep-source.selected[b-vwwnk0sjg3] {
    background: #f5f3ff;
    color: #6d28d9;
}

.tree-node-row.tree-node--dep-source.selected[b-vwwnk0sjg3]::before {
    background: #8b5cf6;
}

.tree-node-row.tree-node--dep-source.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #6d28d9;
}

/* ── Group connector: amber left border on expanded children ─ */

.tree-node-row.tree-node--group ~ .tree-node-children .tree-node-children-inner[b-vwwnk0sjg3] {
    border-left: 2px solid #fbbf24;
    margin-left: 8px;
    padding-left: 2px;
}

/* Group row: bottom-half bar connects visually to the children border */
.tree-node-row.tree-node--group:not(.selected)[b-vwwnk0sjg3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    bottom: 0;
    width: 3px;
    background: #fbbf24;
    border-radius: 0 0 2px 0;
}

/* ── Dep-chain connectors (non-selected only) ────────────── */

/* Full-height violet bar on dep-source and has-deps rows so adjacent pairs form a continuous line */
.tree-node-row.tree-node--dep-source:not(.selected)[b-vwwnk0sjg3]::before,
.tree-node-row.tree-node--has-deps:not(.selected)[b-vwwnk0sjg3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #8b5cf6;
    border-radius: 0 2px 2px 0;
}

/* ── ONE_OF module rule indicators ──────────────────────── */

/* Parent that enforces ONE_OF rule: amber icon */
.tree-node-row.tree-node--module-one-of-parent .tree-node-icon[b-vwwnk0sjg3] {
    color: #f59e0b;
}

.tree-node-row.tree-node--module-one-of-parent.selected .tree-node-icon[b-vwwnk0sjg3] {
    color: #d97706;
}

/* Alternative child modules under a ONE_OF parent: amber left bar */
.tree-node-row.tree-node--module-one-of-alt:not(.selected)[b-vwwnk0sjg3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #f59e0b;
    border-radius: 0 2px 2px 0;
}

/* ── Swipe-actions zone (hidden on desktop) ─────────── */

.tree-node-swipe-actions[b-vwwnk0sjg3] {
    display: none;
}

/* ── Mobile (<= 900px) ──────────────────────────────── */

@media (max-width: 900px) {
    .tree-node-row[b-vwwnk0sjg3] {
        min-height: 44px;
        height: 44px;
        font-size: 0.9rem;
        border-radius: 8px;
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.15s ease,
                    color 0.15s ease;
    }

    .tree-node-row.tree-node--question[b-vwwnk0sjg3] {
        min-height: 40px;
        height: 40px;
    }

    /* Bigger expand/collapse toggle for touch */
    .tree-node-toggle[b-vwwnk0sjg3] {
        width: 32px;
        height: 32px;
    }

    /* Always show non-danger actions on touch devices */
    .tree-node-actions[b-vwwnk0sjg3] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Bigger add/non-danger action buttons */
    .tree-node-actions[b-vwwnk0sjg3]  .tree-node-action-btn {
        width: 34px;
        height: 34px;
    }

    /* Hide danger buttons from the inline actions — swipe zone handles delete */
    .tree-node-actions[b-vwwnk0sjg3]  .tree-node-action-btn.danger {
        display: none;
    }

    /* ── Swipe-to-delete zone ─────────────────────────── */

    .tree-node-swipe-wrapper[b-vwwnk0sjg3] {
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
        border-radius: 8px;
    }

    .tree-node-swipe-actions[b-vwwnk0sjg3] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 72px;
        background: #ef4444;
        border-radius: 0 8px 8px 0;
        transform: translateX(100%);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tree-node-swipe-wrapper.swiped .tree-node-swipe-actions[b-vwwnk0sjg3] {
        transform: translateX(0);
    }

    /* Show only danger button in swipe zone */
    .tree-node-swipe-actions[b-vwwnk0sjg3]  .tree-node-action-btn:not(.danger) {
        display: none;
    }

    .tree-node-swipe-actions[b-vwwnk0sjg3]  .tree-node-action-btn.danger {
        display: flex;
        width: 48px;
        height: 48px;
        color: #fff;
        background: transparent;
    }

    /* Slide row left to expose delete zone */
    .tree-node-swipe-wrapper.swiped .tree-node-row[b-vwwnk0sjg3] {
        transform: translateX(-72px);
    }

    /* Disable transitions while finger is moving so row tracks touch without lag */
    .tree-node-swipe-wrapper.swiping .tree-node-row[b-vwwnk0sjg3],
    .tree-node-swipe-wrapper.swiping .tree-node-swipe-actions[b-vwwnk0sjg3] {
        transition: none !important;
    }
}
/* /Shared/Components/AppUserAssignedResourcesSection.razor.rz.scp.css */
.assigned-resources-section[b-i8dpxq7iim] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hint-fields-grid[b-i8dpxq7iim] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.assigned-resource-hint[b-i8dpxq7iim] {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* ── Assigned resources shown as selected cards: same grid as the access-request suggestions ── */
.assigned-selected-cards[b-i8dpxq7iim] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 1200px) {
    .assigned-selected-cards[b-i8dpxq7iim] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .assigned-selected-cards[b-i8dpxq7iim] {
        grid-template-columns: 1fr;
    }
}

.assigned-selected-cards[b-i8dpxq7iim]  .hint-selected-card.selected,
.assigned-selected-cards[b-i8dpxq7iim]  .hint-selected-card.selected:hover {
    background: color-mix(in srgb, var(--bs-primary) 5%, transparent);
    border-color: var(--bs-primary);
    transform: none;
}

.hint-selected-details[b-i8dpxq7iim] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hint-selected-detail-row[b-i8dpxq7iim] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.hint-selected-detail-label[b-i8dpxq7iim] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.hint-selected-detail-value[b-i8dpxq7iim] {
    color: var(--bs-secondary-color);
    word-break: break-word;
}

/* ── Assignable catalog table wrapper. Filter row, compact headers, and selectable/selected
   rows come from the shared AppTable helpers (app-table-filter-row / -cell, app-table-col-header,
   app-table-row-selectable / -selected). ── */
.hint-search-section[b-i8dpxq7iim] {
    width: 100%;
}

.hint-search-section--secondary[b-i8dpxq7iim] {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px dashed var(--bs-border-color);
}

.hint-search-section[b-i8dpxq7iim]  .app-table-scroll {
    overflow-x: auto;
}
/* /Shared/Components/AppUserAssignedResourcesSectionSkeleton.razor.rz.scp.css */
.assigned-resources-section[b-jzudlsdk4w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hint-fields-grid[b-jzudlsdk4w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}
/* /Shared/Components/AppUserInfoCard.razor.rz.scp.css */
.app-user-info-grid[b-ov3ipy9jx5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.app-user-info-block[b-ov3ipy9jx5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.app-user-info-block > .app-form-label[b-ov3ipy9jx5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    margin: 0;
}

.app-user-info-value[b-ov3ipy9jx5] {
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

@media (max-width: 1200px) {
    .app-user-info-grid[b-ov3ipy9jx5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .app-user-info-grid[b-ov3ipy9jx5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .app-user-info-grid[b-ov3ipy9jx5] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/Components/AppUserInfoCardSkeleton.razor.rz.scp.css */
.app-user-info-grid[b-wkt6fhx33u] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.app-user-info-block[b-wkt6fhx33u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

@media (max-width: 1200px) {
    .app-user-info-grid[b-wkt6fhx33u] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .app-user-info-grid[b-wkt6fhx33u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .app-user-info-grid[b-wkt6fhx33u] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/Components/Authorization/OfflinePage.razor.rz.scp.css */
.offline-page[b-2p03nm09kk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 40px 20px;
}

.offline-icon[b-2p03nm09kk] {
    font-size: 3rem;
    margin-bottom: 20px;
}

.offline-page h2[b-2p03nm09kk] {
    margin: 0 0 10px 0;
    color: #1f2937;
    font-size: 1.75rem;
}

.offline-page p[b-2p03nm09kk] {
    margin: 5px 0;
    color: #68707d;
    max-width: 400px;
}

.offline-hint[b-2p03nm09kk] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 15px !important;
}
/* /Shared/Components/Authorization/UnauthorizedAccessPage.razor.rz.scp.css */
.authorization-denied[b-wrcqhxsmbq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 40px 20px;
}

.authorization-denied h2[b-wrcqhxsmbq] {
    margin: 0 0 10px 0;
    color: #1f2937;
    font-size: 1.75rem;
}

.authorization-denied p[b-wrcqhxsmbq] {
    margin: 5px 0;
    color: #68707d;
    max-width: 400px;
}

@keyframes shake-b-wrcqhxsmbq {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}
/* /Shared/Components/EnvironmentStatusIndicator.razor.rz.scp.css */
.env-status[b-luafzoupot] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    min-width: max-content;
}

.env-status .env-icon[b-luafzoupot] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.env-status .env-text[b-luafzoupot] { display: inline; }
.env-status .env-text.short[b-luafzoupot] { display: none; }

.env-status.unknown[b-luafzoupot] {
    background-color: rgba(230, 230, 230, 0.12);
    color: var(--bs-dark);
}

.env-status.development[b-luafzoupot] {
    background-color: var(--bs-gray-800);
    color: var(--bs-primary);
}

.env-status.staging[b-luafzoupot] {
    background-color: rgba(45, 156, 219, 0.12);
    color: var(--color-blue-bright);
}

.env-status.production[b-luafzoupot] {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--color-black);
}

@media (max-width: 768px) {
    .env-status[b-luafzoupot] { font-size: 0.75rem; padding: 0.25rem 0.5rem; gap: 0.25rem; }
    .env-status .env-text.full[b-luafzoupot] { display: none; }
    .env-status .env-text.short[b-luafzoupot] { display: inline; }
}

@media (max-width: 576px) {
    .env-status[b-luafzoupot] { padding: 4px; background-color: transparent !important; border-radius: 50%; min-width: 32px; min-height: 32px; justify-content: center; }
    .env-status .env-text.full[b-luafzoupot] { display: none; }
    .env-status .env-text.short[b-luafzoupot] { display: inline; }
}
/* /Shared/Components/ModuleRoleSelector.razor.rz.scp.css */
.hint-type-header[b-t20hy8zm7z] {
    font-size: 1rem;
}

.module-selector-grid[b-t20hy8zm7z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}

.module-selector-card[b-t20hy8zm7z] {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-gray-400);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: left;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
}

.module-selector-card[b-t20hy8zm7z]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.module-selector-card:hover:not(:disabled)[b-t20hy8zm7z] {
    border-color: var(--bs-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.module-selector-card:hover:not(:disabled)[b-t20hy8zm7z]::before {
    opacity: 1;
}

.module-selector-card:active:not(:disabled)[b-t20hy8zm7z] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.module-selector-card.selected[b-t20hy8zm7z] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.module-selector-card.selected[b-t20hy8zm7z]::before {
    opacity: 1;
}

.module-selector-card:disabled[b-t20hy8zm7z] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-gray-300);
    box-shadow: none;
}

.module-selector-card-content[b-t20hy8zm7z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
}

.module-selector-name[b-t20hy8zm7z] {
    flex: 1;
    font-weight: 500;
    word-break: break-word;
    line-height: 1.4;
}

.module-selector-check[b-t20hy8zm7z] {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.module-selector-check-assigned[b-t20hy8zm7z] {
    color: var(--bs-success);
    flex-shrink: 0;
}

.module-selector-card.is-locked[b-t20hy8zm7z] {
    border-color: var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 6%, var(--bs-body-bg));
    cursor: default;
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.module-selector-card.is-locked[b-t20hy8zm7z]::before {
    background: linear-gradient(135deg, var(--bs-success), color-mix(in srgb, var(--bs-success) 60%, var(--bs-primary)));
    opacity: 1;
}

.is-locked-module[b-t20hy8zm7z] {
    border-color: color-mix(in srgb, var(--bs-success) 40%, transparent);
    background: color-mix(in srgb, var(--bs-success) 4%, var(--bs-body-bg));
}

.is-locked-module .module-roles-header[b-t20hy8zm7z] {
    color: var(--bs-success);
}

.resource-search input[type="search"][b-t20hy8zm7z] {
    max-width: 280px;
}

.selected-modules-roles[b-t20hy8zm7z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.module-roles-group[b-t20hy8zm7z] {
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1.5px solid color-mix(in srgb, var(--bs-primary) 30%, transparent);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.06);
}

.module-roles-header[b-t20hy8zm7z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
    color: var(--bs-primary);
}

.role-chips[b-t20hy8zm7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.role-chip[b-t20hy8zm7z] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 1rem;
    border: 1.5px solid var(--bs-gray-400);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--bs-body-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.role-chip:hover:not(:disabled)[b-t20hy8zm7z] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    color: var(--bs-primary);
}

.role-chip.is-selected[b-t20hy8zm7z] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: var(--bs-primary);
}

.role-chip:disabled[b-t20hy8zm7z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.role-chip.is-assigned[b-t20hy8zm7z] {
    border-color: var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 10%, transparent);
    color: var(--bs-success);
    opacity: 0.75;
    cursor: not-allowed;
}

.chip-note[b-t20hy8zm7z] {
    font-size: 0.7rem;
    opacity: 0.8;
}

.module-required-resources[b-t20hy8zm7z] {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.75rem;
}

@media (max-width: 768px) {
    .module-selector-grid[b-t20hy8zm7z] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .role-chips[b-t20hy8zm7z] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .role-chip[b-t20hy8zm7z] {
        justify-content: center;
        padding: 0.75rem;
        min-height: 44px;
        font-size: 0.875rem;
        text-align: center;
    }
}
/* /Shared/Components/NavMenuDesktop.razor.rz.scp.css */
/* ========== APP TOPBAR ========== */
.app-topbar[b-q7umsp5vnf] {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    border-bottom: 1px solid var(--bs-gray-300);
    display: flex;
    justify-content: center;
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--bs-white) 95%, transparent);
    box-shadow: 0px 2px 8px 0 rgba(var(--bs-black-rgb), 0.08);
    transition: box-shadow 0.2s ease-in-out;
}

.app-topbar:hover[b-q7umsp5vnf] {
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-black-rgb), 0.15);
}

.app-topbar-inner[b-q7umsp5vnf] {
    width: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}

.topbar-left[b-q7umsp5vnf] {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInFromLeft-b-q7umsp5vnf 0.4s ease-out;
}

@keyframes slideInFromLeft-b-q7umsp5vnf {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.topbar-logo[b-q7umsp5vnf] {
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease-in-out;
}

.topbar-logo:hover[b-q7umsp5vnf] {
    transform: scale(1.05);
}

.topbar-title[b-q7umsp5vnf] {
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-body-color);
    letter-spacing: 0.5px;
}

.topbar-nav[b-q7umsp5vnf] {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-left: auto;
}

/* ========== NAVIGATION ITEM WRAPPER ========== */
.nav-item[b-q7umsp5vnf] {
    position: relative;
}

.nav-item[b-q7umsp5vnf]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

/* ========== NAVIGATION ITEM BUTTON/LINK ========== */
.topbar-nav-item[b-q7umsp5vnf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    padding: 8px 12px;
    border: none;
    background: none;
    transition: all 0.2s ease-in-out;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.topbar-nav-item:hover[b-q7umsp5vnf] {
    color: var(--bs-body-color);
}

.topbar-nav-item.active[b-q7umsp5vnf] {
    font-weight: var(--font-weight-semi-bold);
}

.topbar-icon[b-q7umsp5vnf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-nav-item[b-q7umsp5vnf]::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.topbar-nav-item:hover[b-q7umsp5vnf]::before {
    transform: scaleX(1);
}

/* ========== NAVIGATION DROPDOWN PANEL ========== */
.topbar-dropdown-panel[b-q7umsp5vnf] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    background: var(--bs-white);
    border-radius: 6px;
    box-shadow: 0px 2px 8px 0 rgba(var(--bs-black-rgb), 0.08);
    border: 1px solid var(--bs-gray-300);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    animation: none;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes topbarDropdownSlideIn-b-q7umsp5vnf {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-item:hover .topbar-dropdown-panel[b-q7umsp5vnf],
.nav-item:focus-within .topbar-dropdown-panel[b-q7umsp5vnf] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: topbarDropdownSlideIn-b-q7umsp5vnf 0.3s ease-out;
    box-shadow: 0px 4px 12px 0 rgba(var(--bs-black-rgb), 0.12);
}

.nav-item.topbar-dropdown-closed .topbar-dropdown-panel[b-q7umsp5vnf] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out !important;
}

.topbar-user-menu.topbar-dropdown-closed .topbar-dropdown-panel[b-q7umsp5vnf] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out !important;
}

/* ========== TOPBAR USER MENU ========== */
.topbar-user-menu[b-q7umsp5vnf] {
    position: relative;
    animation: slideInFromRight-b-q7umsp5vnf 0.4s ease-out;
}

@keyframes slideInFromRight-b-q7umsp5vnf {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.topbar-user-menu[b-q7umsp5vnf]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.topbar-user-trigger[b-q7umsp5vnf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 2px solid var(--bs-primary);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.topbar-user-trigger:hover[b-q7umsp5vnf] {
    background-color: var(--bs-primary);
}

.topbar-user-trigger:active[b-q7umsp5vnf] {
    transform: translateY(0);
}

.topbar-user-avatar[b-q7umsp5vnf] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1.5px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    background: var(--bs-white);
    color: var(--bs-body-color);
    background-color: var(--bs-primary);
}

.topbar-user-trigger:hover .topbar-user-avatar[b-q7umsp5vnf] {
    background-color: var(--bs-white);
}

.topbar-user-name[b-q7umsp5vnf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
}

/* USER dropdown uses unified .topbar-dropdown-panel when inside .topbar-user-menu */
@keyframes topbarUserDropdownSlideIn-b-q7umsp5vnf {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topbar-user-menu .topbar-dropdown-panel[b-q7umsp5vnf] {
    /* place panel to the right for user menu */
    right: 0;
    left: auto;
    min-width: 220px;
}

.topbar-user-menu:hover .topbar-dropdown-panel[b-q7umsp5vnf] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: topbarUserDropdownSlideIn-b-q7umsp5vnf 0.3s ease-out;
    box-shadow: 0px 4px 12px 0 rgba(var(--bs-black-rgb), 0.12);
}

/* ========== DROPDOWN ITEMS ========== */
.topbar-dropdown-item[b-q7umsp5vnf] {
    display: flex;
    width: 100%;
    padding: 10px 10px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-body-color);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
    border-radius: 6px;
    align-items: center;
    gap: 10px;
    appearance: none;
}

.topbar-dropdown-item[b-q7umsp5vnf]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bs-primary);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
    border-radius: 2px;
}

.topbar-dropdown-item:hover[b-q7umsp5vnf] {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.topbar-dropdown-item:hover[b-q7umsp5vnf]::before {
    transform: scaleY(1);
}

.topbar-dropdown-item:focus[b-q7umsp5vnf],
.topbar-dropdown-item:focus-visible[b-q7umsp5vnf] {
    outline: none;
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 14%, transparent);
}

.topbar-dropdown-item.active[b-q7umsp5vnf] {
    font-weight: 600;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.topbar-dropdown-item.active[b-q7umsp5vnf]::before {
    transform: scaleY(1);
}

.topbar-dropdown-item.danger[b-q7umsp5vnf] {
    color: var(--bs-danger);
}

.topbar-dropdown-item[disabled][b-q7umsp5vnf],
.topbar-dropdown-item[aria-disabled="true"][b-q7umsp5vnf] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.topbar-dropdown-item-icon[b-q7umsp5vnf] {
    width: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-dropdown-divider[b-q7umsp5vnf] {
    height: 1px;
    margin: 6px 0;
    padding: 0;
    background: var(--bs-gray-200);
    border: none;
}

.topbar-dropdown-version[b-q7umsp5vnf] {
    padding: 6px 12px 4px;
    font-size: 0.7rem;
    color: var(--bs-secondary);
    text-align: center;
    border-top: 1px solid var(--bs-gray-200);
    margin-top: 4px;
}

/* Scrollbar styling for long dropdown menus */
.topbar-dropdown-panel[b-q7umsp5vnf]::-webkit-scrollbar,
.topbar-user-dropdown[b-q7umsp5vnf]::-webkit-scrollbar {
    width: 7px;
}

.topbar-dropdown-panel[b-q7umsp5vnf]::-webkit-scrollbar-track,
.topbar-user-dropdown[b-q7umsp5vnf]::-webkit-scrollbar-track {
    background: transparent;
}

.topbar-dropdown-panel[b-q7umsp5vnf]::-webkit-scrollbar-thumb,
.topbar-user-dropdown[b-q7umsp5vnf]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bs-gray-400) 40%, transparent);
    border-radius: 4px;
}

.topbar-dropdown-panel[b-q7umsp5vnf]::-webkit-scrollbar-thumb:hover,
.topbar-user-dropdown[b-q7umsp5vnf]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--bs-gray-400) 60%, transparent);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .app-topbar[b-q7umsp5vnf] {
        display: none;
    }
}

@media (max-width: 1024px) {
    .topbar-nav[b-q7umsp5vnf] {
        gap: 16px;
    }

    .topbar-nav-item[b-q7umsp5vnf] {
        font-size: 13px;
    }

    .app-topbar-inner[b-q7umsp5vnf] {
        padding: 0 16px;
    }
}

/* ========== OFFLINE-DISABLED STATE ========== */
.nav-offline-disabled[b-q7umsp5vnf] {
    pointer-events: none;
}

.nav-offline-disabled .topbar-nav-item[b-q7umsp5vnf] {
    opacity: 0.5;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

.offline-badge[b-q7umsp5vnf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: var(--bs-warning);
    font-size: 12px;
}

/* ========== PENDING APPROVALS BADGE ========== */
.nav-pending-badge[b-q7umsp5vnf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--bs-danger);
    color: var(--bs-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    animation: badge-pulse-b-q7umsp5vnf 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-q7umsp5vnf {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), 0);
    }
}
/* /Shared/Components/NavMenuMobile.razor.rz.scp.css */
/* ========== BOTTOM NAVIGATION ========== */
.bottom-nav[b-9mi49cxu7t] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 6px 13px;
    padding-bottom: max(13px, env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: transparent;
    z-index: 100;
    pointer-events: none;
    touch-action: none;
    overscroll-behavior: none;
}

.bottom-nav-island[b-9mi49cxu7t] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    background: #FFFFFF;
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    pointer-events: auto;
    min-height: 75px;
}

/* Slider under active item — position/width set by JS after render */
.nav-slider[b-9mi49cxu7t] {
    position: absolute;
    left: 0;
    top: 8px;
    width: 0;
    height: calc(100% - 16px);
    border-radius: 4px;
    background: var(--bs-primary);
    transition: left 320ms cubic-bezier(.2,.9,.2,1), width 160ms cubic-bezier(.2,.9,.2,1), background 240ms ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.bottom-nav-item[b-9mi49cxu7t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    color: #171616;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.bottom-nav-item:hover[b-9mi49cxu7t] {
    color: #171616;
}

.bottom-nav-item.active[b-9mi49cxu7t] {
    color: var(--bs-primary);
}

.bottom-nav-item.active .nav-icon-wrapper[b-9mi49cxu7t] {
    transform: scale(1.1);
}

.nav-icon-wrapper[b-9mi49cxu7t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.nav-item-label[b-9mi49cxu7t] {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: inherit;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    align-self: stretch;
    flex-shrink: 0;
    min-width: 0;
}

.nav-item-label.is-truncated[b-9mi49cxu7t] {
    text-align: start;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 769px) {
    .bottom-nav[b-9mi49cxu7t] {
        display: none;
    }
}

@media (max-width: 480px) {
    .bottom-nav[b-9mi49cxu7t] {
        padding: 0 12px 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav-island[b-9mi49cxu7t] {
        padding: 10px 16px;
        border-radius: 5px;
        max-width: calc(100%);
    }

    .bottom-nav-item[b-9mi49cxu7t] {
        padding-inline: 2px;
        min-width: 44px;
    }

    .nav-icon-wrapper[b-9mi49cxu7t] {
        width: 22px;
        height: 22px;
    }

    .nav-item-label[b-9mi49cxu7t] {
        font-size: 11px;
        line-height: 14px;
    }
}

@media (max-width: 360px) {
    .bottom-nav-island[b-9mi49cxu7t] {
        padding: 8px 12px;
        border-radius: 5px;
    }

    .bottom-nav-item[b-9mi49cxu7t] {
        padding-inline: 1px;
    }
}

/* ========== OFFLINE-DISABLED STATE ========== */
.bottom-nav-offline[b-9mi49cxu7t] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.bottom-nav-offline .nav-icon-wrapper[b-9mi49cxu7t] {
    filter: grayscale(0.4);
}

.bottom-nav-offline .nav-item-label[b-9mi49cxu7t] {
    color: var(--bs-secondary);
}

.offline-badge-mobile[b-9mi49cxu7t] {
    position: absolute;
    bottom: -2px;
    right: -4px;
    color: var(--bs-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--bs-white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border: 1.5px solid var(--bs-white);
    pointer-events: none;
    z-index: 3;
}

/* ========== PENDING APPROVALS BADGE ========== */
.nav-pending-badge[b-9mi49cxu7t] {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--bs-danger);
    color: var(--bs-white);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--bs-white);
    animation: badge-pulse-b-9mi49cxu7t 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes badge-pulse-b-9mi49cxu7t {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), 0);
    }
}

/* ========== NAVBAR OVERRIDE (custom content slot) ========== */
.bottom-nav-custom-content[b-9mi49cxu7t] {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
}
/* /Shared/Components/NetworkStatusIndicator.razor.rz.scp.css */
/* Network Status Indicator */
.network-status[b-szuer2bkmu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    min-width: max-content;
}

.network-status.online[b-szuer2bkmu] {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--bs-success);
}

.network-status.offline[b-szuer2bkmu] {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.network-icon[b-szuer2bkmu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.network-text[b-szuer2bkmu] {
    font-weight: 500;
}

/* Pulse animation for offline state */
.network-status.offline .network-icon[b-szuer2bkmu] {
    animation: pulse-b-szuer2bkmu 2s ease-in-out infinite;
}

@keyframes pulse-b-szuer2bkmu {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .network-status[b-szuer2bkmu] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    
    .network-text[b-szuer2bkmu] {
        display: none;
    }
}

/* Extra small - for mobile header (icon only) */
@media (max-width: 576px) {
    .network-status[b-szuer2bkmu] {
        padding: 4px;
        background-color: transparent !important;
        border-radius: 50%;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }
    
    .network-status.offline[b-szuer2bkmu] {
        background-color: transparent !important;
    }
    
    .network-status.online[b-szuer2bkmu] {
        background-color: transparent !important;
    }
}
/* /Shared/Components/PwaUpdateButton.razor.rz.scp.css */
/* ===== PWA UPDATE FLOATING BUTTON ===== */
.pwa-update-fab[b-04nxt65nm6] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 100px;
    background: var(--bs-primary);
    color: var(--color-black);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-primary) !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    animation: pwa-pulse-b-04nxt65nm6 2s ease-in-out infinite;
}

/* On mobile: float above the bottom nav bar (96px) */
@media (max-width: 767px) {
    .pwa-update-fab[b-04nxt65nm6] {
        bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }
}

@media (hover: hover) {
    .pwa-update-fab:hover[b-04nxt65nm6] {
        background-color: var(--color-yellow-bright);
        transform: translateX(-50%) translateY(-1px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
    }
}

.pwa-update-fab:active[b-04nxt65nm6] {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.pwa-update-icon[b-04nxt65nm6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes pwa-pulse-b-04nxt65nm6 {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.45), 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    50% {
        transform: translateX(-50%) scale(1.06);
        box-shadow: 0 6px 28px rgba(var(--bs-primary-rgb), 0.65), 0 2px 10px rgba(0, 0, 0, 0.15);
    }
}
/* /Shared/Components/StepProgressRing.razor.rz.scp.css */
/* ── Container ─────────────────────────────────────────────────────────── */

.step-progress-ring[b-cph40ob533] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* ── SVG ring ───────────────────────────────────────────────────────────── */

.ring-svg[b-cph40ob533] {
    flex-shrink: 0;
}

/* Animated progress arc — transition is applied via JS (stepRing.animate) for reliable
   cross-browser SVG animation. The rule below is kept as a fallback / reduced-motion override. */
.ring-progress[b-cph40ob533] {
    /* No CSS transition here; JS sets it dynamically. */
}

@media (prefers-reduced-motion: reduce) {
    .ring-progress[b-cph40ob533] {
        transition: none !important;
    }
}

/* Step number — larger, bold */
.ring-text-step[b-cph40ob533] {
    font-size: 1rem;
    font-weight: 700;
    fill: var(--color-text-primary, currentColor);
}

/* "of N" — smaller, muted */
.ring-text-total[b-cph40ob533] {
    font-size: 0.625rem;
    font-weight: 400;
    fill: var(--color-text-muted, #6c757d);
}

/* ── Breadcrumb area ────────────────────────────────────────────────────── */

.ring-breadcrumb[b-cph40ob533] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: right;
    margin-left: auto;
}

.ring-text-group[b-cph40ob533] {
    transform-box: fill-box;
}

@keyframes ring-span-fade-in-b-cph40ob533 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ring-module-parent[b-cph40ob533],
.ring-module-name[b-cph40ob533],
.ring-one-of-label[b-cph40ob533] {
    animation: ring-span-fade-in-b-cph40ob533 250ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ring-module-parent[b-cph40ob533],
    .ring-module-name[b-cph40ob533],
    .ring-one-of-label[b-cph40ob533] {
        animation: none;
    }
}

/* Current (deepest) module name */
.ring-module-name[b-cph40ob533] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, inherit);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ancestor module names */
.ring-module-parent[b-cph40ob533] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted, #6c757d);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ONE_OF group subtitle */
.ring-one-of-label[b-cph40ob533] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted, #6c757d);
    line-height: 1.3;
}

.ring-one-of-emphasis[b-cph40ob533] {
    color: var(--bs-primary);
    font-weight: 600;
}
/* /Shared/Components/SupportRequestsHeaderButton.razor.rz.scp.css */
.support-requests-header-btn[b-5mkvh83q48] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-black);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.support-requests-header-btn:disabled[b-5mkvh83q48] {
    opacity: 0.5;
    cursor: not-allowed;
}

.support-requests-header-btn-icon[b-5mkvh83q48] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-black);
}

.support-requests-pending-badge[b-5mkvh83q48] {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--bs-danger);
    color: var(--bs-white);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--bs-white);
    pointer-events: none;
}
/* /Shared/Components/SyncStatusIndicator.razor.rz.scp.css */
/* Sync Status Indicator */
.sync-status[b-6hkz0b81bx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    min-width: max-content;
}

.sync-status.online[b-6hkz0b81bx] {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--bs-success);
}

.sync-status.offline[b-6hkz0b81bx] {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.sync-status.syncing[b-6hkz0b81bx] {
    background-color: var(--bs-primary);
    color: #000;
}

.sync-status.stuck[b-6hkz0b81bx] {
    background-color: rgba(255, 193, 7, 0.15);
    color: var(--bs-warning);
    cursor: pointer;
}

.sync-icon[b-6hkz0b81bx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sync-icon.syncing[b-6hkz0b81bx] {
    animation: spin-b-6hkz0b81bx 1s linear infinite;
}

.sync-text[b-6hkz0b81bx] {
    font-weight: 500;
}

@keyframes spin-b-6hkz0b81bx {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sync-status[b-6hkz0b81bx] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    
    .sync-text[b-6hkz0b81bx] {
        display: none;
    }
}

/* Extra small - for mobile header (icon only) */
@media (max-width: 576px) {
    .sync-status[b-6hkz0b81bx] {
        padding: 4px;
        background-color: transparent !important;
        border-radius: 50%;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }
    
    .sync-status.online[b-6hkz0b81bx] {
        background-color: transparent !important;
    }
    
    .sync-status.offline[b-6hkz0b81bx] {
        background-color: transparent !important;
    }
    
    .sync-status.syncing[b-6hkz0b81bx] {
        background-color: transparent !important;
    }

    .sync-status.stuck[b-6hkz0b81bx] {
        background-color: transparent !important;
        color: var(--bs-warning);
    }
}
/* /Shared/Components/TableContentPlaceholder.razor.rz.scp.css */
.table-content-placeholder[b-7up5eiw053] {
    width: 100%;
    min-height: calc(52px + var(--table-placeholder-rows, 10) * 49px);
}
/* /Shared/Components/TicketMessage.razor.rz.scp.css */
.ticket-message[b-mn7d31pepi] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: min(85%, 36rem);
}

.ticket-message--own[b-mn7d31pepi] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ticket-message--other[b-mn7d31pepi] {
    align-self: flex-start;
}

.ticket-message-avatar[b-mn7d31pepi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    color: var(--bs-black, #000);
    flex-shrink: 0;
}

.ticket-message-content[b-mn7d31pepi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ticket-message-meta[b-mn7d31pepi] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0 0.25rem;
}

.ticket-message--own .ticket-message-meta[b-mn7d31pepi] {
    flex-direction: row-reverse;
}

.ticket-message-author[b-mn7d31pepi] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary, #212529);
}

.ticket-message-time[b-mn7d31pepi] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6c757d);
}

.ticket-message-bubble[b-mn7d31pepi] {
    --ticket-message-bubble-border: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    --ticket-message-bubble-bg: var(--bs-white, #fff);

    position: relative;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ticket-message-bubble-border);
    border-radius: 0.75rem;
    background: var(--ticket-message-bubble-bg);
    color: var(--bs-black, #000);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ticket-message--own .ticket-message-bubble[b-mn7d31pepi] {
    --ticket-message-bubble-bg: color-mix(in srgb, var(--bs-primary) 50%, transparent);
}

.ticket-message--other .ticket-message-bubble[b-mn7d31pepi]::before,
.ticket-message--other .ticket-message-bubble[b-mn7d31pepi]::after {
    content: "";
    position: absolute;
    bottom: 0.625rem;
    width: 0;
    height: 0;
    border-style: solid;
}

.ticket-message--other .ticket-message-bubble[b-mn7d31pepi]::before {
    left: -7px;
    border-width: 6px 7px 6px 0;
    border-color: transparent var(--ticket-message-bubble-border) transparent transparent;
}

.ticket-message--other .ticket-message-bubble[b-mn7d31pepi]::after {
    left: -6px;
    border-width: 5px 6px 5px 0;
    border-color: transparent var(--ticket-message-bubble-bg) transparent transparent;
}

.ticket-message--own .ticket-message-bubble[b-mn7d31pepi]::before,
.ticket-message--own .ticket-message-bubble[b-mn7d31pepi]::after {
    content: "";
    position: absolute;
    bottom: 0.625rem;
    width: 0;
    height: 0;
    border-style: solid;
}

.ticket-message--own .ticket-message-bubble[b-mn7d31pepi]::before {
    right: -7px;
    border-width: 6px 0 6px 7px;
    border-color: transparent transparent transparent var(--ticket-message-bubble-border);
}

.ticket-message--own .ticket-message-bubble[b-mn7d31pepi]::after {
    right: -6px;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--ticket-message-bubble-bg);
}
/* /Shared/Layouts/AuthLayout.razor.rz.scp.css */
.auth-layout[b-ou7g4mks3o] {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    overflow-y: auto;
}

.auth-container[b-ou7g4mks3o] {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
}



.auth-layout-version[b-ou7g4mks3o] {
    position: static;
}

.auth-footer[b-ou7g4mks3o] {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 639px) {
    .auth-layout[b-ou7g4mks3o] {
        padding: 0;
    }

    .auth-container[b-ou7g4mks3o] {
        padding: 0.5rem;
    }
}
/* /Shared/Layouts/DesktopLayout.razor.rz.scp.css */
.desktop-layout[b-lrj0ljg8sr] {
    height: calc(100dvh - 64px);
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.desktop-container[b-lrj0ljg8sr] {
    width: 100%;
    padding: 1rem 2rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.desktop-header[b-lrj0ljg8sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.status-indicators[b-lrj0ljg8sr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* /Shared/Layouts/MobileLayout.razor.rz.scp.css */
.mobile-layout[b-te9z0pvoh2] {
    display: flex;
    flex-direction: column;
    /* Lock the layout to the viewport so only .mobile-container scrolls,
       preventing the header from being pulled off screen on mobile. */
    height: 100%;
    height: -webkit-fill-available;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Mobile Header - Respects safe area */
.mobile-header[b-te9z0pvoh2] {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    touch-action: none;
    overscroll-behavior: none;
    /* Base height */
    height: 56px;
    /* Add safe area to height if supported */
    height: calc(56px + env(safe-area-inset-top, 0px));
    
    padding: 0 12px;
    /* Add safe area padding with fallbacks */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    
    background: var(--bs-white);
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mobile-header-left[b-te9z0pvoh2] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

.mobile-header-title[b-te9z0pvoh2] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bs-dark);
    white-space: nowrap;
}

.mobile-back-btn[b-te9z0pvoh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--bs-primary);
    cursor: pointer;
    padding: 0;
    margin: -4px 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.15s ease;
}

.mobile-back-btn:active[b-te9z0pvoh2] {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

@media (hover: hover) {
    .mobile-back-btn:hover[b-te9z0pvoh2] {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
    }
}

.mobile-back-btn:focus-visible[b-te9z0pvoh2] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.mobile-logo[b-te9z0pvoh2] {
    height: 28px;
    width: auto;
}

.mobile-header-right[b-te9z0pvoh2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-header-title[b-te9z0pvoh2] {
    flex: 1;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    text-transform: uppercase;
}

.mobile-container[b-te9z0pvoh2] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    /* Bottom padding clears the fixed bottom-nav island (~64px island + 20px padding + safe area) */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    position: relative;
}

/* Legacy CSS animation classes kept only as safety fallback — applySlide now uses inline styles */
.mobile-container.slide-from-right[b-te9z0pvoh2],
.mobile-container.slide-left[b-te9z0pvoh2],
.mobile-container.slide-from-left[b-te9z0pvoh2],
.mobile-container.slide-right[b-te9z0pvoh2] {
    /* intentionally empty — inline transitions drive all animations */
}

/* Ticket detail: break the flex-fill so content can grow taller than the viewport and #mobile-main scrolls */
@media (max-width: 768px) {
    .mobile-container:has(.ticket-detail-container) .ticket-detail-container[b-te9z0pvoh2] {
        flex: none;
    }

    .mobile-container:has(.ticket-detail-container) .ticket-detail-content[b-te9z0pvoh2] {
        flex: none;
    }
}