/* /Areas/Admin/Components/ModuleBuilderSkeleton.razor.rz.scp.css */
/* ========== MODULE BUILDER SKELETON ========== */

/* ── Tab bar ─────────────────────────────────────────── */

.mbs-skel-tabs[b-mit6bl3oxh] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* ── Split layout — mirrors .module-builder-split ─────── */

.mbs-skel-split[b-mit6bl3oxh] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: start;
}

/* ── Tree panel ─────────────────────────────────────── */

.mbs-skel-tree-panel[b-mit6bl3oxh] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.mbs-skel-tree-header[b-mit6bl3oxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem 0.4rem;
    border-bottom: 1px solid #f1f5f9;
}

.mbs-skel-tree-title[b-mit6bl3oxh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mbs-skel-tree-btns[b-mit6bl3oxh] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.mbs-skel-tree-body[b-mit6bl3oxh] {
    padding: 0.25rem 0.1rem;
    display: flex;
    flex-direction: column;
}

/* Node row — mirrors .tree-node-row */
.mbs-skel-tree-node[b-mit6bl3oxh] {
    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-mit6bl3oxh] {
    height: 28px;
}

/* Badge pushed to the right */
.mbs-skel-badge[b-mit6bl3oxh] {
    margin-left: auto;
}

/* ── Editor panel ────────────────────────────────────── */

.mbs-skel-editor-panel[b-mit6bl3oxh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Mobile tree toggle — mirrors .module-builder-tree-toggle-btn */
.mbs-skel-tree-toggle[b-mit6bl3oxh] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* ── Editor card ─────────────────────────────────────── */

.mbs-skel-card[b-mit6bl3oxh] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.mbs-skel-card-head[b-mit6bl3oxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.mbs-skel-card-head-actions[b-mit6bl3oxh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mbs-skel-card-body[b-mit6bl3oxh] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Form elements ───────────────────────────────────── */

.mbs-skel-field[b-mit6bl3oxh] {
    display: flex;
    flex-direction: column;
}

.mbs-skel-field-2col[b-mit6bl3oxh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mbs-skel-checkbox[b-mit6bl3oxh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Mobile (<= 900px) ───────────────────────────────── */

@media (max-width: 900px) {
    .mbs-skel-split[b-mit6bl3oxh] {
        grid-template-columns: 1fr;
    }

    .mbs-skel-tree-panel[b-mit6bl3oxh] {
        display: none;
    }

    .mbs-skel-tree-toggle[b-mit6bl3oxh] {
        display: flex;
    }
}
/* /Areas/Admin/Components/ModuleEditorInner.razor.rz.scp.css */
.module-editor-form[b-dh7q4u2iex] {
    margin-bottom: 1rem;
}

.module-editor-row[b-dh7q4u2iex] {
    margin-bottom: 0.75rem;
}

.module-editor-row-inline[b-dh7q4u2iex] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

.module-editor-section-block[b-dh7q4u2iex] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.module-editor-section-header[b-dh7q4u2iex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.module-editor-section-label[b-dh7q4u2iex] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.module-editor-empty[b-dh7q4u2iex] {
    text-align: center;
    padding: 1.5rem;
    color: #64748b;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #e2e8f0;
    font-size: 0.875rem;
}

/* ========== ACCORDION LIST STYLES ========== */
.module-editor-submodules-list[b-dh7q4u2iex],
.module-editor-sections-list[b-dh7q4u2iex] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordion-submodule-content[b-dh7q4u2iex],
.accordion-section-content[b-dh7q4u2iex] {
    padding: 0.5rem 0;
}

/* ========== MODULE RULE GROUPING ========== */
.module-editor-rule-group[b-dh7q4u2iex] {
    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-dh7q4u2iex] {
    background: #fffbeb;
    border: 2px solid var(--bs-primary);
}

.module-editor-rule-group[data-rule="ONE_OF"] .module-editor-rule-label[b-dh7q4u2iex] {
    background: var(--bs-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.module-editor-rule-label[b-dh7q4u2iex] {
    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-dh7q4u2iex] {
    font-size: 1rem;
    font-weight: 700;
}

.module-editor-submodules-list[b-dh7q4u2iex] {
    position: relative;
}

.module-editor-rule-group .module-editor-submodules-list[b-dh7q4u2iex] {
    padding: 0 0.5rem;
}

/* OneOf visual separator between siblings */
.module-editor-submodule-wrapper[data-rule-group="true"][b-dh7q4u2iex] {
    position: relative;
}

.module-editor-submodule-wrapper[data-rule-group="true"]:not(:first-child)[b-dh7q4u2iex]::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-dh7q4u2iex] {
        flex-direction: column;
        align-items: stretch;
    }

    .module-editor-row-inline[b-dh7q4u2iex] {
        grid-template-columns: 1fr;
    }

    .module-editor-rule-group[b-dh7q4u2iex] {
        padding: 1rem;
        padding-top: 2.5rem;
    }
}

/* Optional Resource Types */
.optional-resource-types-list[b-dh7q4u2iex] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.optional-resource-type-item[b-dh7q4u2iex] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.optional-resource-type-fields[b-dh7q4u2iex] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    flex: 1;
}

/* /Areas/Admin/Components/ModulesOverviewSkeleton.razor.rz.scp.css */
/* ========== MODULES OVERVIEW SKELETON ========== */

/* Card grid — mirrors modules-grid from ModulesOverview.razor.css */
.modules-skel-grid[b-ghh324116e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Simulated card header row inside ChildContent */
.modules-skel-card-head[b-ghh324116e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Stack to one column on small screens, matching real grid */
@media (max-width: 640px) {
    .modules-skel-grid[b-ghh324116e] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Admin/Components/NotificationRulesEditor.razor.rz.scp.css */
/* New rule creation panel */

.notif-new-rule-panel[b-fn3fwj3tg5] {
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--app-border-color, #dee2e6);
    border-top: 3px solid var(--bs-primary, #0d6efd);
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.notif-new-rule-panel-heading[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-primary, #0d6efd);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-border-color, #dee2e6);
}

/* Rule meta / section layout (inside AppAccordionSection body) */

.notif-rule-meta[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--app-text-muted, #6c757d);
    border-bottom: 1px solid var(--app-border-color, #dee2e6);
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.notif-rule-meta-sep[b-fn3fwj3tg5] {
    opacity: 0.5;
}

.notif-rule-section[b-fn3fwj3tg5] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--app-border-color, #dee2e6);
}

.notif-rule-section--last[b-fn3fwj3tg5] {
    border-bottom: none;
    padding-bottom: 0;
}

.notif-rule-section-header[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.notif-rule-section-title[b-fn3fwj3tg5] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted, #6c757d);
}

.notif-empty-hint[b-fn3fwj3tg5] {
    font-size: 0.8rem;
    color: var(--app-text-muted, #6c757d);
    margin: 0.25rem 0 0;
    font-style: italic;
}

.notif-active-field[b-fn3fwj3tg5] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notif-active-hint[b-fn3fwj3tg5] {
    font-size: 0.78rem;
    color: var(--bs-danger, #dc3545);
    margin: -18px 0 0;
    font-style: italic;
}

/* Inline edit form inside accordion body */

.notif-rule-edit-body[b-fn3fwj3tg5] {
    margin: -1.25rem;
    padding: 1.25rem;
    background: rgba(13, 110, 253, 0.03);
    border-top: 2px solid var(--bs-primary, #0d6efd);
}

.notif-rule-edit-heading[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--app-text-muted, #6c757d);
    margin-bottom: 0.75rem;
}

/* Condition builder */

.condition-builder[b-fn3fwj3tg5] {
    background: var(--app-surface-alt, #f8f9fa);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.condition-sentence-row[b-fn3fwj3tg5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.condition-sentence-row > *[b-fn3fwj3tg5] {
    flex: 1 1 160px;
    min-width: 0;
}

.condition-sentence-when[b-fn3fwj3tg5] {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text-muted, #6c757d);
    padding-bottom: 0.35rem;
    white-space: nowrap;
}

/* Condition chain display */

.condition-chain[b-fn3fwj3tg5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.condition-block[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.condition-connector[b-fn3fwj3tg5] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-muted, #6c757d);
    background: var(--app-surface-alt, #f0f0f0);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.condition-pill[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--app-surface-alt, #f8f9fa);
    border: 1px solid var(--app-border-color, #dee2e6);
    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-fn3fwj3tg5] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recipient groups (tag-input style) */

.recipient-group[b-fn3fwj3tg5] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--app-border-color, #dee2e6);
}

.recipient-group:last-child[b-fn3fwj3tg5] {
    border-bottom: none;
}

.recipient-group-label[b-fn3fwj3tg5] {
    flex: 0 0 2.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted, #6c757d);
    padding-top: 0.3rem;
    text-align: right;
}

.recipient-group-body[b-fn3fwj3tg5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.recipient-tag-row[b-fn3fwj3tg5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
}

.recipient-tag[b-fn3fwj3tg5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.35rem 0.2rem 0.6rem;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    border: 1px solid var(--bs-primary-border-subtle, #9ec5fe);
    border-radius: 1rem;
    font-size: 0.8rem;
    color: var(--bs-primary-text-emphasis, #052c65);
    max-width: 100%;
}

.recipient-tag-text[b-fn3fwj3tg5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.recipient-tag[b-fn3fwj3tg5]  .app-button.recipient-tag-remove {
    background: none;
    border: none;
}

/* Attachment section */

.attachment-add-form[b-fn3fwj3tg5] {
    background: var(--app-surface-alt, #f8f9fa);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.attachment-type-description[b-fn3fwj3tg5] {
    font-size: 0.8rem;
    color: var(--app-text-muted, #6c757d);
    font-style: italic;
    margin: -0.25rem 0 0.5rem;
}

.attachment-list[b-fn3fwj3tg5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.attachment-item[b-fn3fwj3tg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--app-surface-alt, #f8f9fa);
    border: 1px solid var(--app-border-color, #dee2e6);
    border-radius: 6px;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
}

.attachment-item-body[b-fn3fwj3tg5] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.attachment-item-label[b-fn3fwj3tg5] {
    font-size: 0.85rem;
    font-weight: 500;
}

.attachment-item-desc[b-fn3fwj3tg5] {
    font-size: 0.77rem;
    color: var(--app-text-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    color: inherit;
    opacity: 0.45;
    padding: 0;
    box-shadow: none;
    line-height: 1;
    min-width: 0;[b-fn3fwj3tg5]
}

.recipient-tag[b-fn3fwj3tg5]  .app-button.recipient-tag-remove:hover:not(:disabled) {
    background: none;
    opacity: 1;
    color: var(--bs-danger, #dc3545);
    box-shadow: none;
}

.recipient-add-form[b-fn3fwj3tg5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--app-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.625rem;
}

.recipient-add-form > *[b-fn3fwj3tg5] {
    flex: 1 1 150px;
    min-width: 0;
}

.recipient-add-actions[b-fn3fwj3tg5] {
    flex: 0 0 auto !important;
    display: flex;
    gap: 0.25rem;
    align-items: flex-end;
}
/* /Areas/Admin/Components/PredefinedAnswerEditor.razor.rz.scp.css */
.answer-editor[b-hy975d7dte] {
    margin-bottom: 0.5rem;
}

.answer-editor-row[b-hy975d7dte] {
    display: grid;
    grid-template-columns: auto 1fr 80px auto;
    gap: 0.5rem;
    align-items: center;
}

.answer-editor-index[b-hy975d7dte] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    min-width: 1.5rem;
    text-align: center;
}
/* /Areas/Admin/Components/QuestionEditor.razor.rz.scp.css */
.question-editor-body[b-3zxiaqftfo] {
    padding: 1rem 0;
}

.question-editor-form-row[b-3zxiaqftfo] {
    margin-bottom: 0.75rem;
}

.question-editor-form-row-inline[b-3zxiaqftfo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.question-editor-select-wrapper[b-3zxiaqftfo] {
    display: flex;
    flex-direction: column;
}

.question-editor-select[b-3zxiaqftfo] {
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--surface-color, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color 0.2s;
}

.question-editor-select:focus[b-3zxiaqftfo] {
    border-color: var(--primary-color, #3b82f6);
}

.question-editor-checkboxes[b-3zxiaqftfo] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.question-editor-checkbox[b-3zxiaqftfo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}

.question-editor-checkbox input[type="checkbox"][b-3zxiaqftfo] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color, #3b82f6);
}

.question-editor-answers[b-3zxiaqftfo] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.question-editor-answers-header[b-3zxiaqftfo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.question-editor-answers-title[b-3zxiaqftfo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

/* ========== Date/Time Mode Toggle ========== */
.datetime-mode-toggle[b-3zxiaqftfo] {
    display: flex;
    gap: 0;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 3px;
    width: fit-content;
}

.datetime-mode-btn[b-3zxiaqftfo] {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    color: #68707d;
    cursor: pointer;
    transition: all 0.15s ease;
}

.datetime-mode-btn:hover:not(.is-active)[b-3zxiaqftfo] {
    color: var(--text-primary, #1e293b);
    background: rgba(255, 255, 255, 0.5);
}

.datetime-mode-btn.is-active[b-3zxiaqftfo] {
    background: #ffffff;
    color: var(--text-primary, #1e293b);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* /Areas/Admin/Components/SectionEditor.razor.rz.scp.css */
.section-editor-form-row[b-dv5l407oe2] {
    margin-bottom: 1rem;
}

.section-editor-form-row-inline[b-dv5l407oe2] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.section-editor-questions[b-dv5l407oe2] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.section-editor-questions-header[b-dv5l407oe2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-editor-questions-title[b-dv5l407oe2] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1e293b);
}
/* /Areas/Admin/Pages/ModuleBuilder.razor.rz.scp.css */
.builder-section[b-c749fx8tag] {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.builder-checkbox[b-c749fx8tag] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}

.builder-checkbox input[type="checkbox"][b-c749fx8tag] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #3b82f6);
}

.builder-empty-state[b-c749fx8tag] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary, #64748b);
    background: var(--surface-secondary, #f8fafc);
    border-radius: 8px;
    border: 1px dashed var(--border-color, #e2e8f0);
}

.child-module-card[b-c749fx8tag] {
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.child-module-header[b-c749fx8tag] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.child-module-title-row[b-c749fx8tag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child-module-title[b-c749fx8tag] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1e293b);
}

.d-flex[b-c749fx8tag] {
    display: flex;
}

.gap-3[b-c749fx8tag] {
    gap: 1rem;
}

.alert[b-c749fx8tag] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.alert-danger[b-c749fx8tag] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.mb-3[b-c749fx8tag] {
    margin-bottom: 1rem;
}

/* ========== TREE + EDITOR SPLIT LAYOUT ========== */
.module-builder-split[b-c749fx8tag] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: start;
    min-height: 0;
}

/* ── Tree panel ─────────────────────────────────── */

.module-builder-tree-panel[b-c749fx8tag] {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.module-builder-tree-header[b-c749fx8tag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem 0.4rem;
    border-bottom: 1px solid #f1f5f9;
}

.module-builder-tree-header-actions[b-c749fx8tag] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.module-builder-tree-icon-btn[b-c749fx8tag] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.module-builder-tree-icon-btn:hover[b-c749fx8tag] {
    background: #f1f5f9;
    color: #1e293b;
}

/* ── Tree node action buttons (inline icon buttons in NodeActions) ── */

.tree-node-action-btn[b-c749fx8tag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

.tree-node-action-btn:hover[b-c749fx8tag] {
    background: #e2e8f0;
    color: #475569;
}

.tree-node-action-btn.danger:hover[b-c749fx8tag] {
    background: #fee2e2;
    color: var(--color-red);
}

/* ── Editor panel card appear animation ─────────── */

@keyframes editor-card-appear-b-c749fx8tag {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.module-builder-editor-card-wrapper[b-c749fx8tag] {
    animation: editor-card-appear-b-c749fx8tag 0.18s ease;
}

.module-builder-tree-title[b-c749fx8tag] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.module-builder-tree-close[b-c749fx8tag] {
    display: none;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
}

.module-builder-tree-close:hover[b-c749fx8tag] {
    background: #f1f5f9;
    color: #1e293b;
}

/* ── Editor panel ───────────────────────────────── */

.module-builder-editor-panel[b-c749fx8tag] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Mobile toggle button (hidden on desktop) ───── */

.module-builder-tree-toggle-btn[b-c749fx8tag] {
    display: none;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
}

.module-builder-tree-toggle-btn:hover[b-c749fx8tag] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.module-builder-tree-toggle-btn span[b-c749fx8tag] {
    flex: 1;
}

/* ── Mobile (<= 900px) ──────────────────────────── */

@media (max-width: 900px) {
    .module-builder-split[b-c749fx8tag] {
        grid-template-columns: 1fr;
    }

    /* Tree panel hidden on mobile — shown via AppBottomSheet */
    .module-builder-tree-panel[b-c749fx8tag] {
        display: none;
    }

    .module-builder-tree-toggle-btn[b-c749fx8tag] {
        display: flex;
    }
}


.module-builder-sheet-tree-actions[b-c749fx8tag] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.25rem;
}


.builder-section-header[b-c749fx8tag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.builder-section-title[b-c749fx8tag] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--text-primary, #1e293b);
}

.builder-section-header .builder-section-title[b-c749fx8tag] {
    margin-bottom: 0;
}

.builder-form-row[b-c749fx8tag] {
    margin-bottom: 1rem;
}

.builder-form-row-inline[b-c749fx8tag] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ========== GROUP EDITOR PANEL ========== */

.group-editor-section[b-c749fx8tag] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-editor-section-header[b-c749fx8tag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.group-editor-section-label[b-c749fx8tag] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.group-editor-empty[b-c749fx8tag] {
    font-size: 0.85rem;
    color: #94a3b8;
    padding: 0.5rem 0;
}

.group-question-list[b-c749fx8tag] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.group-question-item[b-c749fx8tag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    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-c749fx8tag] {
    background: #fee2e2;
    border-color: #fca5a5;
}

.group-question-item--member:hover .group-question-label[b-c749fx8tag] {
    color: #991b1b;
}

.group-question-item--available:hover[b-c749fx8tag] {
    background: #eff6ff;
    border-color: #93c5fd;
}

.group-question-item--available:hover .group-question-label[b-c749fx8tag] {
    color: #1d4ed8;
}

.group-question-label[b-c749fx8tag] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
}

/* /Areas/Admin/Pages/ModulesOverview.razor.rz.scp.css */
.overview-actions[b-rnc9p82vrl] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.modules-grid[b-rnc9p82vrl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.module-card-badges[b-rnc9p82vrl] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.module-card-header-left[b-rnc9p82vrl] {
    display: flex;
    align-items: center;
    color: var(--bs-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.module-card-body[b-rnc9p82vrl] {
    display: flex;
    gap: 1.5rem;
}

.module-card-stat[b-rnc9p82vrl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-rnc9p82vrl] {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-rnc9p82vrl] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}
/* /Areas/Approvals/Components/AccessRequestsOverviewSkeleton.razor.rz.scp.css */
/* ========== ACCESS REQUESTS OVERVIEW SKELETON ========== */

/* Table shell — mirrors .app-table-container */
.ar-skel-table[b-5vvbaruch1] {
    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;
}

/* Horizontal scroll wrapper — same as .app-table-scroll */
.ar-skel-scroll[b-5vvbaruch1] {
    width: 100%;
    overflow-x: auto;
    min-width: 560px;
}

/* Header row */
.ar-skel-head[b-5vvbaruch1] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-300);
}

/* Data rows */
.ar-skel-row[b-5vvbaruch1] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    border-bottom: 1px solid var(--bs-gray-300);
}

.ar-skel-row:last-child[b-5vvbaruch1] {
    border-bottom: none;
}

/* Column widths — match real AppTable column definitions */
.ar-skel-col[b-5vvbaruch1] { flex-shrink: 0; }

.ar-col-reqby[b-5vvbaruch1]   { flex: 0 0 40%; }
.ar-col-status[b-5vvbaruch1]  { flex: 0 0 15%; }
.ar-col-items[b-5vvbaruch1]   { flex: 0 0 15%; }
.ar-col-created[b-5vvbaruch1] { flex: 0 0 15%; }
.ar-col-action[b-5vvbaruch1]  { flex: 0 0 120px; }
/* /Areas/Approvals/Components/ResourceCard.razor.rz.scp.css */
/* ========== CARD CONTAINER ========== */
.resource-card[b-mbxvlalcve] {
    /* 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-mbxvlalcve] {
    /* 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-mbxvlalcve] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* ========== HOVER STATE (DESKTOP) ========== */
.resource-card:hover[b-mbxvlalcve] {
    /* 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-mbxvlalcve] {
    /* 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-mbxvlalcve] {
    /* 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-mbxvlalcve] {
    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-mbxvlalcve] {
        width: 150px;
        height: 130px;
        padding: 14px;
        gap: 6px;
    }

    .resource-title[b-mbxvlalcve] {
        font-size: 0.85rem;
    }
}

/* ========== MOBILE (640px and below) ========== */
@media (max-width: 640px) {
    .resource-card[b-mbxvlalcve] {
        width: 140px;
        height: 120px;
        padding: 12px;
        gap: 6px;
    }

    .resource-title[b-mbxvlalcve] {
        font-size: 0.8rem;
    }
}

/* ========== SMALL MOBILE (480px and below) ========== */
@media (max-width: 480px) {
    .resource-card[b-mbxvlalcve] {
        width: 130px;
        height: 110px;
        padding: 10px;
        gap: 4px;
    }

    .resource-title[b-mbxvlalcve] {
        font-size: 0.75rem;
    }
}

/* ========== ACCESSIBILITY ========== */
.resource-card:focus-visible[b-mbxvlalcve] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.resource-card:focus[b-mbxvlalcve] {
    outline: none;
}
/* /Areas/Approvals/Components/ReviewAccessRequestSkeleton.razor.rz.scp.css */
/* ========== REVIEW ACCESS REQUEST SKELETON ========== */

/* Comment list group — mirrors .app-list-group */
.rv-skel-list-group[b-mitafz6k7f] {
    border-radius: 6px;
    border: 1px solid var(--bs-gray-200);
    background: var(--bs-white);
    box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.rv-skel-list-item[b-mitafz6k7f] {
    padding: 1rem 1.25rem;
}

/* Item review cards — mirrors .page-card */
.rv-skel-item-card[b-mitafz6k7f] {
    background-color: var(--bs-white);
    border: 1px solid #e0e2e7;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
}

.rv-skel-item-head[b-mitafz6k7f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

/* Footer 4-button row — matches AppButtonGroup behavior */
.rv-skel-footer-buttons[b-mitafz6k7f] {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 576px) {
    .rv-skel-footer-buttons[b-mitafz6k7f] {
        flex-wrap: wrap;
    }

    .rv-skel-footer-buttons .app-skeleton[b-mitafz6k7f] {
        flex: 1 1 calc(50% - 0.375rem);
    }
}
/* /Areas/Approvals/Pages/AccessRequestsOverview.razor.rz.scp.css */
.items-badge-group[b-exqehfauju] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.items-badge-group :deep(.app-badge)[b-exqehfauju] {
    display: inline-flex;
    white-space: nowrap;
    font-size: 0.75rem;
}
/* /Areas/Approvals/Pages/ReviewAccessRequest.razor.rz.scp.css */
/* ── Request metadata ─────────────────────────────────────────── */
.request-meta[b-q2gwopdhih] {
    padding: 0.875rem 1.25rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.request-meta-row[b-q2gwopdhih] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.request-meta-label[b-q2gwopdhih] {
    font-weight: 600;
    flex-shrink: 0;
}

.request-meta-value[b-q2gwopdhih] {
    color: var(--bs-secondary-color);
    word-break: break-word;
}

/* ── Section label ────────────────────────────────────────────── */
.section-label[b-q2gwopdhih] {
    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-q2gwopdhih] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Decision buttons (shared by card header + role rows) ─────── */
.decision-buttons[b-q2gwopdhih] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Role items list ──────────────────────────────────────────── */
.role-items[b-q2gwopdhih] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
}

.role-items--blocked[b-q2gwopdhih] {
    opacity: 0.5;
    pointer-events: none;
}

.cascade-notice[b-q2gwopdhih] {
    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-q2gwopdhih] {
    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-q2gwopdhih] {
    border-color: var(--bs-primary);
}

.role-item-info[b-q2gwopdhih] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

.role-name[b-q2gwopdhih] {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decision-buttons--sm[b-q2gwopdhih] {
    gap: 0.375rem;
}

/* ── Comment textarea ─────────────────────────────────────────── */
.item-comment[b-q2gwopdhih] {
    border-top: 1px solid var(--bs-border-color);
}

/* ── Ungrouped / other-resource cards ────────────────────────── */
.ungrouped-items[b-q2gwopdhih] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Resource type tag ────────────────────────────────────────── */
.review-item-type[b-q2gwopdhih] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 576px) {
    .decision-buttons[b-q2gwopdhih] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .role-item[b-q2gwopdhih] {
        flex-direction: column;
        align-items: stretch;
    }

    .role-item-info[b-q2gwopdhih] {
        flex-wrap: wrap;
    }

    .decision-buttons--sm[b-q2gwopdhih] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

/* ── Hint two-column split ────────────────────────────────────── */
.hint-split[b-q2gwopdhih] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1.25rem;
    align-items: start;
}

.hint-split__user[b-q2gwopdhih],
.hint-split__admin[b-q2gwopdhih] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hint-split__user[b-q2gwopdhih] {
    padding-right: 1rem;
    border-right: 1px solid var(--bs-border-color);
}

/* ── Hint panel header ────────────────────────────────────────── */
.hint-panel-title[b-q2gwopdhih] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary);
    margin-bottom: 0.25rem;
}

/* ── Hint field rows (user-side) ──────────────────────────────── */
.hint-field[b-q2gwopdhih] {
    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-q2gwopdhih] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hint-field-value[b-q2gwopdhih] {
    font-size: 0.875rem;
    color: var(--bs-body-color);
    word-break: break-word;
}

/* ── Section label (shared for suggestions + search) ──────────── */
.hint-section-label[b-q2gwopdhih] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary);
    margin-bottom: 0.4rem;
}

.hint-section-count[b-q2gwopdhih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 1rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Suggestions list ─────────────────────────────────────────── */
.hint-suggestions[b-q2gwopdhih] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.hint-suggestions-footer[b-q2gwopdhih] {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ── Score bar + text ─────────────────────────────────────────── */
.hint-score[b-q2gwopdhih] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 5rem;
}

.hint-score-bar[b-q2gwopdhih] {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}

.hint-score-fill[b-q2gwopdhih] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hint-score-fill--success[b-q2gwopdhih] {
    background: linear-gradient(90deg, var(--bs-success), #20c997);
}

.hint-score-fill--warning[b-q2gwopdhih] {
    background: linear-gradient(90deg, var(--bs-warning), #fd7e14);
}

.hint-score-fill--muted[b-q2gwopdhih] {
    background: var(--bs-secondary);
}

.hint-score-text[b-q2gwopdhih] {
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.hint-score-text--success[b-q2gwopdhih] {
    color: var(--bs-success-text-emphasis);
}

.hint-score-text--warning[b-q2gwopdhih] {
    color: var(--bs-warning-text-emphasis);
}

.hint-score-text--muted[b-q2gwopdhih] {
    color: var(--bs-secondary);
}

/* ── Match reasons (inside suggestion card) ───────────────────── */
.hint-match-reasons[b-q2gwopdhih] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hint-match-reason[b-q2gwopdhih] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary);
    overflow: hidden;
}

.hint-match-reason-key[b-q2gwopdhih] {
    font-weight: 700;
    margin-right: 0.2rem;
    color: var(--bs-body-color);
}

.hint-match-reason-values[b-q2gwopdhih] {
    opacity: 0.85;
}

.hint-field-score[b-q2gwopdhih] {
    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-q2gwopdhih] {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--bs-success);
}

.hint-field-score--warning[b-q2gwopdhih] {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning-text-emphasis);
}

.hint-field-score--danger[b-q2gwopdhih] {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

/* ── Search section ───────────────────────────────────────────── */
.hint-search-section--secondary[b-q2gwopdhih] {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color);
    margin-bottom: 2rem;
}

/* Column-filter row inside table thead */
.hint-filter-row th[b-q2gwopdhih] {
    padding: 0.25rem 0.5rem;
    background: var(--bs-tertiary-bg);
}

/* Selected row highlight */
.hint-result-row--selected[b-q2gwopdhih] {
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent) !important;
    outline: 1.5px solid var(--bs-primary);
    outline-offset: -1.5px;
}

/* Col header compact */
.hint-col-header[b-q2gwopdhih] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary);
    padding: 0.5rem 0.5rem 0.1rem;
}

/* ── Mobile: stack hint columns vertically ────────────────────── */
@media (max-width: 768px) {
    .hint-split[b-q2gwopdhih] {
        grid-template-columns: 1fr;
    }

    .hint-split__user[b-q2gwopdhih] {
        padding-right: 0;
        border-right: none;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .hint-suggestions[b-q2gwopdhih] {
        grid-template-columns: 1fr;
    }

    .hint-search-section[b-q2gwopdhih]  .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-81cch8b1td] {
    border: 1px solid #e0e2e7;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.auth-skel-list-item[b-81cch8b1td] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e0e2e7;
}

.auth-skel-list-item:last-child[b-81cch8b1td] {
    border-bottom: none;
}

.auth-skel-notice[b-81cch8b1td] {
    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-6tmeedwcna] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}
/* /Areas/Auth/Pages/EmailConfirmationPage.razor.rz.scp.css */
.auth-card[b-5qfl05fk5u] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.auth-state[b-5qfl05fk5u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.auth-state h2[b-5qfl05fk5u] {
    font-size: 1.4rem;
    font-weight: 600;
}

.auth-state p[b-5qfl05fk5u] {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.auth-state.success h2[b-5qfl05fk5u] {
    color: #16a34a;
}

.auth-state.error h2[b-5qfl05fk5u] {
    color: #dc2626;
}

/* Icon in header title */
:deep(.auth-header .auth-title .app-icon)[b-5qfl05fk5u] {
    margin-right: 0.5rem;
    vertical-align: middle;
    display: inline-block;
}

:deep(.auth-header .auth-title)[b-5qfl05fk5u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* /Areas/Home/Components/ReportFilterPanel.razor.rz.scp.css */
/* ========== HOST: positions the dropdown relative to the trigger ========== */

.filter-panel-host[b-7rawu69cwv] {
    position: relative;
    display: inline-block;
}

/* ========== TRIGGER BUTTON ========== */

.filter-btn[b-7rawu69cwv] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.filter-btn--active[b-7rawu69cwv] {
    /* Highlight the button when filters are active */
    border-color: var(--bs-primary, #6366f1) !important;
    color: var(--bs-primary, #6366f1) !important;
}

.filter-count-badge[b-7rawu69cwv] {
    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-7rawu69cwv] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 400px;
    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-7rawu69cwv 0.15s ease;
}

@keyframes filter-dropdown-appear-b-7rawu69cwv {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.filter-dropdown__header[b-7rawu69cwv] {
    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-7rawu69cwv] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.filter-dropdown__close[b-7rawu69cwv] {
    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-7rawu69cwv] {
    background: #f3f4f6;
    color: #111827;
}

.filter-dropdown__body[b-7rawu69cwv] {
    max-height: 420px;
    overflow-y: auto;
}

/* ========== FILTER SECTIONS (shared desktop + mobile) ========== */

.filter-section[b-7rawu69cwv] {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-section--last[b-7rawu69cwv] {
    border-bottom: none;
}

.filter-section__title[b-7rawu69cwv] {
    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-7rawu69cwv] {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0;
}

.filter-checkbox[b-7rawu69cwv] {
    margin-bottom: 0.375rem;
}

.filter-checkbox:last-of-type[b-7rawu69cwv] {
    margin-bottom: 0;
}

/* ========== CREATOR SEARCH ========== */

.creator-selected[b-7rawu69cwv] {
    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-7rawu69cwv] {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 500;
}

.creator-selected__clear[b-7rawu69cwv] {
    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-7rawu69cwv] {
    background: #dce8fd;
    color: #111827;
}

.creator-results[b-7rawu69cwv] {
    margin-top: 0.375rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.creator-result[b-7rawu69cwv] {
    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-7rawu69cwv] {
    border-bottom: none;
}

.creator-result:hover[b-7rawu69cwv] {
    background: #f9fafb;
}

/* ========== DATE MODE TOGGLE ========== */

.date-mode-toggle[b-7rawu69cwv] {
    display: flex;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.date-mode-btn[b-7rawu69cwv] {
    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-7rawu69cwv] {
    border-left: 1px solid #e5e7eb;
}

.date-mode-btn.active[b-7rawu69cwv] {
    background: var(--bs-primary, #6366f1);
    color: var(--color-black);
    font-weight: 500;
}

.date-mode-btn:not(.active):hover[b-7rawu69cwv] {
    background: #f3f4f6;
    color: #111827;
}

.date-range-row[b-7rawu69cwv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ========== FOOTER ========== */

.filter-footer[b-7rawu69cwv] {
    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-7rawu69cwv] {
        padding: 0.875rem 0;
    }

    .filter-footer[b-7rawu69cwv] {
        padding: 0.75rem 0;
        background: transparent;
        border-top: 1px solid #f3f4f6;
    }
}

/* /Areas/Reports/Components/DateTimeQuestion.razor.rz.scp.css */
.datetime-question[b-fo40ba9x3v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.datetime-question-date[b-fo40ba9x3v],
.datetime-question-time[b-fo40ba9x3v] {
    width: 100%;
}

/* When time picker is disabled, show visual feedback */
.datetime-question-time :deep(.app-input-wrapper.is-disabled)[b-fo40ba9x3v] {
    opacity: 0.6;
}

/* On larger screens, show side by side */
@media (min-width: 576px) {
    .datetime-question[b-fo40ba9x3v] {
        flex-direction: row;
        gap: 1rem;
    }

    .datetime-question-date[b-fo40ba9x3v] {
        flex: 1.2;
    }

    .datetime-question-time[b-fo40ba9x3v] {
        flex: 0.8;
    }
}
/* /Areas/Reports/Components/PredefinedListQuestion.razor.rz.scp.css */
.predefined-list-question[b-lcax4igjmy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.predefined-list-label[b-lcax4igjmy] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
}

.predefined-list-required[b-lcax4igjmy] {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}

.predefined-list-empty[b-lcax4igjmy] {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    padding: 8px 0;
}

.predefined-list-options[b-lcax4igjmy] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.predefined-list-option[b-lcax4igjmy] {
    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-lcax4igjmy] {
    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-lcax4igjmy] {
        background: var(--bs-gray-200);
    }

    .predefined-list-option.selected:not(.disabled):hover[b-lcax4igjmy] {
        background: var(--bs-gray-200);
    }
}

/* Pressed feedback on touch */
.predefined-list-option:not(.disabled):active[b-lcax4igjmy] {
    background: var(--bs-gray-200);
}

/* Selected state */
.predefined-list-option.selected[b-lcax4igjmy] {
    background: var(--bs-gray-100);
    border-left-color: var(--bs-primary);
}

.predefined-list-option.selected .predefined-list-option-text[b-lcax4igjmy] {
    font-weight: 500;
    color: var(--bs-primary);
}

/* Keyboard focus ring */
.predefined-list-option:focus-visible[b-lcax4igjmy] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.predefined-list-option.disabled[b-lcax4igjmy] {
    cursor: not-allowed;
    opacity: 0.6;
}

.predefined-list-option-text[b-lcax4igjmy] {
    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-760wdn1gom] {
    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-760wdn1gom] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header Section */
.question-group-header[b-760wdn1gom] {
    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-760wdn1gom] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.question-group-title h4[b-760wdn1gom] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    flex: 1;
    min-width: 0;
}

.question-group-title[b-760wdn1gom]  .app-icon {
    color: var(--bs-primary);
    flex-shrink: 0;
}

/* Items Container */
.question-group-items[b-760wdn1gom] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Item */
.question-group-item[b-760wdn1gom] {
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 16px;
    transition: all 0.25s ease;
    animation: slideInFade-b-760wdn1gom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.question-group-item:hover[b-760wdn1gom] {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.question-group-item.removing[b-760wdn1gom] {
    animation: slideOutFade-b-760wdn1gom 0.3s cubic-bezier(0.6, -0.28, 0.74, 0.05) forwards;
    pointer-events: none;
}

/* Item Header */
.question-group-item-header[b-760wdn1gom] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-number[b-760wdn1gom] {
    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;
}

.item-description[b-760wdn1gom] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.btn-remove[b-760wdn1gom] {
    border-color: var(--bs-danger) !important;
    color: var(--bs-danger) !important;
    transition: all 0.2s ease;
    align-self: flex-end;
}

.btn-remove:hover:not(:disabled)[b-760wdn1gom] {
    background: var(--bs-danger) !important;
    color: white !important;
    border-color: var(--bs-danger) !important;
    transform: scale(1.05);
}

.btn-remove:active:not(:disabled)[b-760wdn1gom] {
    transform: scale(1);
}

.btn-remove[b-760wdn1gom]  .app-icon {
    transition: transform 0.2s ease;
}

.btn-remove:hover:not(:disabled)[b-760wdn1gom]  .app-icon {
    transform: rotate(20deg);
}

/* Item Fields */
.question-group-item-fields[b-760wdn1gom] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-group-item-fields[b-760wdn1gom]  .question-wrapper {
    margin-bottom: 0;
}

/* Animations */
@keyframes slideInFade-b-760wdn1gom {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideOutFade-b-760wdn1gom {
    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-760wdn1gom] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }

    .question-group-title h4[b-760wdn1gom] {
        font-size: 0.9375rem;
    }

    .question-group-items[b-760wdn1gom] {
        padding: 16px;
        gap: 14px;
    }

    .question-group-item[b-760wdn1gom] {
        padding: 14px;
    }

    .question-group-item-header[b-760wdn1gom] {
        flex-direction: row;
        align-items: center;
    }

    .btn-remove[b-760wdn1gom] {
        width: 100%;
        justify-content: center;
        align-self: stretch;
    }
}

@media (max-width: 480px) {
    .question-group-header[b-760wdn1gom] {
        padding: 14px;
    }

    .question-group-items[b-760wdn1gom] {
        padding: 14px;
        gap: 12px;
    }

    .question-group-item[b-760wdn1gom] {
        padding: 12px;
    }

    .item-number[b-760wdn1gom] {
        min-width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }
}

/* Touch Targets */
@media (hover: none) and (pointer: coarse) {
    .question-group-header[b-760wdn1gom]  .btn,
    .btn-remove[b-760wdn1gom] {
        min-height: 44px;
        padding: 12px 16px;
    }
}

.question-group-pagination[b-760wdn1gom] {
    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-760wdn1gom] {
    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-yb8zzc2tgt] {
    margin-bottom: 24px;
    transition: transform 0.2s ease;
}

.question-wrapper:last-child[b-yb8zzc2tgt] {
    margin-bottom: 0;
}

/* Focus-within styling for better accessibility */
.question-wrapper:focus-within[b-yb8zzc2tgt] {
    transform: scale(1.005);
}
/* /Areas/Reports/Components/ReportFormSkeleton.razor.rz.scp.css */
/* ========== REPORT FORM SKELETON ========== */

/* Progress bar area inside PageHeader */
.rf-skel-progress[b-qaqjed86ll] {
    margin-top: 4px;
}

/* Section cards — mirrors .page-card */
.rf-skel-section[b-qaqjed86ll] {
    background-color: var(--bs-white);
    border: 1px solid #e0e2e7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
}

/* Section title bar — mirrors SectionCard header */
.rf-skel-section-head[b-qaqjed86ll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bs-gray-100);
    border-bottom: 1px solid #e0e2e7;
}

/* Question rows container */
.rf-skel-questions[b-qaqjed86ll] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

/* Individual question block */
.rf-skel-question[b-qaqjed86ll] {
    display: flex;
    flex-direction: column;
}
/* /Areas/Reports/Components/ReportsOverviewSkeleton.razor.rz.scp.css */
/* ========== REPORTS OVERVIEW SKELETON ========== */

/* ── Filter bar ───────────────────────────────────────────────────── */
.reports-skeleton-filters[b-tp733kze8y] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reports-skeleton-filter-item[b-tp733kze8y] {
    min-width: 200px;
}

/* ── Table shell ──────────────────────────────────────────────────── */
/* Matches the visual shape of AppTable without reusing its scoped CSS */
.reports-skeleton-table[b-tp733kze8y] {
    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;
}

/* ── Header row ───────────────────────────────────────────────────── */
.reports-skeleton-table-head[b-tp733kze8y] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    background: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-300);
}

/* ── Data rows ────────────────────────────────────────────────────── */
.reports-skeleton-table-row[b-tp733kze8y] {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 8px;
    border-bottom: 1px solid var(--bs-gray-300);
}

.reports-skeleton-table-row:last-child[b-tp733kze8y] {
    border-bottom: none;
}

/* ── Column cells ─────────────────────────────────────────────────── */
.reports-skeleton-col[b-tp733kze8y] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Mobile cards (hidden on desktop) ────────────────────────────── */
.reports-skeleton-cards[b-tp733kze8y] {
    display: none;
}

@media (max-width: 640px) {
    .reports-skeleton-table[b-tp733kze8y] {
        display: none;
    }

    .reports-skeleton-cards[b-tp733kze8y] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0 -16px;
    }

    .reports-skeleton-card[b-tp733kze8y] {
        background: var(--bs-white);
        border-radius: 6px;
        border: 1px solid var(--color-border);
        margin: 0 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .reports-skeleton-card-row[b-tp733kze8y] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
    }

    .reports-skeleton-card-row:first-child[b-tp733kze8y] {
        padding-top: 20px;
    }

    .reports-skeleton-card-actions[b-tp733kze8y] {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding: 12px 16px;
        border-top: 1px solid var(--color-border-light);
        background-color: var(--color-bg-secondary);
        border-radius: 0 0 12px 12px;
    }
}
/* /Areas/Reports/Components/SectionCard.razor.rz.scp.css */
.section-card[b-6z7e5t6jut] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.section-card:hover[b-6z7e5t6jut] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section-card.expanded[b-6z7e5t6jut] {
    border-color: var(--bs-primary);
}

/* ========== SECTION HEADER ========== */
.section-header[b-6z7e5t6jut] {
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.section-header:hover[b-6z7e5t6jut] {
    background-color: #f9fafb;
}

.section-title-row[b-6z7e5t6jut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-title[b-6z7e5t6jut] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.section-title h4[b-6z7e5t6jut] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.section-status[b-6z7e5t6jut] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-text[b-6z7e5t6jut] {
    font-size: 14px;
    font-weight: 600;
    color: #68707d;
}

/* ========== PROGRESS BAR ========== */
.section-progress-bar[b-6z7e5t6jut] {
    width: 100%;
}

.progress[b-6z7e5t6jut] {
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-6z7e5t6jut] {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.progress-bar.bg-danger[b-6z7e5t6jut] {
    background-color: #ef4444;
}

.progress-bar.bg-warning[b-6z7e5t6jut] {
    background-color: #f59e0b;
}

.progress-bar.bg-success[b-6z7e5t6jut] {
    background-color: #10b981;
}

/* ========== SECTION CONTENT ========== */
.section-content[b-6z7e5t6jut] {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    animation: slideDown-b-6z7e5t6jut 0.3s ease;
}

@keyframes slideDown-b-6z7e5t6jut {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== TEXT SUCCESS ========== */
.text-success[b-6z7e5t6jut] {
    color: #10b981;
}

/* ========== QUESTION STYLES ========== */
.question-hint[b-6z7e5t6jut] {
    display: block;
    font-size: 12px;
    color: #68707d;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .section-card[b-6z7e5t6jut] {
        margin-bottom: 12px;
    }

    .section-header[b-6z7e5t6jut] {
        padding: 14px 16px;
    }

    .section-content[b-6z7e5t6jut] {
        padding: 16px;
    }

    .section-title h4[b-6z7e5t6jut] {
        font-size: 15px;
    }
}
/* /Areas/Reports/Components/SelectModuleSkeleton.razor.rz.scp.css */
/* ========== SELECT MODULE SKELETON ========== */

/* Outer card — mirrors .page-card */
.sm-skel-card[b-vxh9fupe8n] {
    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-vxh9fupe8n] {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #e0e2e7;
}

/* List container — matches .module-list gap */
.sm-skel-list[b-vxh9fupe8n] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each row — mirrors .module-item */
.sm-skel-row[b-vxh9fupe8n] {
    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-vxh9fupe8n] {
    border-bottom: none;
}

.sm-skel-info[b-vxh9fupe8n] {
    display: flex;
    align-items: center;
    flex: 1;
}

@media (max-width: 768px) {
    .sm-skel-row[b-vxh9fupe8n] {
        padding: 14px 16px;
    }
}
/* /Areas/Reports/Pages/ReportFormPage.razor.rz.scp.css */
/* ========== Question grid ========== */
.question-grid[b-wh1v6ef7jl] {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
}

@media (min-width: 600px) and (max-width: 1023px) {
    .question-grid[b-wh1v6ef7jl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .question-grid[b-wh1v6ef7jl] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.report-resource-chips[b-wh1v6ef7jl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.report-resource-chip[b-wh1v6ef7jl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-primary);
    white-space: nowrap;
}

.module-list[b-wh1v6ef7jl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.module-item[b-wh1v6ef7jl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 14px;
}

.module-item-icon[b-wh1v6ef7jl] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bs-primary);
    opacity: 0.85;
}

.module-item:hover[b-wh1v6ef7jl] {
    background: #e9ecef;
    border-color: var(--bs-primary);
    transform: translateX(4px);
}

.module-info[b-wh1v6ef7jl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.module-name[b-wh1v6ef7jl] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-gray-900);
}

@media (max-width: 768px) {
    .module-item[b-wh1v6ef7jl] {
        padding: 14px 16px;
    }

    .module-name[b-wh1v6ef7jl] {
        font-size: 15px;
    }
}

.module-item--disabled[b-wh1v6ef7jl] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    background: #f1f3f5;
    border-color: #dee2e6;
    transform: none !important;
}

.module-item--one-of-active[b-wh1v6ef7jl] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.module-item--one-of-active:hover[b-wh1v6ef7jl] {
    border-color: #d97706;
    background: #fef3c7;
}

.module-item-disabled-reason[b-wh1v6ef7jl] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.3rem;
}

.one-of-divider[b-wh1v6ef7jl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.1em;
    padding: 0 0.5rem;
}

.one-of-divider[b-wh1v6ef7jl]::before,
.one-of-divider[b-wh1v6ef7jl]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
/* /Areas/Settings/Components/ProfilePageSkeleton.razor.rz.scp.css */
/* ========== PROFILE PAGE SKELETON ========== */

.profile-skel[b-fxlzyt7x5a] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Avatar block — mirrors .profile-avatar-section */
.profile-skel-avatar-section[b-fxlzyt7x5a] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-skel-avatar-info[b-fxlzyt7x5a] {
    display: flex;
    flex-direction: column;
}

/* Simulated card header row (icon + title) inside ChildContent */
.profile-skel-card-head[b-fxlzyt7x5a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

/* 2-column input grid — mirrors .profile-form-row */
.profile-skel-form-grid[b-fxlzyt7x5a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Info alert placeholder */
.profile-skel-notice[b-fxlzyt7x5a] {
    padding: 0.75rem 1rem;
    background: rgba(13, 110, 253, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(13, 110, 253, 0.15);
}

/* Stack inputs on small screens — mirrors real profile-form-row breakpoint */
@media (max-width: 576px) {
    .profile-skel-avatar-section[b-fxlzyt7x5a] {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-skel-form-grid[b-fxlzyt7x5a] {
        grid-template-columns: 1fr;
    }
}
/* /Areas/Settings/Components/ResourceHistorySkeleton.razor.rz.scp.css */
/* ========== RESOURCE HISTORY SKELETON ========== */

.rh-skel-list[b-8w7gso5xkh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Card header row: title + badge on left, date on right */
.rh-skel-card-head[b-8w7gso5xkh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.rh-skel-meta[b-8w7gso5xkh] {
    display: flex;
    flex-direction: column;
}
/* /Areas/Settings/Pages/ProfilePage.razor.rz.scp.css */
.profile-page[b-3e04jvaolb] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Avatar */
.profile-avatar-section[b-3e04jvaolb] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-avatar[b-3e04jvaolb] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    user-select: none;
}

.profile-avatar-info h2[b-3e04jvaolb] {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 600;
}

.profile-avatar-info p[b-3e04jvaolb] {
    margin: 0;
    color: var(--bs-secondary);
    font-size: 0.9rem;
}

.profile-form-row[b-3e04jvaolb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.profile-form-actions[b-3e04jvaolb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 576px) {
    .profile-form-row[b-3e04jvaolb] {
        grid-template-columns: 1fr;
    }

    .profile-avatar-section[b-3e04jvaolb] {
        flex-direction: column;
        text-align: center;
    }
}

.profile-card-header-left[b-3e04jvaolb] {
    display: flex;
    align-items: center;
    color: var(--bs-primary);
    opacity: 0.85;
    flex-shrink: 0;
}
/* /Areas/Settings/Pages/ResourceAccessRequestPage.razor.rz.scp.css */
.resource-access-page[b-tnmiwthv6m] {
    margin: 0 auto;
}

.new-request-container[b-tnmiwthv6m] {
    animation: fadeIn-b-tnmiwthv6m 0.3s ease-out;
}

.resource-selectors[b-tnmiwthv6m] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.resource-selector-section[b-tnmiwthv6m] {
    padding: 1.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.section-title[b-tnmiwthv6m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.request-comment[b-tnmiwthv6m] {
    padding: 1.5rem;
    border-radius: 8px;
}

.resource-selector-actions[b-tnmiwthv6m] {
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    justify-content: end;
}

.request-history-container[b-tnmiwthv6m] {
    animation: fadeIn-b-tnmiwthv6m 0.3s ease-out;
}

.history-loading[b-tnmiwthv6m],
.history-empty[b-tnmiwthv6m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.history-empty[b-tnmiwthv6m] {
    color: var(--bs-secondary);
}

.history-list[b-tnmiwthv6m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-card[b-tnmiwthv6m] {
    transition: all 0.2s ease;
}

.history-card:hover[b-tnmiwthv6m] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.history-card-header[b-tnmiwthv6m] {
    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-tnmiwthv6m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-card-title h5[b-tnmiwthv6m] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.history-card-body[b-tnmiwthv6m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-comment[b-tnmiwthv6m] {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--bs-light);
    border-radius: 6px;
    font-size: 0.875rem;
}

.request-items[b-tnmiwthv6m] {
    margin-top: 1rem;
}

.items-title[b-tnmiwthv6m] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--bs-secondary);
}

.items-list[b-tnmiwthv6m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.request-item[b-tnmiwthv6m] {
    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-tnmiwthv6m] {
    background: var(--bs-gray-200);
    border-left-color: var(--bs-primary);
}

.item-info[b-tnmiwthv6m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.item-name[b-tnmiwthv6m] {
    font-weight: 500;
    font-size: 0.875rem;
}

.item-type[b-tnmiwthv6m] {
    font-size: 0.75rem;
}

.history-stats[b-tnmiwthv6m] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.history-stat[b-tnmiwthv6m] {
    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-tnmiwthv6m] {
    background: rgba(255, 193, 7, 0.1);
    color: var(--bs-warning);
}

.history-stat.approved[b-tnmiwthv6m] {
    background: rgba(25, 135, 84, 0.1);
    color: var(--bs-success);
}

.history-stat.rejected[b-tnmiwthv6m] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.history-pagination[b-tnmiwthv6m] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@keyframes fadeIn-b-tnmiwthv6m {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .resource-selector-section[b-tnmiwthv6m] {
        padding: 1rem;
    }

    .section-title[b-tnmiwthv6m] {
        font-size: 1rem;
    }

    .history-card-header[b-tnmiwthv6m] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .resource-selector-actions[b-tnmiwthv6m] {
        flex-direction: column;
    }

    .history-stats[b-tnmiwthv6m] {
        flex-direction: column;
    }
}
/* /Areas/Settings/Pages/SettingsPage.razor.rz.scp.css */
.settings-container[b-t15fzsly3q] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 0;
}

.settings-profile-banner[b-t15fzsly3q] {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--bs-primary);
    border-radius: 6px;
    color: var(--bs-white);
}

.settings-profile-avatar[b-t15fzsly3q] {
    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-t15fzsly3q] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-profile-name[b-t15fzsly3q] {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .settings-profile-banner[b-t15fzsly3q] {
        display: flex;
    }
}

.settings-grid[b-t15fzsly3q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .settings-grid[b-t15fzsly3q] {
        grid-template-columns: 1fr;
    }
}

.settings-card-link[b-t15fzsly3q] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-card-link:hover .settings-card-icon[b-t15fzsly3q] {
    color: var(--bs-gray-dark);
}

.disabled[b-t15fzsly3q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-card-icon[b-t15fzsly3q] {
    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;
}

.settings-card-content[b-t15fzsly3q] {
    flex: 1;
    margin-top: 1rem;
    min-width: 0;
}

.settings-card-title[b-t15fzsly3q] {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.settings-card-description[b-t15fzsly3q] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    line-height: 1.4;
}

.badge[b-t15fzsly3q] {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.pwa-install-steps[b-t15fzsly3q] {
    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-t15fzsly3q] {
    background-color: var(--bs-danger);
}

.settings-card-title--danger[b-t15fzsly3q] {
    color: var(--bs-danger);
}

.settings-version[b-t15fzsly3q] {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-secondary);
}
/* /Shared/Components/AppAccordion.razor.rz.scp.css */
.app-accordion[b-qv1etzoznp] {
    display: flex;
    flex-direction: column;
}

.app-accordion.flush .accordion-section[b-qv1etzoznp] {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    margin-bottom: 0;
}

.app-accordion.flush .accordion-section:first-child[b-qv1etzoznp] {
    border-top: none;
}

.app-accordion.flush .accordion-section:last-child[b-qv1etzoznp] {
    border-bottom: none;
}

.app-accordion.flush .accordion-section:hover[b-qv1etzoznp] {
    box-shadow: none;
}

.app-accordion.flush .accordion-section.open[b-qv1etzoznp] {
    box-shadow: none;
}
/* /Shared/Components/AppAccordionSection.razor.rz.scp.css */
.accordion-section[b-ugu7fjtsw2] {
    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-ugu7fjtsw2] {
    margin-bottom: 0;
}

.accordion-section:hover[b-ugu7fjtsw2] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: var(--bs-primary);
}

.accordion-section.open[b-ugu7fjtsw2] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.accordion-header[b-ugu7fjtsw2] {
    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-ugu7fjtsw2] {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.accordion-header:active[b-ugu7fjtsw2] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.accordion-section.open .accordion-header[b-ugu7fjtsw2] {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.accordion-section:not(.open) .accordion-header[b-ugu7fjtsw2] {
    background-color: transparent;
}

.accordion-header-main[b-ugu7fjtsw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
}

.accordion-header-content[b-ugu7fjtsw2] {
    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-ugu7fjtsw2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.accordion-title[b-ugu7fjtsw2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion-header-badge[b-ugu7fjtsw2] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
}

.accordion-title-extra[b-ugu7fjtsw2] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.accordion-title-icon[b-ugu7fjtsw2] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bs-primary);
    opacity: 0.8;
}

.accordion-header-description[b-ugu7fjtsw2] {
    font-weight: 500;
    color: var(--bs-secondary);
    font-size: 0.875rem;
}

.accordion-chevron[b-ugu7fjtsw2] {
    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-ugu7fjtsw2] {
    transform: rotate(180deg);
}

.accordion-header-footer[b-ugu7fjtsw2] {
    margin-top: 0.75rem;
    pointer-events: none;
}

/* CSS Grid collapse - smoothly animates to actual content height */
.accordion-collapse[b-ugu7fjtsw2] {
    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-ugu7fjtsw2] {
    grid-template-rows: 1fr;
}

/* Wrapper needed for grid animation to work properly */
.accordion-body[b-ugu7fjtsw2] {
    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-ugu7fjtsw2] {
    padding: 1.25rem;
    opacity: 1;
    transform: translateY(0);
}

.accordion-collapse:not(.show) .accordion-body[b-ugu7fjtsw2] {
    pointer-events: none;
    padding: 0 !important;
}

/* Accessibility improvements */
.accordion-header:focus[b-ugu7fjtsw2] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.accordion-header:focus:not(:focus-visible)[b-ugu7fjtsw2] {
    outline: none;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .accordion-header[b-ugu7fjtsw2] {
        padding: 0.875rem 1rem;
    }

    .accordion-header-main[b-ugu7fjtsw2] {
        font-size: 0.9375rem;
    }

    .accordion-header-footer[b-ugu7fjtsw2] {
        margin-top: 0.5rem;
    }

    .accordion-collapse.show .accordion-body[b-ugu7fjtsw2] {
        padding: 1rem;
    }

    .accordion-body[b-ugu7fjtsw2] {
        padding: 0;
    }

    .accordion-header-description[b-ugu7fjtsw2] {
        display: none;
    }
}
/* /Shared/Components/AppAlert.razor.rz.scp.css */
/* ========== BASE ALERT ========== */
.app-alert[b-8x8ie8liwr] {
    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-8x8ie8liwr] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== ALERT CONTENT ========== */
.app-alert-content[b-8x8ie8liwr] {
    flex: 1;
    min-width: 0;
}

.app-alert-title[b-8x8ie8liwr] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.app-alert-message[b-8x8ie8liwr] {
    margin: 0;
}

.app-alert-message p[b-8x8ie8liwr] {
    margin: 0;
}

.app-alert-message p + p[b-8x8ie8liwr] {
    margin-top: 8px;
}

/* ========== CLOSE BUTTON ========== */
.app-alert-close[b-8x8ie8liwr] {
    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-8x8ie8liwr] {
    opacity: 1;
}

.app-alert-close:focus-visible[b-8x8ie8liwr] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ========== INFO VARIANT ========== */
.app-alert-info[b-8x8ie8liwr] {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #0d47a1;
}

.app-alert-info .app-alert-icon[b-8x8ie8liwr] {
    color: #1976d2;
}

/* ========== SUCCESS VARIANT ========== */
.app-alert-success[b-8x8ie8liwr] {
    background-color: #e8f5e9;
    border-color: #81c784;
    color: #1b5e20;
}

.app-alert-success .app-alert-icon[b-8x8ie8liwr] {
    color: #2e7d32;
}

/* ========== WARNING VARIANT ========== */
.app-alert-warning[b-8x8ie8liwr] {
    background-color: #fff3e0;
    border-color: #ffb74d;
    color: #c24400;
}

.app-alert-warning .app-alert-icon[b-8x8ie8liwr] {
    color: #f57c00;
}

/* ========== DANGER VARIANT ========== */
.app-alert-danger[b-8x8ie8liwr] {
    background-color: #ffebee;
    border-color: #e57373;
    color: #b71c1c;
}

.app-alert-danger .app-alert-icon[b-8x8ie8liwr] {
    color: #c62828;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 576px) {
    .app-alert[b-8x8ie8liwr] {
        flex-direction: column;
        gap: 8px;
    }

    .app-alert-icon[b-8x8ie8liwr] {
        align-self: flex-start;
    }

    .app-alert-close[b-8x8ie8liwr] {
        align-self: flex-end;
        margin-top: -8px;
    }
}
/* /Shared/Components/AppBadge.razor.rz.scp.css */
.app-badge[b-b7zvnlhfn5] {
    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-b7zvnlhfn5] {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 6px;
}

.app-badge.badge-large[b-b7zvnlhfn5] {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 18px;
}

/* ========== COLOR VARIANTS ========== */
.app-badge-primary[b-b7zvnlhfn5]      { background-color: color-mix(in srgb, var(--bs-primary) 50%, transparent); color: var(--bs-black); }
.app-badge-success[b-b7zvnlhfn5]      { background-color: color-mix(in srgb, var(--bs-success) 50%, transparent); color: var(--bs-black); }
.app-badge-secondary[b-b7zvnlhfn5]    { background-color: color-mix(in srgb, var(--bs-secondary) 50%, transparent); color: var(--bs-black); }
.app-badge-danger[b-b7zvnlhfn5]       { background-color: color-mix(in srgb, var(--bs-danger) 50%, transparent); color: var(--bs-black); }
.app-badge-warning[b-b7zvnlhfn5]      { background-color: color-mix(in srgb, var(--bs-warning) 50%, transparent); color: var(--bs-black); }
.app-badge-info[b-b7zvnlhfn5]         { background-color: color-mix(in srgb, var(--bs-info) 50%, transparent); color: var(--bs-black); }

/* ========== BADGE CONTENT ========== */
.badge-icon[b-b7zvnlhfn5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-text[b-b7zvnlhfn5] {
    display: inline;
}

/* ========== DISMISS BUTTON ========== */
.badge-dismiss[b-b7zvnlhfn5] {
    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-b7zvnlhfn5] {
    opacity: 1;
}

.badge-dismiss:focus[b-b7zvnlhfn5] {
    outline: 1px solid currentColor;
    outline-offset: 1px;
}

/* ========== ANIMATIONS ========== */
.app-badge-animate-in[b-b7zvnlhfn5] {
    animation: badge-pop-in-b-b7zvnlhfn5 0.3s ease-out;
}

.app-badge-animate-out[b-b7zvnlhfn5] {
    animation: badge-pop-out-b-b7zvnlhfn5 0.25s ease-in forwards;
}

@keyframes badge-pop-in-b-b7zvnlhfn5 {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes badge-pop-out-b-b7zvnlhfn5 {
    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-4umy1bds05] {
    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-4umy1bds05 200ms ease-out;
}

.bs-backdrop.bs-closing[b-4umy1bds05] {
    animation: bs-fade-out-b-4umy1bds05 300ms ease-in forwards;
}

/* ========== Sheet panel (mobile: bottom sheet) ========== */
.bs-sheet[b-4umy1bds05] {
    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;
}

/* Size variants (mobile only) */
.bs-sheet.bs-size-small[b-4umy1bds05] {
    min-height: 25dvh;
}

.bs-sheet.bs-size-medium[b-4umy1bds05] {
    min-height: 40dvh;
}

.bs-sheet.bs-size-large[b-4umy1bds05] {
    min-height: 50dvh;
}

.bs-slide-in[b-4umy1bds05] {
    animation: bs-slide-up-b-4umy1bds05 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.bs-slide-out[b-4umy1bds05] {
    animation: bs-slide-down-b-4umy1bds05 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* ========== Drag zone (iOS-style handle area) ========== */
.bs-drag-zone[b-4umy1bds05] {
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
}

.bs-drag-zone:active[b-4umy1bds05] {
    cursor: grabbing;
}

/* ========== Handle bar ========== */
.bs-handle-bar-wrapper[b-4umy1bds05] {
    display: flex;
    justify-content: center;
    padding: 0.625rem 0 0.25rem;
    flex-shrink: 0;
}

.bs-handle-bar[b-4umy1bds05] {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: #d1d5db;
}

/* ========== Header ========== */
.bs-header[b-4umy1bds05] {
    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;
}

.bs-title[b-4umy1bds05] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
    margin: 0;
}

.bs-close-btn[b-4umy1bds05] {
    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-4umy1bds05] {
    background: #e5e7eb;
    color: #1f2937;
}

.bs-close-btn:active[b-4umy1bds05] {
    background: #d1d5db;
}

/* ========== Body ========== */
.bs-body[b-4umy1bds05] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 1.25rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}

/* ========== Desktop mode — centered modal ========== */
.bs-backdrop.bs-desktop[b-4umy1bds05] {
    align-items: center;
}

.bs-desktop .bs-sheet[b-4umy1bds05] {
    border-radius: 20px;
    max-height: 85vh;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
}

.bs-desktop .bs-slide-in[b-4umy1bds05] {
    animation: bs-scale-in-b-4umy1bds05 200ms ease-out;
}

.bs-desktop .bs-slide-out[b-4umy1bds05] {
    animation: bs-scale-out-b-4umy1bds05 200ms ease-in forwards;
}

.bs-desktop .bs-header[b-4umy1bds05] {
    padding: 1rem 1.5rem 0.75rem;
}

.bs-desktop .bs-body[b-4umy1bds05] {
    padding: 0 1.5rem 1.5rem;
}

/* ========== Animations ========== */
@keyframes bs-fade-in-b-4umy1bds05 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bs-fade-out-b-4umy1bds05 {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes bs-slide-up-b-4umy1bds05 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes bs-slide-down-b-4umy1bds05 {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

@keyframes bs-scale-in-b-4umy1bds05 {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes bs-scale-out-b-4umy1bds05 {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
}
/* /Shared/Components/AppBreadcrumb.razor.rz.scp.css */
.app-breadcrumb[b-wyfsbi5qfj] {
    width: 100%;
    background: #f9fafb;
    animation: slideInDown-b-wyfsbi5qfj 0.3s ease-out;
}

/* ========== BREADCRUMB LIST ========== */
.breadcrumb-list[b-wyfsbi5qfj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ========== BREADCRUMB ITEM ========== */
.breadcrumb-item[b-wyfsbi5qfj] {
    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-wyfsbi5qfj] {
    color: var(--bs-black);
    font-weight: 400;
}

/* ========== BREADCRUMB TEXT ========== */
.breadcrumb-text[b-wyfsbi5qfj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* ========== BREADCRUMB BUTTON ========== */
.breadcrumb-button[b-wyfsbi5qfj] {
    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-wyfsbi5qfj] {
        background: none;
        color: var(--bs-black);
    }
}

.breadcrumb-button:active[b-wyfsbi5qfj] {
    background: none;
    transform: scale(0.98);
}

.breadcrumb-button:focus-visible[b-wyfsbi5qfj] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .breadcrumb-text[b-wyfsbi5qfj] {
        max-width: 120px;
    }

    .breadcrumb-list[b-wyfsbi5qfj] {
        gap: 6px;
    }

    .breadcrumb-item[b-wyfsbi5qfj] {
        font-size: 13px;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes slideInDown-b-wyfsbi5qfj {
    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-t6nap4p3p8] {
    text-decoration: none;
    color: inherit;
}

a.app-button:hover[b-t6nap4p3p8] {
    text-decoration: none;
}

a.app-button:visited[b-t6nap4p3p8] {
    color: inherit;
}

/* ========== BASE BUTTON STYLES ========== */
.app-button[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
    padding: 0;
    width: 48px;
    min-width: 48px;
    border-radius: 50%;
    gap: 0;
}

.app-button.icon-only :deep(.app-icon)[b-t6nap4p3p8],
.app-button.icon-only :deep(svg)[b-t6nap4p3p8] {
    flex-shrink: 0;
    flex-grow: 0;
}

.app-button.icon-only.size-small :deep(.app-icon)[b-t6nap4p3p8] {
    width: 14px;
    height: 14px;
}

.app-button.icon-only.size-small :deep(svg)[b-t6nap4p3p8] {
    width: 14px !important;
    height: 14px !important;
}

.app-button.icon-only :deep(.app-icon)[b-t6nap4p3p8] {
    width: 16px;
    height: 16px;
}

.app-button.icon-only :deep(svg)[b-t6nap4p3p8] {
    width: 16px !important;
    height: 16px !important;
}

.app-button.icon-only.size-large :deep(.app-icon)[b-t6nap4p3p8] {
    width: 20px;
    height: 20px;
}

.app-button.icon-only.size-large :deep(svg)[b-t6nap4p3p8] {
    width: 20px !important;
    height: 20px !important;
}

.app-button.icon-only.size-small[b-t6nap4p3p8] {
    width: 36px;
    min-width: 36px;
    height: 36px;
}

.app-button.icon-only.size-large[b-t6nap4p3p8] {
    width: 56px;
    min-width: 56px;
    height: 56px;
}

/* ========== SIZE VARIANTS ========== */
.app-button.size-small[b-t6nap4p3p8] {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 100px;
}

.app-button.size-large[b-t6nap4p3p8] {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 100px;
}

/* ========== STYLE VARIANTS ========== */
.app-button.variant-primary[b-t6nap4p3p8] {
    background: var(--bs-primary);
    color: var(--color-black);
    border: none;
    box-shadow: none;
}

@media (hover: hover) {
    .app-button.variant-primary:hover:not(:disabled)[b-t6nap4p3p8] {
        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-t6nap4p3p8] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-secondary[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
        background-color: rgba(237, 212, 132, 0.5);
        border-color: var(--bs-primary);
        transform: translateY(-1px);
    }
}

.app-button.variant-secondary:active:not(:disabled)[b-t6nap4p3p8] {
    transform: translateY(0);
    box-shadow: none;
}

.app-button.variant-dark[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
        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-t6nap4p3p8] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-success[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
        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-t6nap4p3p8] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-danger[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
        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-t6nap4p3p8] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-warning[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
        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-t6nap4p3p8] {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.app-button.variant-outline[b-t6nap4p3p8] {
    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-t6nap4p3p8] {
        background: var(--bs-primary);
        color: var(--color-black);
        border-color: var(--bs-primary);
        box-shadow: none;
    }
}

.app-button.variant-outline:active:not(:disabled)[b-t6nap4p3p8] {
    background: color-mix(in srgb, var(--bs-primary), black 5%);
    box-shadow: none;
}

/* ========== FULL WIDTH ========== */
.app-button.full-width[b-t6nap4p3p8] {
    width: 100%;
}

/* ========== DISABLED STATE ========== */
.app-button:disabled[b-t6nap4p3p8] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ========== SPINNER ========== */
.app-button .spinner[b-t6nap4p3p8] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-t6nap4p3p8 0.6s linear infinite;
}

@keyframes spin-b-t6nap4p3p8 {
    to {
        transform: rotate(360deg);
    }
}

/* ========== FOCUS STATE (KEYBOARD) ========== */
.app-button:focus-visible[b-t6nap4p3p8] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.app-button.variant-outline:focus-visible[b-t6nap4p3p8] {
    outline-color: var(--bs-primary);
}
/* /Shared/Components/AppCard.razor.rz.scp.css */
.app-card[b-g87iecjvkq] {
    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-g87iecjvkq] {
    cursor: pointer;
    animation: slideInUp-b-g87iecjvkq 0.3s ease-out;
}

@media (hover: hover) {
    .app-card.clickable:hover[b-g87iecjvkq] {
        border-color: #d1d5db;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }
}

.app-card.clickable:active[b-g87iecjvkq] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========== SELECTED STATE ========== */
.app-card.selected[b-g87iecjvkq] {
    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-g87iecjvkq] {
        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-g87iecjvkq] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========== CARD HEADER ========== */
.app-card-header[b-g87iecjvkq] {
    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-g87iecjvkq] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.app-card-header-content[b-g87iecjvkq] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ========== CARD BODY ========== */
.app-card-body[b-g87iecjvkq] {
    padding: 20px;
    flex: 1;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ========== CARD FOOTER ========== */
.app-card-footer[b-g87iecjvkq] {
    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-g87iecjvkq] {
        flex-direction: column;
    }

    .app-card-header-content[b-g87iecjvkq] {
        width: 100%;
        justify-content: flex-start;
    }

    .app-card-body[b-g87iecjvkq] {
        padding: 16px;
    }

    .app-card-footer[b-g87iecjvkq] {
        padding: 12px 16px;
    }
}

/* ========== STATUS STATES ========== */
.app-card--approved[b-g87iecjvkq] {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.1);
}

.app-card--rejected[b-g87iecjvkq] {
    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-g87iecjvkq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slideInDown-b-g87iecjvkq {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes scaleIn-b-g87iecjvkq {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Shared/Components/AppCarousel.razor.rz.scp.css */
.app-carousel-container[b-usgdhx1zu3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    touch-action: pan-y;
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* Content area - flexible for different layouts */
.app-carousel-content[b-usgdhx1zu3] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    width: 100%;
    position: relative;
}

/* Page container for PageTemplate */
.app-carousel-page[b-usgdhx1zu3] {
    width: 100%;
}

/* Item container for ItemTemplate */
.app-carousel-item[b-usgdhx1zu3] {
    width: 100%;
}

/* Loading state - initial load */
.app-carousel-loading[b-usgdhx1zu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    gap: 1rem;
    color: var(--bs-gray-600);
}

/* Loading overlay - for lazy loading transitions */
.app-carousel-loading-overlay[b-usgdhx1zu3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    z-index: 10;
    animation: fadeIn-b-usgdhx1zu3 0.2s ease-out;
}

.app-carousel-loading .app-spinner[b-usgdhx1zu3],
.app-carousel-loading-overlay .app-spinner[b-usgdhx1zu3] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bs-gray-300);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spin-b-usgdhx1zu3 0.8s linear infinite;
}

.app-carousel-loading-overlay p[b-usgdhx1zu3] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
    font-weight: 500;
}

/* Empty state */
.app-carousel-empty[b-usgdhx1zu3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--bs-gray-600);
    border-radius: 6px;
    border: 2px dashed var(--bs-gray-300);
    background: var(--bs-gray-100);
}

/* Transition states */

/* Lazy loading transition - quick fade, preserve height */
.app-carousel-content.transitioning-lazy[b-usgdhx1zu3] {
    transition: opacity 0.15s ease-out;
}

.app-carousel-content.transitioning-lazy .app-carousel-page[b-usgdhx1zu3],
.app-carousel-content.transitioning-lazy .app-carousel-item[b-usgdhx1zu3] {
    opacity: 0.4;
}

/* Pre-loaded data transition - slide in from the appropriate direction */
.app-carousel-content.transitioning-forward .app-carousel-item[b-usgdhx1zu3],
.app-carousel-content.transitioning-forward .app-carousel-page[b-usgdhx1zu3] {
    animation: slideInFromRight-b-usgdhx1zu3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-carousel-content.transitioning-backward .app-carousel-item[b-usgdhx1zu3],
.app-carousel-content.transitioning-backward .app-carousel-page[b-usgdhx1zu3] {
    animation: slideInFromLeft-b-usgdhx1zu3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInFromRight-b-usgdhx1zu3 {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft-b-usgdhx1zu3 {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-usgdhx1zu3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes spin-b-usgdhx1zu3 {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile touch optimizations */
@media (max-width: 768px) {
    .app-carousel-container[b-usgdhx1zu3] {
        -webkit-tap-highlight-color: transparent;
    }

    .app-carousel-content[b-usgdhx1zu3] {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    .app-carousel-loading-overlay[b-usgdhx1zu3] {
        backdrop-filter: blur(3px);
    }
}
/* /Shared/Components/AppCheckbox.razor.rz.scp.css */
.app-checkbox[b-ptkam2o1mp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-checkbox-label[b-ptkam2o1mp] {
    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-ptkam2o1mp] {
    cursor: not-allowed;
    opacity: 0.5;
}

.app-checkbox-label input[type="checkbox"][b-ptkam2o1mp] {
    width: 18px;
    height: 18px;
    accent-color: var(--bs-primary);
    cursor: inherit;
    margin: 0;
    flex-shrink: 0;
}

.app-checkbox-text[b-ptkam2o1mp] {
    font-size: 0.875rem;
    font-weight: 500;
}

.app-checkbox-required[b-ptkam2o1mp] {
    color: var(--bs-danger);
    margin-left: 0.15rem;
}

/* Switch variant */
.app-switch .app-switch-track[b-ptkam2o1mp] {
    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-ptkam2o1mp] {
    cursor: not-allowed;
}

.app-switch-track:has(.app-switch-input:checked)[b-ptkam2o1mp] {
    background: var(--bs-primary);
}

.app-switch-input[b-ptkam2o1mp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: inherit;
    z-index: 1;
}

.app-switch-thumb[b-ptkam2o1mp] {
    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-ptkam2o1mp] {
    transform: translateX(20px);
}

.app-switch-track:has(.app-switch-input:focus-visible)[b-ptkam2o1mp] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Shared/Components/AppChip.razor.rz.scp.css */
.app-chip[b-axn0x7zs1w] {
    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-axn0x7zs1w] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    color: var(--bs-primary);
}

.app-chip--selected[b-axn0x7zs1w] {
    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-axn0x7zs1w] {
    border-color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 10%, transparent);
    color: var(--bs-danger);
}

.app-chip:disabled[b-axn0x7zs1w] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/Components/AppCircleBadge.razor.rz.scp.css */
.app-circle-badge[b-a92ezsj2oc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--bs-primary) 50%, transparent);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.app-circle-badge-icon[b-a92ezsj2oc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Shared/Components/AppComboBox.razor.rz.scp.css */
/* ========== Container ========== */
.app-combo[b-d3pw3ygddu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    transition: transform 0.15s ease-in-out;
    transform-origin: center;
    will-change: transform;
}

.app-combo.is-disabled[b-d3pw3ygddu] {
    opacity: 0.6;
    pointer-events: none;
}

.app-combo:has(.combo-trigger:focus-visible)[b-d3pw3ygddu],
.app-combo:has(.combo-trigger.is-open)[b-d3pw3ygddu] {
    transform: scale(1.005);
}

/* ========== Label ========== */
.combo-label[b-d3pw3ygddu] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.combo-required[b-d3pw3ygddu] {
    color: var(--bs-danger);
}

/* ========== Control (Trigger) ========== */
.combo-control[b-d3pw3ygddu] {
    position: relative;
    width: 100%;
}

.combo-loading-overlay[b-d3pw3ygddu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.app-combo.is-loading .combo-trigger[b-d3pw3ygddu] {
    opacity: 0.6;
}

.combo-trigger[b-d3pw3ygddu] {
    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, transform 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: transform, box-shadow, border-color;
}

.combo-trigger:focus-visible[b-d3pw3ygddu],
.combo-trigger.is-open[b-d3pw3ygddu] {
    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);
    transform: scale(1.005);
    transform-origin: center;
}

.combo-trigger:disabled[b-d3pw3ygddu] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

.combo-value[b-d3pw3ygddu] {
    flex: 1;
    min-width: 0;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}

.combo-placeholder[b-d3pw3ygddu] {
    color: #6c757d;
}

/* Muted display when the null/not-applicable option is selected */
.combo-null-selected[b-d3pw3ygddu] {
    color: #6c757d;
    font-style: italic;
}

.combo-actions[b-d3pw3ygddu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.combo-clear[b-d3pw3ygddu] {
    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-d3pw3ygddu] {
    background: #f0f0f0;
    color: var(--bs-body-color);
}

.combo-chevron[b-d3pw3ygddu] {
    display: flex;
    align-items: center;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.combo-trigger.is-open .combo-chevron[b-d3pw3ygddu] {
    transform: rotate(180deg);
}

/* ========== Error Message ========== */
.combo-error[b-d3pw3ygddu] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: -0.25rem;
}

.app-combo.has-error .combo-trigger[b-d3pw3ygddu] {
    border-color: var(--bs-danger);
    background: #fff8f9;
}

.app-combo.has-error .combo-trigger:focus-visible[b-d3pw3ygddu] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* ========== Multi-select chips ========== */
.combo-chips[b-d3pw3ygddu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0;
}

.combo-chip[b-d3pw3ygddu] {
    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-d3pw3ygddu] {
    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-d3pw3ygddu] {
    color: var(--bs-danger);
    background: rgba(220, 53, 69, 0.1);
}

/* ========== Multi-select checkmarks ========== */
.combo-item-multi[b-d3pw3ygddu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.combo-check[b-d3pw3ygddu] {
    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-d3pw3ygddu] {
    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-csq06f7qdp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-date-picker.is-disabled[b-csq06f7qdp] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.dp-label[b-csq06f7qdp] {
    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-csq06f7qdp] {
    color: var(--bs-danger);
}

/* ========== Control wrapper ========== */
.date-control[b-csq06f7qdp] {
    position: relative;
    width: 100%;
}

/* ========== Trigger ========== */
.date-trigger[b-csq06f7qdp] {
    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-csq06f7qdp] {
    border-color: #c8ccd4;
}

.date-trigger:focus-visible[b-csq06f7qdp] {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.date-trigger.is-open[b-csq06f7qdp] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.date-trigger:disabled[b-csq06f7qdp] {
    background: #e9ecef;
    cursor: not-allowed;
}

.date-placeholder[b-csq06f7qdp] {
    color: #6c757d;
    flex: 1;
}

.date-value[b-csq06f7qdp] {
    color: var(--bs-body-color);
    flex: 1;
}

.date-trigger-icon[b-csq06f7qdp] {
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.date-trigger:hover .date-trigger-icon[b-csq06f7qdp] {
    color: var(--bs-body-color);
}

/* ========== Clear button ========== */
.date-clear-btn[b-csq06f7qdp] {
    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-csq06f7qdp] {
    color: var(--bs-body-color);
    background: #f0f0f0;
}

/* ========== Inline calendar (inside a bottom sheet) ========== */
.date-picker-inline[b-csq06f7qdp] {
    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-csq06f7qdp] {
    padding: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Desktop - minimal padding */
@media (min-width: 769px) {
    .date-picker-content[b-csq06f7qdp] {
        padding: 0.5rem;
        max-width: 360px;
    }
}

/* ========== Header ========== */
.date-panel-header[b-csq06f7qdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
}

.date-panel-title[b-csq06f7qdp] {
    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-csq06f7qdp] {
    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-csq06f7qdp] {
    transform: translateY(0);
}

.date-nav-btn[b-csq06f7qdp] {
    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-csq06f7qdp] {
    background: #f3f4f6;
    color: var(--bs-body-color);
}

.date-nav-btn:active[b-csq06f7qdp] {
    background: #e5e7eb;
}

/* ========== Day grid ========== */
.date-grid[b-csq06f7qdp] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.date-day-name[b-csq06f7qdp] {
    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-csq06f7qdp],
.date-cell-empty[b-csq06f7qdp] {
    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-csq06f7qdp] {
    cursor: default;
    pointer-events: none;
}

.date-cell:hover[b-csq06f7qdp] {
    background: #f3f4f6;
    transform: scale(1.05);
}

.date-cell:active[b-csq06f7qdp] {
    transform: scale(0.95);
}

.date-cell.is-today[b-csq06f7qdp] {
    font-weight: 700;
    background: rgba(238, 212, 132, 0.25);
    color: var(--bs-body-color);
}

.date-cell.is-selected[b-csq06f7qdp] {
    background: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 700;
}

.date-cell.is-selected:hover[b-csq06f7qdp] {
    filter: brightness(0.94);
}

.date-cell.is-disabled[b-csq06f7qdp] {
    color: #69728c;
    background: #f9fafb;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}

.date-cell.is-disabled:hover[b-csq06f7qdp] {
    transform: none;
    background: #f9fafb;
}

/* ========== Month/Year picker grid ========== */
.date-picker-grid[b-csq06f7qdp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

.date-picker-cell[b-csq06f7qdp] {
    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-csq06f7qdp] {
    background: #f3f4f6;
    border-color: var(--bs-primary);
}

.date-picker-cell.is-selected[b-csq06f7qdp] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 700;
}

.date-picker-cell.is-current[b-csq06f7qdp] {
    border-color: var(--bs-primary);
    font-weight: 600;
}

/* ========== Footer ========== */
.date-panel-footer[b-csq06f7qdp] {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0.5rem 0.5rem;
    display: flex;
    justify-content: center;
}

.date-today-btn[b-csq06f7qdp] {
    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-csq06f7qdp] {
    background: var(--bs-primary);
    color: var(--bs-gray-900);
    transform: translateY(-1px);
}

.date-today-btn:active[b-csq06f7qdp] {
    transform: translateY(0);
}

/* ========== Mobile optimizations ========== */
@media (max-width: 768px) {
    .date-picker-content[b-csq06f7qdp] {
        padding: 0.75rem 0;
    }

    .date-grid[b-csq06f7qdp] {
        gap: 4px;
        padding: 0 0.75rem;
    }

    .date-cell[b-csq06f7qdp] {
        min-height: 48px;
        font-size: 1rem;
    }

    .date-nav-btn[b-csq06f7qdp] {
        min-width: 44px;
        min-height: 44px;
    }

    .date-today-btn[b-csq06f7qdp] {
        min-height: 52px;
        font-size: 1rem;
    }

    .date-picker-grid[b-csq06f7qdp] {
        gap: 12px;
        padding: 0 0.75rem;
    }

    .date-picker-cell[b-csq06f7qdp] {
        min-height: 56px;
        font-size: 1rem;
    }
}

/* ========== Touch device improvements ========== */
@media (hover: none) and (pointer: coarse) {
    .date-nav-btn[b-csq06f7qdp] {
        min-width: 44px;
        min-height: 44px;
    }

    .date-cell[b-csq06f7qdp] {
        min-height: 48px;
    }

    .date-today-btn[b-csq06f7qdp] {
        min-height: 52px;
    }

    .date-picker-cell[b-csq06f7qdp] {
        min-height: 56px;
    }
}

/* ========== Time picker ========== */
.time-section[b-csq06f7qdp] {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0.5rem 0.75rem;
}

.time-toggle-label[b-csq06f7qdp] {
    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-csq06f7qdp] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bs-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.time-toggle-text[b-csq06f7qdp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.time-picker-panel[b-csq06f7qdp] {
    margin-top: 1rem;
}

.time-columns[b-csq06f7qdp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.time-column[b-csq06f7qdp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.time-input[b-csq06f7qdp] {
    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-csq06f7qdp]::-webkit-inner-spin-button,
.time-input[b-csq06f7qdp]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-input:focus[b-csq06f7qdp] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.time-spin-btn[b-csq06f7qdp] {
    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-csq06f7qdp] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.time-spin-btn:active[b-csq06f7qdp] {
    background: var(--bs-primary);
    color: var(--bs-body-color);
}

.time-colon[b-csq06f7qdp] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-body-color);
    padding-bottom: 1.5rem;
    line-height: 1;
}

.time-column-label[b-csq06f7qdp] {
    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-csq06f7qdp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding-top: calc(36px + 0.25rem);
}

.time-ampm-btn[b-csq06f7qdp] {
    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-csq06f7qdp] {
    color: #6c757d;
}

.time-ampm-btn.is-am:hover[b-csq06f7qdp] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.time-ampm-btn.is-pm[b-csq06f7qdp] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.time-ampm-btn.is-pm:hover[b-csq06f7qdp] {
    filter: brightness(0.94);
}

/* ========== Footer row (Today + Confirm) ========== */
.date-footer-row[b-csq06f7qdp] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.date-footer-row .date-today-btn[b-csq06f7qdp] {
    flex: 1;
}

.date-confirm-btn[b-csq06f7qdp] {
    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-csq06f7qdp] {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.date-confirm-btn:active[b-csq06f7qdp] {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .time-input[b-csq06f7qdp] {
        width: 80px;
        height: 72px;
        font-size: 2.25rem;
    }

    .time-ampm-btn[b-csq06f7qdp] {
        width: 60px;
        height: 72px;
    }

    .time-ampm-col[b-csq06f7qdp] {
        padding-top: calc(40px + 0.25rem);
    }

    .time-spin-btn[b-csq06f7qdp] {
        width: 44px;
        height: 40px;
    }

    .date-confirm-btn[b-csq06f7qdp] {
        min-height: 52px;
        font-size: 1rem;
    }
}
/* /Shared/Components/AppFileUploader.razor.rz.scp.css */
/* ========== Container ========== */
.app-file-uploader[b-opqazhrhr2] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-file-uploader.is-disabled[b-opqazhrhr2] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.afu-label[b-opqazhrhr2] {
    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-opqazhrhr2] {
    color: var(--bs-danger);
}

.afu-hint[b-opqazhrhr2] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* ========== Empty state ========== */
.afu-empty[b-opqazhrhr2] {
    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-opqazhrhr2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.afu-file-item[b-opqazhrhr2] {
    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-opqazhrhr2] {
    color: #68707d;
    flex-shrink: 0;
}

.afu-file-info[b-opqazhrhr2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.afu-file-name[b-opqazhrhr2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afu-file-size[b-opqazhrhr2] {
    font-size: 0.75rem;
    color: #6c757d;
}

.afu-remove-btn[b-opqazhrhr2] {
    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-opqazhrhr2] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

/* ========== Upload progress ========== */
.afu-uploading[b-opqazhrhr2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}

.afu-uploading-name[b-opqazhrhr2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #1d4ed8;
}

.afu-uploading-filename[b-opqazhrhr2] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afu-upload-pct[b-opqazhrhr2] {
    font-size: 0.75rem;
    color: #1d4ed8;
    text-align: right;
}

/* ========== Error ========== */
.afu-error[b-opqazhrhr2] {
    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-opqazhrhr2] {
    display: flex;
    justify-content: flex-start;
}

/* ========== Drag-over state ========== */
.app-file-uploader.afu-drag-over[b-opqazhrhr2] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 3px;
    border-radius: 14px;
}

.app-file-uploader.afu-drag-over .afu-empty[b-opqazhrhr2] {
    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-54nere6uoe] {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
    flex-grow: 0;
}

.app-icon.sm[b-54nere6uoe] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

.app-icon.md[b-54nere6uoe] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.app-icon.lg[b-54nere6uoe] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}
/* /Shared/Components/AppInput.razor.rz.scp.css */
.app-input[b-q19f5uurrg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

/* ========== LABEL ========== */
.app-form-header[b-q19f5uurrg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-form-label[b-q19f5uurrg] {
    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-q19f5uurrg] {
    color: var(--bs-danger);
}

/* ========== INPUT FIELD CONTAINER ========== */
.app-form-input-field[b-q19f5uurrg] {
    position: relative;
    display: flex;
    align-items: center;
}

/* ========== INPUT CONTROL ========== */
.app-form-control[b-q19f5uurrg] {
    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-q19f5uurrg]::placeholder {
    color: #6c757d;
    opacity: 1;
}

.app-form-control:focus[b-q19f5uurrg] {
    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-q19f5uurrg] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* ========== PREFIX/SUFFIX ========== */
.app-form-control.has-prefix[b-q19f5uurrg] {
    padding-left: 2.75rem;
}

.app-form-control.has-suffix[b-q19f5uurrg] {
    padding-right: 2.75rem;
}

.app-form-prefix[b-q19f5uurrg],
.app-form-suffix[b-q19f5uurrg] {
    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-q19f5uurrg] {
    left: 0.75rem;
}

.app-form-suffix[b-q19f5uurrg] {
    right: 0.75rem;
}

/* ========== CLEAR BUTTON ========== */
.app-form-clear-button[b-q19f5uurrg] {
    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-q19f5uurrg] {
    color: var(--bs-body-color);
}

.app-form-clear-button:focus[b-q19f5uurrg] {
    outline: none;
}

/* ========== VALIDATION STATES ========== */
.app-input.state-error .app-form-control[b-q19f5uurrg] {
    border-color: var(--bs-danger);
    background-color: #fff8f9;
}

.app-input.state-error .app-form-control:focus[b-q19f5uurrg] {
    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-q19f5uurrg] {
    border-color: var(--bs-success);
    background-color: #f8fdf7;
}

.app-input.state-success .app-form-control:focus[b-q19f5uurrg] {
    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-q19f5uurrg] {
    border-color: var(--bs-warning);
    background-color: #fffdf8;
}

.app-input.state-warning .app-form-control:focus[b-q19f5uurrg] {
    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-q19f5uurrg] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: 0.25rem;
}

.app-form-success-message[b-q19f5uurrg] {
    font-size: 0.8125rem;
    color: var(--bs-success);
    margin-top: 0.25rem;
}

.app-form-warning-message[b-q19f5uurrg] {
    font-size: 0.8125rem;
    color: var(--bs-warning);
    margin-top: 0.25rem;
}

.app-form-hint[b-q19f5uurrg] {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* ========== CHARACTER COUNTER ========== */
.app-form-counter[b-q19f5uurrg] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: right;
}

.app-form-counter.near-limit[b-q19f5uurrg] {
    color: var(--bs-warning);
}

.app-form-counter.at-limit[b-q19f5uurrg] {
    color: var(--bs-danger);
}

/* ========== DISABLED STATE ========== */
.app-input.disabled[b-q19f5uurrg] {
    opacity: 0.65;
    pointer-events: none;
}

/* ========== LOADING STATE ========== */
.app-input.loading .app-form-control[b-q19f5uurrg] {
    background-color: #e9ecef;
    cursor: wait;
    color: transparent;
    caret-color: transparent;
}

.app-input.loading .app-form-control[b-q19f5uurrg]::placeholder {
    color: transparent;
}
/* /Shared/Components/AppNotificationVariablePanel.razor.rz.scp.css */
.notif-var-panel[b-lb0is96lex] {
    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-lb0is96lex] {
    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-lb0is96lex] {
    font-weight: 400;
    font-style: italic;
    margin-left: 0.15rem;
}

.notif-var-groups[b-lb0is96lex] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.notif-var-group[b-lb0is96lex] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.notif-var-group-label[b-lb0is96lex] {
    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-lb0is96lex] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
}

.notif-var-chip[b-lb0is96lex] {
    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-lb0is96lex] {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

.notif-var-chip--copied[b-lb0is96lex] {
    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-lb0is96lex] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}

.notif-var-answer-row[b-lb0is96lex]  .app-combobox {
    flex: 1 1 200px;
    min-width: 0;
}
/* /Shared/Components/AppPagination.razor.rz.scp.css */
.app-pagination[b-zdjchhwiu5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    gap: 12px;
}

.app-pagination-nav[b-zdjchhwiu5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-pagination-button[b-zdjchhwiu5] {
    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-zdjchhwiu5] {
    opacity: 1;
    background-color: color-mix(in srgb, var(--bs-secondary) 20%, transparent);
}

.app-pagination-button:focus-visible[b-zdjchhwiu5] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.app-pagination-button:disabled[b-zdjchhwiu5] {
    opacity: 0.3;
    cursor: not-allowed;
}

.app-pagination-page-indicator[b-zdjchhwiu5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: #171616;
    min-width: 60px;
    justify-content: center;
}

.app-pagination-summary[b-zdjchhwiu5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.app-pagination-num[b-zdjchhwiu5] {
    font-weight: var(--font-weight-semi-bold);
    color: var(--bs-body-color);
}

.app-pagination-sep[b-zdjchhwiu5] {
    font-weight: 400;
}

@media (max-width: 640px) {
    .app-pagination[b-zdjchhwiu5] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .app-pagination-button[b-zdjchhwiu5] {
        padding: 6px 10px;
        font-size: 16px;
    }
}
/* /Shared/Components/AppPicturePicker.razor.rz.scp.css */
/* ========== Container ========== */
.app-picture-picker[b-93ffofwt5b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-picture-picker.is-disabled[b-93ffofwt5b] { }

/* ========== Label ========== */
.pp-label[b-93ffofwt5b] {
    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-93ffofwt5b] {
    color: var(--bs-danger);
}

/* ========== Carousel slide ========== */
.pp-slide[b-93ffofwt5b] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #1c1c1e;
}

.pp-image-btn[b-93ffofwt5b] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.pp-image[b-93ffofwt5b] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pp-remove-btn[b-93ffofwt5b] {
    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-93ffofwt5b] {
    background: rgba(220, 53, 69, 0.85);
}

/* ========== Empty state ========== */
.pp-empty[b-93ffofwt5b] {
    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-empty--clickable[b-93ffofwt5b] {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pp-empty--clickable:hover[b-93ffofwt5b] {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.pp-empty--clickable:active[b-93ffofwt5b] {
    background: #e5e7eb;
}

/* ========== Footer (counter + add) ========== */
.pp-footer[b-93ffofwt5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pp-counter[b-93ffofwt5b] {
    font-size: 0.8125rem;
    color: #6c757d;
    font-weight: 500;
}

/* ========== Error ========== */
.pp-error[b-93ffofwt5b] {
    font-size: 0.8125rem;
    color: #6c757d;
}

.pp-error-validation[b-93ffofwt5b] {
    color: var(--bs-danger);
    font-weight: 500;
}

/* ====================================================================== */
/*  ACTION OPTIONS (inside bottom sheet)                                  */
/* ====================================================================== */
.pp-action-options[b-93ffofwt5b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-action-option[b-93ffofwt5b] {
    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-93ffofwt5b] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.pp-action-option:active[b-93ffofwt5b] {
    background: #eef0f3;
}

.pp-action-icon[b-93ffofwt5b] {
    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-93ffofwt5b] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pp-action-text strong[b-93ffofwt5b] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.pp-action-text small[b-93ffofwt5b] {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* ====================================================================== */
/*  CAMERA OVERLAY                                                         */
/* ====================================================================== */
.pp-camera-overlay[b-93ffofwt5b] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #000000;
    animation: pp-camera-enter-b-93ffofwt5b 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-camera-loading[b-93ffofwt5b] {
    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-93ffofwt5b] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-93ffofwt5b 0.8s linear infinite;
}

/* Video fills the entire overlay */
.pp-camera-video[b-93ffofwt5b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.pp-hidden[b-93ffofwt5b] {
    visibility: hidden;
}

/* ── Viewfinder ──────────────────────────────────────────────────── */
.pp-camera-viewfinder[b-93ffofwt5b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); /* shift up slightly, above controls */
    width: min(72vmin, 320px);
    height: min(72vmin, 320px);
    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-93ffofwt5b] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    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));
}

.pp-camera-cancel[b-93ffofwt5b] {
    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-93ffofwt5b] {
    background: rgba(255, 255, 255, 0.3);
}

/* Shutter button — double-ring camera-style */
.pp-shutter-btn[b-93ffofwt5b] {
    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-93ffofwt5b] {
    transform: scale(0.92);
}

.pp-shutter-btn:disabled[b-93ffofwt5b] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pp-shutter-ring[b-93ffofwt5b] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fafafa;
    border: 3px solid rgba(0, 0, 0, 0.08);
}

.pp-camera-spacer[b-93ffofwt5b] {
    width: 44px;
    height: 44px;
}

/* ====================================================================== */
/*  PREVIEW OVERLAY                                                        */
/* ====================================================================== */
.pp-preview-overlay[b-93ffofwt5b] {
    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-93ffofwt5b 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-preview-image[b-93ffofwt5b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pp-preview-controls[b-93ffofwt5b] {
    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-93ffofwt5b] {
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 14px;
    padding: 0.75rem 1.5rem;
    gap: 8px;
}

.pp-retake-btn[b-93ffofwt5b] {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(6px);
}

.pp-retake-btn:hover[b-93ffofwt5b] {
    border-color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.22) !important;
}

/* ====================================================================== */
/*  LIGHTBOX OVERLAY                                                       */
/* ====================================================================== */
.pp-lightbox-overlay[b-93ffofwt5b] {
    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-93ffofwt5b 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: zoom-out;
}

.pp-lightbox-image[b-93ffofwt5b] {
    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-93ffofwt5b] {
    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-93ffofwt5b] {
    background: rgba(255, 255, 255, 0.28);
}

.pp-lightbox-nav[b-93ffofwt5b] {
    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-93ffofwt5b] {
    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-93ffofwt5b] {
    background: rgba(255, 255, 255, 0.28);
}

.pp-lightbox-nav-btn:disabled[b-93ffofwt5b] {
    opacity: 0.3;
    cursor: default;
}

.pp-lightbox-counter[b-93ffofwt5b] {
    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-93ffofwt5b {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin-b-93ffofwt5b {
    to { transform: rotate(360deg); }
}
/* /Shared/Components/AppPopup.razor.rz.scp.css */
.popup-backdrop[b-4ip99q9229] {
    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-4ip99q9229 120ms ease-out;
}

.popup-backdrop.closeable[b-4ip99q9229] {
    cursor: pointer;
}

.popup-card[b-4ip99q9229] {
    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-4ip99q9229 140ms ease-out;
    position: relative;
}

/* ========== SIZE VARIANTS ========== */
.popup-card.popup-small[b-4ip99q9229] {
    max-width: 320px;
    padding: 1.5rem;
    border-radius: 16px;
}

.popup-card.popup-large[b-4ip99q9229] {
    max-width: 560px;
    padding: 2.5rem;
    border-radius: 24px;
}

/* ========== STYLE VARIANTS ========== */
.popup-card.success[b-4ip99q9229] {
    border-top: 4px solid var(--bs-success);
}

.popup-card.error[b-4ip99q9229] {
    border-top: 4px solid var(--bs-danger);
}

.popup-card.warning[b-4ip99q9229] {
    border-top: 4px solid var(--bs-warning);
}

/* ========== CLOSE BUTTON ========== */
.popup-close[b-4ip99q9229] {
    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-4ip99q9229] {
    color: var(--bs-body-color);
}

.popup-close:focus[b-4ip99q9229] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========== TITLE ========== */
.popup-title[b-4ip99q9229] {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--bs-body-color);
}

/* ========== CONTENT ========== */
.popup-content[b-4ip99q9229] {
    font-size: 0.95rem;
    color: var(--bs-gray-900);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ========== ACTIONS ========== */
.popup-actions[b-4ip99q9229] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.popup-button[b-4ip99q9229] {
    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-4ip99q9229] {
    background-color: var(--bs-primary);
    color: #212529;
}

.popup-button.confirm:hover[b-4ip99q9229] {
    background-color: color-mix(in srgb, var(--bs-primary), black 8%);
}

.popup-button.confirm:focus-visible[b-4ip99q9229] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.popup-button.cancel[b-4ip99q9229] {
    background-color: #e9ecef;
    color: var(--bs-body-color);
}

.popup-button.cancel:hover[b-4ip99q9229] {
    background-color: #dde0e3;
}

.popup-button.cancel:focus-visible[b-4ip99q9229] {
    outline: 2px solid #dde0e3;
    outline-offset: 2px;
}

.popup-button:disabled[b-4ip99q9229] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========== ANIMATIONS ========== */
@keyframes popup-fade-in-b-4ip99q9229 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popup-scale-in-b-4ip99q9229 {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    .popup-card[b-4ip99q9229] {
        max-width: calc(100% - 2rem);
        width: 100%;
    }

    .popup-card.popup-small[b-4ip99q9229] {
        max-width: calc(100% - 2rem);
    }

    .popup-card.popup-large[b-4ip99q9229] {
        max-width: calc(100% - 2rem);
    }
}
/* /Shared/Components/AppProgressBar.razor.rz.scp.css */
.app-progress-bar-container[b-9tkpf4z3q1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.app-progress-label[b-9tkpf4z3q1] {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
}

.progress[b-9tkpf4z3q1] {
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-9tkpf4z3q1] {
    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-9tkpf4z3q1] {
    background-color: var(--bs-primary);
}

.progress-bar.bg-success[b-9tkpf4z3q1] {
    background-color: var(--bs-success);
}

.progress-bar.bg-warning[b-9tkpf4z3q1] {
    background-color: var(--bs-warning);
}

.progress-bar.bg-danger[b-9tkpf4z3q1] {
    background-color: var(--bs-danger);
}

.progress-bar.bg-info[b-9tkpf4z3q1] {
    background-color: var(--bs-info);
}

.progress-bar.progress-bar-striped[b-9tkpf4z3q1] {
    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-9tkpf4z3q1] {
    animation: progress-bar-stripes-b-9tkpf4z3q1 1s linear infinite;
}

@keyframes progress-bar-stripes-b-9tkpf4z3q1 {
    0% {
        background-position: 1rem 0;
    }

    100% {
        background-position: 0 0;
    }
}
/* /Shared/Components/AppResourceChipSelector.razor.rz.scp.css */
.rcs-container[b-zvw86zdred] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rcs-type-group[b-zvw86zdred] {
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: none;
    border-radius: 0.5rem;
}

.rcs-type-header[b-zvw86zdred] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
    color: var(--bs-black);
}

.rcs-search[b-zvw86zdred] {
    margin-bottom: 0.75rem;
}

.rcs-search input[type="search"][b-zvw86zdred] {
    max-width: 280px;
}

.rcs-chips[b-zvw86zdred] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Selected state — fill with primary (same as variant-outline hover) */
.rcs-chips :deep(.app-button.is-selected)[b-zvw86zdred] {
    background: var(--bs-primary);
    color: var(--color-black);
    border-color: var(--bs-primary);
}

/* Assigned state — success tint, non-interactive */
.rcs-chips :deep(.app-button.is-assigned)[b-zvw86zdred] {
    border-color: var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 12%, transparent);
    color: var(--bs-success);
}

.rcs-chip-note[b-zvw86zdred] {
    font-size: 0.7rem;
    opacity: 0.8;
}

.rcs-actions[b-zvw86zdred] {
    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-djt4fjx4ug] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-signature-pad.is-disabled[b-djt4fjx4ug] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.sp-label[b-djt4fjx4ug] {
    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-djt4fjx4ug] {
    color: var(--bs-danger);
}

/* ========== Empty state ========== */
.sp-empty[b-djt4fjx4ug] {
    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-djt4fjx4ug] {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.sp-empty:active[b-djt4fjx4ug] {
    background: #e5e7eb;
}

/* ========== Preview (saved signature) ========== */
.sp-preview[b-djt4fjx4ug] {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    padding: 0.75rem;
}

.sp-preview-image[b-djt4fjx4ug] {
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

/* ========== Form action buttons (edit/remove) ========== */
.sp-actions[b-djt4fjx4ug] {
    display: flex;
    gap: 0.5rem;
}

.sp-action-remove[b-djt4fjx4ug] {
    color: var(--bs-danger, #dc3545);
    border-color: rgba(220, 53, 69, 0.4);
}

.sp-action-remove:hover[b-djt4fjx4ug] {
    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-djt4fjx4ug] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
    position: relative;
}

.sp-canvas[b-djt4fjx4ug] {
    width: 100%;
    height: 360px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    cursor: crosshair;
    touch-action: none;
}

.sp-canvas-hint[b-djt4fjx4ug] {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ========== Loading overlay (positioned on top of the canvas) ========== */
.sp-canvas-loading[b-djt4fjx4ug] {
    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;
}

/* ========== Sheet action buttons (clear/confirm) ========== */
.sp-sheet-actions[b-djt4fjx4ug] {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.sp-sheet-btn[b-djt4fjx4ug] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.875rem 1rem;
    border-radius: 14px;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.sp-sheet-btn:disabled[b-djt4fjx4ug] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sp-sheet-btn-secondary[b-djt4fjx4ug] {
    background: #f3f4f6;
    color: var(--bs-body-color, #1f2937);
}

.sp-sheet-btn-secondary:hover:not(:disabled)[b-djt4fjx4ug] {
    background: #e5e7eb;
}

.sp-sheet-btn-secondary:active:not(:disabled)[b-djt4fjx4ug] {
    background: #d1d5db;
}

.sp-sheet-btn-primary[b-djt4fjx4ug] {
    background: var(--bs-primary, #0d6efd);
    color: #ffffff;
}

.sp-sheet-btn-primary:hover:not(:disabled)[b-djt4fjx4ug] {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 85%, black);
}

.sp-sheet-btn-primary:active:not(:disabled)[b-djt4fjx4ug] {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 75%, black);
}
/* /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-g29km9yp3j] {
    display: block;
    background: #ebebeb;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.app-skeleton[b-g29km9yp3j]::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-g29km9yp3j 1.6s ease-in-out infinite;
}

/* NOTE: @keyframes are not scoped by Blazor CSS isolation — intentionally global */
@keyframes app-skeleton-shimmer-b-g29km9yp3j {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* /Shared/Components/AppTable.razor.rz.scp.css */
/* ========== APP TABLE ========== */

/* ── Top panel ─────────────────────────────────────────────────── */
.app-table-top-panel[b-ndc0jirm1a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.app-table-title[b-ndc0jirm1a] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.app-table-top-panel-toolbar[b-ndc0jirm1a] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.app-table-top-panel-filters[b-ndc0jirm1a] {
    flex: 1;
    min-width: 0;
}

.app-table-top-panel-actions[b-ndc0jirm1a] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .app-table-top-panel-toolbar[b-ndc0jirm1a] {
        align-items: center;
    }

    .app-table-top-panel-actions[b-ndc0jirm1a] {
        flex-shrink: 0;
        justify-content: flex-end;
    }
}

/* ── Container ─────────────────────────────────────────────────── */
.app-table-container[b-ndc0jirm1a] {
    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-ndc0jirm1a] {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px;
}

.app-table[b-ndc0jirm1a] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.55;
}

/* ========== TABLE HEAD ========== */
.app-table-head[b-ndc0jirm1a] {
    background-color: var(--bs-white);
    border-bottom: 2px solid var(--bs-primary);
}

.app-table-header-cell[b-ndc0jirm1a] {
    padding: 16px 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: nowrap;
}

.app-table-header-content[b-ndc0jirm1a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sort-button[b-ndc0jirm1a] {
    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-ndc0jirm1a] {
    opacity: 0.7;
}

.sort-button.active[b-ndc0jirm1a] {
    color: var(--bs-black);
}

/* ========== TABLE BODY ========== */
.app-table-body[b-ndc0jirm1a] {
    background-color: var(--bs-white);
}

.app-table-row[b-ndc0jirm1a] {
    border-bottom: 1px solid var(--bs-gray-300);
    transition: background-color 0.15s ease-in-out;
}

.app-table-row:hover[b-ndc0jirm1a] {
    background-color: var(--bs-gray-100);
}

.app-table-row:last-child[b-ndc0jirm1a] {
    border-bottom: none;
}

.app-table-cell[b-ndc0jirm1a] {
    padding: 16px 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-ndc0jirm1a]  th {
    padding: 16px 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: nowrap;
}

.app-table-body[b-ndc0jirm1a]  tr {
    border-bottom: 1px solid var(--bs-gray-300);
    transition: background-color 0.15s ease-in-out;
}

.app-table-body[b-ndc0jirm1a]  tr:hover {
    background-color: var(--bs-gray-100);
}

.app-table-body[b-ndc0jirm1a]  tr:last-child {
    border-bottom: none;
}

.app-table-body[b-ndc0jirm1a]  td {
    padding: 16px 18px;
    color: var(--bs-body-color);
    vertical-align: middle;
    word-break: break-word;
}

/* ========== TABLE COMMANDS ========== */
.app-table-command-header[b-ndc0jirm1a],
.app-table-command-cell[b-ndc0jirm1a] {
    text-align: center;
    width: 160px;
    justify-content: center;
    display: flex;
}

.app-table-command-cell[b-ndc0jirm1a]  .app-button-group {
    justify-content: center;
}

/* ========== TABLE LOADING STATE ========== */
.app-table-state[b-ndc0jirm1a] {
    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);
}

/* Wrapper used when items already exist and a page-change load is in progress */
.app-table-wrapper[b-ndc0jirm1a] {
    position: relative;
}

.app-table-overlay[b-ndc0jirm1a] {
    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-ndc0jirm1a] {
    pointer-events: none;
    user-select: none;
}

.app-table-empty p[b-ndc0jirm1a] {
    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-ndc0jirm1a] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.app-table-empty-cell p[b-ndc0jirm1a] {
    margin: 0;
}

/* ========== TABLE PAGINATION ========== */
.app-table-pagination[b-ndc0jirm1a] {
    margin-top: 20px;
    padding: 0 4px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .app-table[b-ndc0jirm1a] {
        font-size: 0.8125rem;
    }

    .app-table-header-cell[b-ndc0jirm1a],
    .app-table-cell[b-ndc0jirm1a] {
        padding: 14px 16px;
    }

    .app-table-head[b-ndc0jirm1a]  th,
    .app-table-body[b-ndc0jirm1a]  td {
        padding: 14px 16px;
    }
}

@media (max-width: 768px) {
    .app-table[b-ndc0jirm1a] {
        font-size: 0.75rem;
    }

    .app-table-header-cell[b-ndc0jirm1a],
    .app-table-cell[b-ndc0jirm1a] {
        padding: 12px 14px;
    }

    .app-table-head[b-ndc0jirm1a]  th,
    .app-table-body[b-ndc0jirm1a]  td {
        padding: 12px 14px;
    }

    .app-table-command-header[b-ndc0jirm1a],
    .app-table-command-cell[b-ndc0jirm1a] {
        width: 140px;
    }

    .app-table-header-content[b-ndc0jirm1a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .sort-button[b-ndc0jirm1a] {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 640px) {
    .app-table-scroll[b-ndc0jirm1a] {
        overflow-x: visible;
    }

    .app-table-container[b-ndc0jirm1a] {
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0 -16px;
        background-color: transparent;
    }

    .app-table-state[b-ndc0jirm1a] {
        min-height: 200px;
        padding: 24px 16px;
        border: none;
    }

    .app-table[b-ndc0jirm1a] {
        background-color: transparent;
    }

    .app-table-body[b-ndc0jirm1a] {
        background-color: transparent;
    }

    .app-table-head[b-ndc0jirm1a] {
        display: none;
    }

    .app-table-body[b-ndc0jirm1a],
    .app-table-row[b-ndc0jirm1a],
    .app-table-cell[b-ndc0jirm1a] {
        display: block;
        width: 100%;
    }

    .app-table-row[b-ndc0jirm1a] {
        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-row:hover[b-ndc0jirm1a] {
        background: var(--color-white);
        border-color: var(--color-border);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transform: none;
    }

    .app-table-row:active[b-ndc0jirm1a] {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .app-table-cell[b-ndc0jirm1a] {
        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-cell[b-ndc0jirm1a]::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-cell:first-child[b-ndc0jirm1a] {
        padding-top: 20px;
    }

    .app-table-cell:last-child[b-ndc0jirm1a] {
        padding-bottom: 20px;
    }

    .app-table-command-cell[b-ndc0jirm1a] {
        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-command-cell[b-ndc0jirm1a]::before {
        display: none;
    }

    .app-table-command-cell :deep(.d-flex)[b-ndc0jirm1a] {
        display: flex;
        gap: 12px;
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Shared/Components/AppTabs.razor.rz.scp.css */
.app-tabs[b-9f68qud3uj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.app-tabs-header[b-9f68qud3uj] {
    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-9f68qud3uj] {
    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-9f68qud3uj]::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-9f68qud3uj]::before {
    opacity: 1;
}

.app-tab-button:hover[b-9f68qud3uj] {
    color: var(--bs-primary);
}

.app-tab-button.active[b-9f68qud3uj] {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

.app-tab-button.active[b-9f68qud3uj]::before {
    opacity: 0;
}

.app-tabs-content[b-9f68qud3uj] {
    padding-top: 1.5rem;
}

.app-tab-panel[b-9f68qud3uj] {
    animation: tabFadeIn-b-9f68qud3uj 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-tab-panel.active[b-9f68qud3uj] {
    display: block;
}

@keyframes tabFadeIn-b-9f68qud3uj {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .app-tabs-header[b-9f68qud3uj] {
        flex-direction: column;
        border-bottom: none;
        gap: 0.25rem;
    }

    .app-tab-button[b-9f68qud3uj] {
        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-9f68qud3uj]::before {
        border-radius: 8px;
    }

    .app-tab-button.active[b-9f68qud3uj] {
        background-color: var(--bs-primary);
        color: white;
        border-color: var(--bs-primary);
    }

    .app-tab-button.active[b-9f68qud3uj]::before {
        display: none;
    }

    .app-tabs-content[b-9f68qud3uj] {
        padding-top: 1rem;
    }
}

/* Tablet responsive */
@media (min-width: 577px) and (max-width: 768px) {
    .app-tab-button[b-9f68qud3uj] {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Accessibility */
.app-tab-button:focus-visible[b-9f68qud3uj] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    border-radius: 4px;
}
/* /Shared/Components/AppTextArea.razor.rz.scp.css */
.app-textarea[b-y00y0ggrvb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-textarea .app-form-label[b-y00y0ggrvb] {
    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-y00y0ggrvb] {
    color: var(--bs-danger);
}

.app-textarea .app-form-control[b-y00y0ggrvb] {
    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-y00y0ggrvb] {
    resize: none;
    overflow: hidden;
}

.app-textarea .app-form-control:focus[b-y00y0ggrvb] {
    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-y00y0ggrvb] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* ========== VALIDATION STATES ========== */
.app-textarea.state-error .app-form-control[b-y00y0ggrvb] {
    border-color: var(--bs-danger);
    background-color: #fff8f9;
}

.app-textarea.state-error .app-form-control:focus[b-y00y0ggrvb] {
    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-y00y0ggrvb] {
    border-color: var(--bs-success);
    background-color: #f8fdf7;
}

.app-textarea.state-success .app-form-control:focus[b-y00y0ggrvb] {
    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-y00y0ggrvb] {
    border-color: var(--bs-warning);
    background-color: #fffdf8;
}

.app-textarea.state-warning .app-form-control:focus[b-y00y0ggrvb] {
    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-y00y0ggrvb] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: 0.25rem;
}

.app-form-success-message[b-y00y0ggrvb] {
    font-size: 0.8125rem;
    color: var(--bs-success);
    margin-top: 0.25rem;
}

.app-form-warning-message[b-y00y0ggrvb] {
    font-size: 0.8125rem;
    color: var(--bs-warning);
    margin-top: 0.25rem;
}

.app-form-hint[b-y00y0ggrvb] {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* ========== CHARACTER COUNTER ========== */
.app-form-counter[b-y00y0ggrvb] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: right;
}

.app-form-counter.near-limit[b-y00y0ggrvb] {
    color: var(--bs-warning);
}

.app-form-counter.at-limit[b-y00y0ggrvb] {
    color: var(--bs-danger);
}

/* ========== DISABLED STATE ========== */
.app-textarea.disabled[b-y00y0ggrvb] {
    opacity: 0.65;
    pointer-events: none;
}

/* ========== LOADING STATE ========== */
.app-textarea.loading .app-form-control[b-y00y0ggrvb] {
    background-color: #e9ecef;
    cursor: wait;
    color: transparent;
    caret-color: transparent;
}

.app-textarea.loading .app-form-control[b-y00y0ggrvb]::placeholder {
    color: transparent;
}
/* /Shared/Components/AppTimePicker.razor.rz.scp.css */
/* ========== Container ========== */
.app-time-picker[b-7x749mdcnx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.app-time-picker.is-disabled[b-7x749mdcnx] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========== Label ========== */
.tp-label[b-7x749mdcnx] {
    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-7x749mdcnx] {
    color: var(--bs-danger);
}

/* ========== Control wrapper ========== */
.tp-control[b-7x749mdcnx] {
    position: relative;
    width: 100%;
}

/* ========== Trigger ========== */
.tp-trigger[b-7x749mdcnx] {
    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-7x749mdcnx] {
    border-color: #c8ccd4;
}

.tp-trigger:focus-visible[b-7x749mdcnx] {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.tp-trigger.is-open[b-7x749mdcnx] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(238, 212, 132, 0.25);
}

.tp-trigger:disabled[b-7x749mdcnx] {
    background: #e9ecef;
    cursor: not-allowed;
}

.tp-placeholder[b-7x749mdcnx] {
    color: #6c757d;
    flex: 1;
}

.tp-value[b-7x749mdcnx] {
    color: var(--bs-body-color);
    flex: 1;
}

.tp-trigger-icon[b-7x749mdcnx] {
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ========== Clear button ========== */
.tp-clear-btn[b-7x749mdcnx] {
    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-7x749mdcnx] {
    color: var(--bs-body-color);
    background: #f0f0f0;
}

/* ========== Bottom sheet content ========== */
.tp-content[b-7x749mdcnx] {
    padding: 1rem 0.5rem 0.5rem;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* ========== Time Drum Picker ========== */
.time-drums[b-7x749mdcnx] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.time-drum-wrapper[b-7x749mdcnx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.time-drum-wrapper.time-drum-ampm[b-7x749mdcnx] {
    min-width: 64px;
}

.time-drum-label[b-7x749mdcnx] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.time-drum-container[b-7x749mdcnx] {
    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-7x749mdcnx] {
    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-7x749mdcnx] {
    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-7x749mdcnx]::-webkit-scrollbar {
    display: none;
}

.time-drum-padding[b-7x749mdcnx] {
    height: 44px;
    flex-shrink: 0;
}

.time-drum-item[b-7x749mdcnx] {
    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-7x749mdcnx] {
    color: var(--bs-body-color);
    font-weight: 700;
}

.time-drum-colon[b-7x749mdcnx] {
    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-7x749mdcnx] {
    display: flex;
    gap: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.tp-now-btn[b-7x749mdcnx] {
    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-7x749mdcnx] {
    background: var(--bs-primary);
    color: var(--bs-gray-900);
}

.tp-confirm-btn[b-7x749mdcnx] {
    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-7x749mdcnx] {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.tp-confirm-btn:active[b-7x749mdcnx] {
    transform: translateY(0);
}

/* ========== Mobile ========== */
@media (max-width: 768px) {
    .time-drum-item[b-7x749mdcnx] {
        font-size: 1.75rem;
        min-width: 80px;
    }

    .time-drum-colon[b-7x749mdcnx] {
        font-size: 2rem;
    }

    .tp-now-btn[b-7x749mdcnx],
    .tp-confirm-btn[b-7x749mdcnx] {
        min-height: 52px;
        font-size: 1rem;
    }
}
/* /Shared/Components/AppTooltip.razor.rz.scp.css */
/* ========== WRAPPER ========== */
.app-tooltip-wrapper[b-5jsnp6lvgp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========== TOOLTIP BASE ========== */
.app-tooltip[b-5jsnp6lvgp] {
    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-5jsnp6lvgp],
.app-tooltip-wrapper:focus-within .app-tooltip[b-5jsnp6lvgp] {
    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-5jsnp6lvgp]::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
    pointer-events: none;
}

/* ========== PLACEMENT: TOP (default) ========== */
.app-tooltip--top[b-5jsnp6lvgp] {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.app-tooltip--top[b-5jsnp6lvgp]::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-5jsnp6lvgp],
.app-tooltip-wrapper:focus-within .app-tooltip--top[b-5jsnp6lvgp] {
    transform: translateX(-50%) translateY(0) !important;
}

/* ========== PLACEMENT: BOTTOM ========== */
.app-tooltip--bottom[b-5jsnp6lvgp] {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.app-tooltip--bottom[b-5jsnp6lvgp]::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-5jsnp6lvgp],
.app-tooltip-wrapper:focus-within .app-tooltip--bottom[b-5jsnp6lvgp] {
    transform: translateX(-50%) translateY(0) !important;
}

/* ========== PLACEMENT: LEFT ========== */
.app-tooltip--left[b-5jsnp6lvgp] {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

.app-tooltip--left[b-5jsnp6lvgp]::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-5jsnp6lvgp],
.app-tooltip-wrapper:focus-within .app-tooltip--left[b-5jsnp6lvgp] {
    transform: translateY(-50%) translateX(0) !important;
}

/* ========== PLACEMENT: RIGHT ========== */
.app-tooltip--right[b-5jsnp6lvgp] {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

.app-tooltip--right[b-5jsnp6lvgp]::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-5jsnp6lvgp],
.app-tooltip-wrapper:focus-within .app-tooltip--right[b-5jsnp6lvgp] {
    transform: translateY(-50%) translateX(0) !important;
}
/* /Shared/Components/AppTreeView.razor.rz.scp.css */
.app-tree-view[b-t6olp6f560] {
    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-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    background: #f1f5f9;
}

.tree-node-row:active[b-y4r3jwv8c3] {
    background: #e2e8f0;
    transition-duration: 0.05s;
}

.tree-node-row[draggable="true"][b-y4r3jwv8c3] {
    cursor: grab;
}

.tree-node-row[draggable="true"]:active[b-y4r3jwv8c3] {
    cursor: grabbing;
}

.tree-node-row.drag-over[b-y4r3jwv8c3] {
    background: rgba(59, 130, 246, 0.06);
}

.tree-node-row.drag-over[b-y4r3jwv8c3]::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-y4r3jwv8c3] {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
}

.tree-node-row.selected[b-y4r3jwv8c3]::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-y4r3jwv8c3 0.18s ease;
}

@keyframes tree-indicator-in-b-y4r3jwv8c3 {
    from { opacity: 0; transform: scaleY(0.4); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* ── Toggle (expand/collapse chevron) ──────────────────── */

.tree-node-toggle[b-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    background: #e2e8f0;
    color: #475569;
}

.tree-node-toggle-icon[b-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    transform: rotate(90deg);
}

.tree-node-toggle-placeholder[b-y4r3jwv8c3] {
    display: inline-block;
    width: 14px;
    flex-shrink: 0;
}

/* ── Icon ───────────────────────────────────────────────── */

.tree-node-icon[b-y4r3jwv8c3] {
    display: flex;
    align-items: center;
    color: #3b82f6;
    flex-shrink: 0;
    transition: color 0.15s;
}

.tree-node-row.selected .tree-node-icon[b-y4r3jwv8c3] {
    color: #0369a1;
}

/* ── Label ──────────────────────────────────────────────── */

.tree-node-label[b-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    /* 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-y4r3jwv8c3 {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tree-node-row:hover .tree-node-actions[b-y4r3jwv8c3],
.tree-node-row.selected .tree-node-actions[b-y4r3jwv8c3] {
    opacity: 1;
    pointer-events: auto;
    animation: tree-actions-in-b-y4r3jwv8c3 0.12s ease;
}

/* ── Children (animated expand/collapse) ───────────────── */

.tree-node-children[b-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tree-node-children-inner[b-y4r3jwv8c3] {
    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-y4r3jwv8c3] {
    color: #7c3aed;
}

.tree-node-row.tree-node--section.selected[b-y4r3jwv8c3] {
    background: #f5f3ff;
    color: #6d28d9;
}

.tree-node-row.tree-node--section.selected[b-y4r3jwv8c3]::before {
    background: #7c3aed;
}

.tree-node-row.tree-node--section.selected .tree-node-icon[b-y4r3jwv8c3] {
    color: #6d28d9;
}

/* ── Question group variant ─────────────────────────────── */

.tree-node-row.tree-node--group .tree-node-icon[b-y4r3jwv8c3] {
    color: #d97706;
}

.tree-node-row.tree-node--group.selected[b-y4r3jwv8c3] {
    background: #fef3c7;
    color: #b45309;
}

.tree-node-row.tree-node--group.selected[b-y4r3jwv8c3]::before {
    background: #d97706;
}

.tree-node-row.tree-node--group.selected .tree-node-icon[b-y4r3jwv8c3] {
    color: #b45309;
}

/* ── Question node variant ──────────────────────────────── */

.tree-node-row.tree-node--question[b-y4r3jwv8c3] {
    font-size: 0.8rem;
    color: #475569;
    height: 28px;
    min-height: 28px;
}

.tree-node-row.tree-node--question .tree-node-icon[b-y4r3jwv8c3] {
    color: #94a3b8;
}

.tree-node-row.tree-node--question.selected[b-y4r3jwv8c3] {
    background: #f0fdf4;
    color: #166534;
}

.tree-node-row.tree-node--question.selected[b-y4r3jwv8c3]::before {
    background: #16a34a;
}

.tree-node-row.tree-node--question.selected .tree-node-icon[b-y4r3jwv8c3] {
    color: #16a34a;
}

/* ── fix 5: dependency indicator on question icon ────────── */

.tree-node-row.tree-node--has-deps .tree-node-icon[b-y4r3jwv8c3] {
    color: #f59e0b;
}

.tree-node-row.tree-node--has-deps.selected .tree-node-icon[b-y4r3jwv8c3] {
    color: #d97706;
}

/* ── Dependency source (other questions depend on this) ─── */

.tree-node-row.tree-node--dep-source .tree-node-icon[b-y4r3jwv8c3] {
    color: #8b5cf6;
}

.tree-node-row.tree-node--dep-source.selected[b-y4r3jwv8c3] {
    background: #f5f3ff;
    color: #6d28d9;
}

.tree-node-row.tree-node--dep-source.selected[b-y4r3jwv8c3]::before {
    background: #8b5cf6;
}

.tree-node-row.tree-node--dep-source.selected .tree-node-icon[b-y4r3jwv8c3] {
    color: #6d28d9;
}

/* ── Group connector: amber left border on expanded children ─ */

.tree-node-row.tree-node--group ~ .tree-node-children .tree-node-children-inner[b-y4r3jwv8c3] {
    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-y4r3jwv8c3]::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-y4r3jwv8c3]::before,
.tree-node-row.tree-node--has-deps:not(.selected)[b-y4r3jwv8c3]::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-y4r3jwv8c3] {
    color: #f59e0b;
}

.tree-node-row.tree-node--module-one-of-parent.selected .tree-node-icon[b-y4r3jwv8c3] {
    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-y4r3jwv8c3]::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-y4r3jwv8c3] {
    display: none;
}

/* ── Mobile (<= 900px) ──────────────────────────────── */

@media (max-width: 900px) {
    .tree-node-row[b-y4r3jwv8c3] {
        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-y4r3jwv8c3] {
        min-height: 40px;
        height: 40px;
    }

    /* Bigger expand/collapse toggle for touch */
    .tree-node-toggle[b-y4r3jwv8c3] {
        width: 32px;
        height: 32px;
    }

    /* Always show non-danger actions on touch devices */
    .tree-node-actions[b-y4r3jwv8c3] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Bigger add/non-danger action buttons */
    .tree-node-actions[b-y4r3jwv8c3]  .tree-node-action-btn {
        width: 34px;
        height: 34px;
    }

    /* Hide danger buttons from the inline actions — swipe zone handles delete */
    .tree-node-actions[b-y4r3jwv8c3]  .tree-node-action-btn.danger {
        display: none;
    }

    /* ── Swipe-to-delete zone ─────────────────────────── */

    .tree-node-swipe-wrapper[b-y4r3jwv8c3] {
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
        border-radius: 8px;
    }

    .tree-node-swipe-actions[b-y4r3jwv8c3] {
        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-y4r3jwv8c3] {
        transform: translateX(0);
    }

    /* Show only danger button in swipe zone */
    .tree-node-swipe-actions[b-y4r3jwv8c3]  .tree-node-action-btn:not(.danger) {
        display: none;
    }

    .tree-node-swipe-actions[b-y4r3jwv8c3]  .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-y4r3jwv8c3] {
        transform: translateX(-72px);
    }

    /* Disable transitions while finger is moving so row tracks touch without lag */
    .tree-node-swipe-wrapper.swiping .tree-node-row[b-y4r3jwv8c3],
    .tree-node-swipe-wrapper.swiping .tree-node-swipe-actions[b-y4r3jwv8c3] {
        transition: none !important;
    }
}
/* /Shared/Components/Authorization/OfflinePage.razor.rz.scp.css */
.offline-page[b-o9k4mk7gdq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 40px 20px;
}

.offline-icon[b-o9k4mk7gdq] {
    font-size: 3rem;
    margin-bottom: 20px;
}

.offline-page h2[b-o9k4mk7gdq] {
    margin: 0 0 10px 0;
    color: #1f2937;
    font-size: 1.75rem;
}

.offline-page p[b-o9k4mk7gdq] {
    margin: 5px 0;
    color: #68707d;
    max-width: 400px;
}

.offline-hint[b-o9k4mk7gdq] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 15px !important;
}
/* /Shared/Components/Authorization/UnauthorizedAccessPage.razor.rz.scp.css */
.authorization-denied[b-6n0zzaasid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 40px 20px;
}

.authorization-denied h2[b-6n0zzaasid] {
    margin: 0 0 10px 0;
    color: #1f2937;
    font-size: 1.75rem;
}

.authorization-denied p[b-6n0zzaasid] {
    margin: 5px 0;
    color: #68707d;
    max-width: 400px;
}

@keyframes shake-b-6n0zzaasid {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}
/* /Shared/Components/EnvironmentStatusIndicator.razor.rz.scp.css */
.env-status[b-kxr1tjovsa] {
    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-kxr1tjovsa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.env-status .env-text[b-kxr1tjovsa] { display: inline; }
.env-status .env-text.short[b-kxr1tjovsa] { display: none; }

.env-status.unknown[b-kxr1tjovsa] {
    background-color: rgba(230, 230, 230, 0.12);
    color: var(--bs-dark);
}

.env-status.development[b-kxr1tjovsa] {
    background-color: var(--bs-gray-800);
    color: var(--bs-primary);
}

.env-status.staging[b-kxr1tjovsa] {
    background-color: rgba(45, 156, 219, 0.12);
    color: var(--color-blue-bright);
}

.env-status.production[b-kxr1tjovsa] {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--color-black);
}

@media (max-width: 768px) {
    .env-status[b-kxr1tjovsa] { font-size: 0.75rem; padding: 0.25rem 0.5rem; gap: 0.25rem; }
    .env-status .env-text.full[b-kxr1tjovsa] { display: none; }
    .env-status .env-text.short[b-kxr1tjovsa] { display: inline; }
}

@media (max-width: 576px) {
    .env-status[b-kxr1tjovsa] { padding: 4px; background-color: transparent !important; border-radius: 50%; min-width: 32px; min-height: 32px; justify-content: center; }
    .env-status .env-text.full[b-kxr1tjovsa] { display: none; }
    .env-status .env-text.short[b-kxr1tjovsa] { display: inline; }
}
/* /Shared/Components/ModuleRoleSelector.razor.rz.scp.css */
.module-selector-grid[b-w9mw78djpo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}

.module-selector-card[b-w9mw78djpo] {
    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-w9mw78djpo]::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-w9mw78djpo] {
    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-w9mw78djpo]::before {
    opacity: 1;
}

.module-selector-card:active:not(:disabled)[b-w9mw78djpo] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.module-selector-card.selected[b-w9mw78djpo] {
    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-w9mw78djpo]::before {
    opacity: 1;
}

.module-selector-card:disabled[b-w9mw78djpo] {
    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-w9mw78djpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
}

.module-selector-name[b-w9mw78djpo] {
    flex: 1;
    font-weight: 500;
    word-break: break-word;
    line-height: 1.4;
}

.module-selector-check[b-w9mw78djpo] {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.module-selector-check-assigned[b-w9mw78djpo] {
    color: var(--bs-success);
    flex-shrink: 0;
}

.module-selector-card.is-locked[b-w9mw78djpo] {
    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-w9mw78djpo]::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-w9mw78djpo] {
    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-w9mw78djpo] {
    color: var(--bs-success);
}

.resource-search input[type="search"][b-w9mw78djpo] {
    max-width: 280px;
}

.selected-modules-roles[b-w9mw78djpo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.module-roles-group[b-w9mw78djpo] {
    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-w9mw78djpo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
    color: var(--bs-primary);
}

.role-chips[b-w9mw78djpo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.role-chip[b-w9mw78djpo] {
    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-w9mw78djpo] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    color: var(--bs-primary);
}

.role-chip.is-selected[b-w9mw78djpo] {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: var(--bs-primary);
}

.role-chip:disabled[b-w9mw78djpo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.role-chip.is-assigned[b-w9mw78djpo] {
    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-w9mw78djpo] {
    font-size: 0.7rem;
    opacity: 0.8;
}

.module-required-resources[b-w9mw78djpo] {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.75rem;
}

@media (max-width: 768px) {
    .module-selector-grid[b-w9mw78djpo] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .role-chips[b-w9mw78djpo] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .role-chip[b-w9mw78djpo] {
        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-jcqa9h410n] {
    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-jcqa9h410n] {
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-black-rgb), 0.15);
}

.app-topbar-inner[b-jcqa9h410n] {
    width: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}

.topbar-left[b-jcqa9h410n] {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInFromLeft-b-jcqa9h410n 0.4s ease-out;
}

@keyframes slideInFromLeft-b-jcqa9h410n {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.topbar-logo[b-jcqa9h410n] {
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease-in-out;
}

.topbar-logo:hover[b-jcqa9h410n] {
    transform: scale(1.05);
}

.topbar-title[b-jcqa9h410n] {
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-body-color);
    letter-spacing: 0.5px;
}

.topbar-nav[b-jcqa9h410n] {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-left: auto;
}

/* ========== NAVIGATION ITEM WRAPPER ========== */
.nav-item[b-jcqa9h410n] {
    position: relative;
}

.nav-item[b-jcqa9h410n]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

/* ========== NAVIGATION ITEM BUTTON/LINK ========== */
.topbar-nav-item[b-jcqa9h410n] {
    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-jcqa9h410n] {
    color: var(--bs-body-color);
}

.topbar-nav-item.active[b-jcqa9h410n] {
    font-weight: var(--font-weight-semi-bold);
}

.topbar-icon[b-jcqa9h410n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-nav-item[b-jcqa9h410n]::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-jcqa9h410n]::before {
    transform: scaleX(1);
}

/* ========== NAVIGATION DROPDOWN PANEL ========== */
.topbar-dropdown-panel[b-jcqa9h410n] {
    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-jcqa9h410n {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-item:hover .topbar-dropdown-panel[b-jcqa9h410n],
.nav-item:focus-within .topbar-dropdown-panel[b-jcqa9h410n] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: topbarDropdownSlideIn-b-jcqa9h410n 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-jcqa9h410n] {
    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-jcqa9h410n] {
    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-jcqa9h410n] {
    position: relative;
    animation: slideInFromRight-b-jcqa9h410n 0.4s ease-out;
}

@keyframes slideInFromRight-b-jcqa9h410n {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.topbar-user-menu[b-jcqa9h410n]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.topbar-user-trigger[b-jcqa9h410n] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    background: var(--bs-primary);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.topbar-user-trigger:hover[b-jcqa9h410n] {
    background-color: color-mix(in srgb, var(--bs-primary), black 5%);
    transform: translateY(-1px);
}

.topbar-user-trigger:active[b-jcqa9h410n] {
    transform: translateY(0);
}

.topbar-user-avatar[b-jcqa9h410n] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    background: var(--bs-white);
    color: var(--bs-body-color);
}

.topbar-user-trigger:hover .topbar-user-avatar[b-jcqa9h410n] {
    box-shadow: 0px 4px 12px 0 rgba(var(--bs-black-rgb), 0.12);
}

.topbar-user-name[b-jcqa9h410n] {
    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-jcqa9h410n {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topbar-user-menu .topbar-dropdown-panel[b-jcqa9h410n] {
    /* place panel to the right for user menu */
    right: 0;
    left: auto;
    min-width: 220px;
}

.topbar-user-menu:hover .topbar-dropdown-panel[b-jcqa9h410n] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: topbarUserDropdownSlideIn-b-jcqa9h410n 0.3s ease-out;
    box-shadow: 0px 4px 12px 0 rgba(var(--bs-black-rgb), 0.12);
}

/* ========== DROPDOWN ITEMS ========== */
.topbar-dropdown-item[b-jcqa9h410n] {
    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-jcqa9h410n]::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-jcqa9h410n] {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.topbar-dropdown-item:hover[b-jcqa9h410n]::before {
    transform: scaleY(1);
}

.topbar-dropdown-item:focus[b-jcqa9h410n],
.topbar-dropdown-item:focus-visible[b-jcqa9h410n] {
    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-jcqa9h410n] {
    font-weight: 600;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.topbar-dropdown-item.active[b-jcqa9h410n]::before {
    transform: scaleY(1);
}

.topbar-dropdown-item.danger[b-jcqa9h410n] {
    color: var(--bs-danger);
}

.topbar-dropdown-item[disabled][b-jcqa9h410n],
.topbar-dropdown-item[aria-disabled="true"][b-jcqa9h410n] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.topbar-dropdown-item-icon[b-jcqa9h410n] {
    width: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-dropdown-divider[b-jcqa9h410n] {
    height: 1px;
    margin: 6px 0;
    padding: 0;
    background: var(--bs-gray-200);
    border: none;
}

.topbar-dropdown-version[b-jcqa9h410n] {
    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-jcqa9h410n]::-webkit-scrollbar,
.topbar-user-dropdown[b-jcqa9h410n]::-webkit-scrollbar {
    width: 7px;
}

.topbar-dropdown-panel[b-jcqa9h410n]::-webkit-scrollbar-track,
.topbar-user-dropdown[b-jcqa9h410n]::-webkit-scrollbar-track {
    background: transparent;
}

.topbar-dropdown-panel[b-jcqa9h410n]::-webkit-scrollbar-thumb,
.topbar-user-dropdown[b-jcqa9h410n]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bs-gray-400) 40%, transparent);
    border-radius: 4px;
}

.topbar-dropdown-panel[b-jcqa9h410n]::-webkit-scrollbar-thumb:hover,
.topbar-user-dropdown[b-jcqa9h410n]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--bs-gray-400) 60%, transparent);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .app-topbar[b-jcqa9h410n] {
        display: none;
    }
}

@media (max-width: 1024px) {
    .topbar-nav[b-jcqa9h410n] {
        gap: 16px;
    }

    .topbar-nav-item[b-jcqa9h410n] {
        font-size: 13px;
    }

    .app-topbar-inner[b-jcqa9h410n] {
        padding: 0 16px;
    }
}

/* ========== OFFLINE-DISABLED STATE ========== */
.nav-offline-disabled[b-jcqa9h410n] {
    pointer-events: none;
}

.nav-offline-disabled .topbar-nav-item[b-jcqa9h410n] {
    opacity: 0.5;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

.offline-badge[b-jcqa9h410n] {
    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-jcqa9h410n] {
    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-jcqa9h410n 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-jcqa9h410n {
    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-jdz45z3rir] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 16px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: transparent;
    z-index: 100;
    pointer-events: none;
}

.bottom-nav-island[b-jdz45z3rir] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
    padding: 12px 20px;
    background: var(--bs-white);
    border-radius: 28px;
    gap: 8px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
}

/* Slider under active item — position/width set by JS after render */
.nav-slider[b-jdz45z3rir] {
    position: absolute;
    left: 0;
    top: 8px;
    width: 0;
    height: calc(100% - 16px);
    border-radius: 16px;
    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-jdz45z3rir] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-600);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    flex: 1;
    min-width: 48px;
    z-index: 2;
}

.bottom-nav-item:hover[b-jdz45z3rir] {
    color: var(--bs-body-color);
}

.bottom-nav-item.active[b-jdz45z3rir] {
    color: var(--bs-white);
}

.bottom-nav-item.active .nav-icon-wrapper[b-jdz45z3rir] {
    transform: scale(1.1);
}

.nav-icon-wrapper[b-jdz45z3rir] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease-in-out;
}

/* Reserve space for centered FAB to keep gaps equal */
.fab-spacer[b-jdz45z3rir] {
    display: block;
    flex: 0 0 56px;
    width: 56px;
}

/* ========== FAB (Floating Action Button) ========== */
.bottom-nav-fab[b-jdz45z3rir] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 4px solid var(--bs-white);
    cursor: pointer;
    z-index: 101;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.bottom-nav-fab:hover[b-jdz45z3rir] {
    background: color-mix(in srgb, var(--bs-primary), black 8%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%) scale(1.05);
}

.bottom-nav-fab:active[b-jdz45z3rir] {
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fab-inner[b-jdz45z3rir] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 769px) {
    .bottom-nav[b-jdz45z3rir] {
        display: none;
    }
}

@media (max-width: 480px) {
    .bottom-nav[b-jdz45z3rir] {
        padding: 0 12px 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav-island[b-jdz45z3rir] {
        padding: 10px 16px;
        border-radius: 26px;
        max-width: calc(100% - 24px);
    }

    .bottom-nav-item[b-jdz45z3rir] {
        padding: 8px 12px;
        min-width: 44px;
    }

    .nav-icon-wrapper[b-jdz45z3rir] {
        width: 22px;
        height: 22px;
    }
    
    .fab-spacer[b-jdz45z3rir] {
        flex: 0 0 52px;
        width: 52px;
    }

    .bottom-nav-fab[b-jdz45z3rir] {
        width: 60px;
        height: 60px;
        border-width: 3px;
    }
}

@media (max-width: 360px) {
    .bottom-nav-island[b-jdz45z3rir] {
        padding: 8px 12px;
        border-radius: 20px;
    }

    .bottom-nav-item[b-jdz45z3rir] {
        padding: 6px 10px;
    }
}

/* ========== OFFLINE-DISABLED STATE ========== */
.bottom-nav-offline[b-jdz45z3rir] {
    opacity: 0.35;
    filter: grayscale(0.6);
    pointer-events: none;
    position: relative;
}

.offline-badge-mobile[b-jdz45z3rir] {
    position: absolute;
    top: 4px;
    right: 8px;
    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.1);
}

.fab-offline[b-jdz45z3rir] {
    opacity: 0.4;
    filter: grayscale(0.6);
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.fab-offline-badge[b-jdz45z3rir] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-warning);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========== ANIMATIONS ========== */
@keyframes fabScale-b-jdz45z3rir {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ========== PENDING APPROVALS BADGE ========== */
.nav-pending-badge[b-jdz45z3rir] {
    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-jdz45z3rir 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes badge-pulse-b-jdz45z3rir {
    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);
    }
}

/* ========== FAB IN-FLOW (asymmetric layout) ========== */
.bottom-nav-fab.fab-in-flow[b-jdz45z3rir] {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.bottom-nav-fab.fab-in-flow:hover[b-jdz45z3rir] {
    transform: scale(1.05);
}

.bottom-nav-fab.fab-in-flow:active[b-jdz45z3rir] {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* /Shared/Components/NetworkStatusIndicator.razor.rz.scp.css */
/* Network Status Indicator */
.network-status[b-ub2ao9bnvl] {
    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-ub2ao9bnvl] {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--bs-success);
}

.network-status.offline[b-ub2ao9bnvl] {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.network-icon[b-ub2ao9bnvl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.network-text[b-ub2ao9bnvl] {
    font-weight: 500;
}

/* Pulse animation for offline state */
.network-status.offline .network-icon[b-ub2ao9bnvl] {
    animation: pulse-b-ub2ao9bnvl 2s ease-in-out infinite;
}

@keyframes pulse-b-ub2ao9bnvl {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .network-status[b-ub2ao9bnvl] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    
    .network-text[b-ub2ao9bnvl] {
        display: none;
    }
}

/* Extra small - for mobile header (icon only) */
@media (max-width: 576px) {
    .network-status[b-ub2ao9bnvl] {
        padding: 4px;
        background-color: transparent !important;
        border-radius: 50%;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }
    
    .network-status.offline[b-ub2ao9bnvl] {
        background-color: transparent !important;
    }
    
    .network-status.online[b-ub2ao9bnvl] {
        background-color: transparent !important;
    }
}
/* /Shared/Components/PwaUpdateButton.razor.rz.scp.css */
/* ===== PWA UPDATE FLOATING BUTTON ===== */
.pwa-update-fab[b-eobkzw3ldo] {
    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-eobkzw3ldo 2s ease-in-out infinite;
}

/* On mobile: float above the bottom nav bar (96px) */
@media (max-width: 767px) {
    .pwa-update-fab[b-eobkzw3ldo] {
        bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }
}

@media (hover: hover) {
    .pwa-update-fab:hover[b-eobkzw3ldo] {
        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-eobkzw3ldo] {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.pwa-update-icon[b-eobkzw3ldo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes pwa-pulse-b-eobkzw3ldo {
    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/SyncStatusIndicator.razor.rz.scp.css */
/* Sync Status Indicator */
.sync-status[b-emia8r2jk1] {
    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-emia8r2jk1] {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--bs-success);
}

.sync-status.offline[b-emia8r2jk1] {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.sync-status.syncing[b-emia8r2jk1] {
    background-color: var(--bs-primary);
    color: #000;
}

.sync-icon[b-emia8r2jk1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sync-icon.syncing[b-emia8r2jk1] {
    animation: spin-b-emia8r2jk1 1s linear infinite;
}

.sync-text[b-emia8r2jk1] {
    font-weight: 500;
}

@keyframes spin-b-emia8r2jk1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sync-status[b-emia8r2jk1] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    
    .sync-text[b-emia8r2jk1] {
        display: none;
    }
}

/* Extra small - for mobile header (icon only) */
@media (max-width: 576px) {
    .sync-status[b-emia8r2jk1] {
        padding: 4px;
        background-color: transparent !important;
        border-radius: 50%;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }
    
    .sync-status.online[b-emia8r2jk1] {
        background-color: transparent !important;
    }
    
    .sync-status.offline[b-emia8r2jk1] {
        background-color: transparent !important;
    }
    
    .sync-status.syncing[b-emia8r2jk1] {
        background-color: transparent !important;
    }
}
/* /Shared/Layouts/AuthLayout.razor.rz.scp.css */
.auth-layout[b-1dhz65f4yy] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    overflow-y: auto;
}

.auth-container[b-1dhz65f4yy] {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.auth-layout-version[b-1dhz65f4yy] {
    position: fixed;
    bottom: 0.75rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-secondary);
    pointer-events: none;
}
/* /Shared/Layouts/DesktopLayout.razor.rz.scp.css */
.desktop-layout[b-aa3j4vi20g] {
    height: calc(100dvh - 64px);
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.desktop-container[b-aa3j4vi20g] {
    width: 100%;
    padding: 1rem 2rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.desktop-header[b-aa3j4vi20g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.status-indicators[b-aa3j4vi20g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* /Shared/Layouts/MobileLayout.razor.rz.scp.css */
.mobile-layout[b-e4f4kvgavy] {
    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: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 96px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Mobile Header - Respects safe area */
.mobile-header[b-e4f4kvgavy] {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 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-e4f4kvgavy] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mobile-back-btn[b-e4f4kvgavy] {
    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-e4f4kvgavy] {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

@media (hover: hover) {
    .mobile-back-btn:hover[b-e4f4kvgavy] {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
    }
}

.mobile-back-btn:focus-visible[b-e4f4kvgavy] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.mobile-logo[b-e4f4kvgavy] {
    height: 28px;
    width: auto;
}

.mobile-header-right[b-e4f4kvgavy] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-container[b-e4f4kvgavy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-bottom: 0;
    overflow-x: hidden;
    /* Only the body content scrolls; the header stays fixed above */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Contain overscroll so pull-to-refresh is handled by our own code */
    overscroll-behavior-y: contain;
    position: relative;
}

/* Slide animations triggered by nav actions */
.mobile-container.slide-left[b-e4f4kvgavy] {
    animation: slideInFromRight-b-e4f4kvgavy 300ms cubic-bezier(.2,.9,.2,1);
}

.mobile-container.slide-right[b-e4f4kvgavy] {
    animation: slideInFromLeft-b-e4f4kvgavy 300ms cubic-bezier(.2,.9,.2,1);
}

@keyframes slideInFromRight-b-e4f4kvgavy {
    0% { transform: translateX(12%); opacity: 0.95; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromLeft-b-e4f4kvgavy {
    0% { transform: translateX(-12%); opacity: 0.95; }
    100% { transform: translateX(0); opacity: 1; }
}