/* /Components/AI/QuickActions.razor.rz.scp.css */
[b-hbbirseo4c] .quick-actions {
    display: flex;
    gap: var(--tm-space-2, 0.5rem);
}
/* /Components/Analytics/AppAnalyticsPanel.razor.rz.scp.css */
.analytics-panel[b-5d7nwj1ild] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
}

.panel-header[b-5d7nwj1ild] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.panel-header h3[b-5d7nwj1ild] {
    flex-shrink: 0;
}

.panel-header h3[b-5d7nwj1ild] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.period-selector[b-5d7nwj1ild] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.period-selector[b-5d7nwj1ild]  .tm-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: auto;
}

.panel-loading[b-5d7nwj1ild], .panel-empty[b-5d7nwj1ild] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    color: var(--color-text-tertiary, #9ca3af);
}

.stats-grid[b-5d7nwj1ild] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card[b-5d7nwj1ild] {
    background: var(--color-surface-secondary, #f9fafb);
    border: 1px solid var(--color-border-light, #f3f4f6);
    border-radius: 8px;
    padding: 0.875rem;
    text-align: center;
}

.stat-value[b-5d7nwj1ild] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary, #111827);
    margin-bottom: 0.25rem;
}

.stat-label[b-5d7nwj1ild] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.no-data[b-5d7nwj1ild] {
    color: var(--color-text-tertiary, #9ca3af);
}

.trend-section[b-5d7nwj1ild] {
    margin-bottom: 1.25rem;
}

.trend-section h4[b-5d7nwj1ild] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 0.75rem 0;
}

.trend-chart[b-5d7nwj1ild] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    padding: 0;
}

.trend-bar-wrapper[b-5d7nwj1ild] {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: default;
}

.trend-bar[b-5d7nwj1ild] {
    width: 100%;
    background: var(--color-primary, #6366f1);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
    opacity: 0.8;
}

.trend-bar-wrapper:hover .trend-bar[b-5d7nwj1ild] {
    opacity: 1;
}

.rating-distribution h4[b-5d7nwj1ild] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    margin: 0 0 0.5rem 0;
}

.distribution-row[b-5d7nwj1ild] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.dist-label[b-5d7nwj1ild] {
    width: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-align: right;
}

.distribution-row[b-5d7nwj1ild]  .icon {
    color: var(--color-warning, #f59e0b);
    flex-shrink: 0;
}

.dist-bar-track[b-5d7nwj1ild] {
    flex: 1;
    height: 8px;
    background: var(--color-surface-secondary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar[b-5d7nwj1ild] {
    height: 100%;
    background: var(--color-warning, #f59e0b);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dist-count[b-5d7nwj1ild] {
    width: 30px;
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #9ca3af);
    text-align: right;
}
/* /Components/Analytics/MarketplaceReviewPanel.razor.rz.scp.css */
.review-panel[b-7hpfv07hzc] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
}

.panel-header[b-7hpfv07hzc] {
    margin-bottom: 1rem;
}

.panel-header h3[b-7hpfv07hzc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.panel-loading[b-7hpfv07hzc] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
}

.scores-row[b-7hpfv07hzc] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.score-card[b-7hpfv07hzc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.score-label[b-7hpfv07hzc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.review-form[b-7hpfv07hzc] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--color-surface-secondary, #f9fafb);
    border-radius: 8px;
}

.form-field[b-7hpfv07hzc] {
    margin-bottom: 0.75rem;
}

.form-field label[b-7hpfv07hzc] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 0.25rem;
}

.form-actions[b-7hpfv07hzc] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
/* /Components/Analytics/RatingStars.razor.rz.scp.css */
.rating-stars[b-sgtozbzpeh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.rating-stars.interactive .star[b-sgtozbzpeh] {
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}

.rating-stars.interactive .star:hover[b-sgtozbzpeh] {
    transform: scale(1.15);
}

.star[b-sgtozbzpeh] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-tertiary, #9ca3af);
    transition: color 0.15s ease;
}

.star-filled[b-sgtozbzpeh] {
    color: var(--color-warning, #f59e0b);
}

.star-half[b-sgtozbzpeh] {
    color: var(--color-warning, #f59e0b);
    opacity: 0.6;
}

.star-hover[b-sgtozbzpeh] {
    color: var(--color-warning, #f59e0b);
}

.star-empty[b-sgtozbzpeh] {
    color: var(--color-text-tertiary, #9ca3af);
    opacity: 0.4;
}

.rating-label[b-sgtozbzpeh] {
    margin-left: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
}
/* /Components/Analytics/VariantComparisonPanel.razor.rz.scp.css */
.variant-comparison-panel[b-dqzsrsylr2] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
}

.panel-header[b-dqzsrsylr2] {
    margin-bottom: 1rem;
}

.panel-header h3[b-dqzsrsylr2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.panel-loading[b-dqzsrsylr2], .panel-empty[b-dqzsrsylr2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    color: var(--color-text-tertiary, #9ca3af);
}

.comparison-table-wrapper[b-dqzsrsylr2] {
    overflow-x: auto;
}

.comparison-table[b-dqzsrsylr2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.comparison-table th[b-dqzsrsylr2] {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-table th.numeric[b-dqzsrsylr2] {
    text-align: right;
}

.comparison-table td[b-dqzsrsylr2] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    color: var(--color-text-primary, #111827);
}

.comparison-table td.numeric[b-dqzsrsylr2] {
    text-align: right;
}

.control-row[b-dqzsrsylr2] {
    background: var(--color-primary-subtle, #eef2ff);
}

.variant-name[b-dqzsrsylr2] {
    font-weight: 500;
}

.control-badge[b-dqzsrsylr2] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary, #6366f1);
    background: var(--color-primary-subtle, #eef2ff);
    border: 1px solid var(--color-primary-light, #c7d2fe);
    border-radius: 999px;
}

.no-data[b-dqzsrsylr2] {
    color: var(--color-text-tertiary, #9ca3af);
}

.better[b-dqzsrsylr2] {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-success, #10b981);
}

.worse[b-dqzsrsylr2] {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-error, #ef4444);
}
/* /Components/AuditLog/AuditLogTimeline.razor.rz.scp.css */
.audit-timeline[b-flaminl1o0] {
    padding: 1rem 0;
}

.timeline-title[b-flaminl1o0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.timeline-loading[b-flaminl1o0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.timeline-empty[b-flaminl1o0] {
    padding: 0.75rem 0;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
}

.timeline-items[b-flaminl1o0] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 1.5rem;
}

.timeline-items[b-flaminl1o0]::before {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border-default);
}

.timeline-item[b-flaminl1o0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
    padding: 0.5rem 0;
}

.timeline-dot[b-flaminl1o0] {
    position: absolute;
    left: -1.5rem;
    top: 0.75rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--border-default);
    border: 2px solid var(--surface-primary);
    z-index: 1;
    transform: translateX(0.125rem);
}

.dot-success[b-flaminl1o0] {
    background: var(--color-success);
}

.dot-info[b-flaminl1o0] {
    background: var(--color-info);
}

.dot-danger[b-flaminl1o0] {
    background: var(--color-danger);
}

.dot-warning[b-flaminl1o0] {
    background: var(--color-warning);
}

.dot-default[b-flaminl1o0] {
    background: var(--text-tertiary);
}

.timeline-content[b-flaminl1o0] {
    flex: 1;
    min-width: 0;
}

.timeline-header[b-flaminl1o0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.timeline-action[b-flaminl1o0] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timeline-date[b-flaminl1o0] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.timeline-meta[b-flaminl1o0] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.timeline-user[b-flaminl1o0] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.timeline-show-more[b-flaminl1o0] {
    padding-top: 0.5rem;
    padding-left: 0;
}

.show-more-btn[b-flaminl1o0] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.25rem 0;
}

.show-more-btn:hover[b-flaminl1o0] {
    text-decoration: underline;
}
/* /Components/ChangeRequests/ProposedChangeDiff.razor.rz.scp.css */
.diff-container[b-ighos8skm7] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.diff-table[b-ighos8skm7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.diff-table thead th[b-ighos8skm7] {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.field-col[b-ighos8skm7] {
    width: 20%;
}

.value-col[b-ighos8skm7] {
    width: 40%;
}

.diff-table tbody td[b-ighos8skm7] {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.diff-table tbody tr:last-child td[b-ighos8skm7] {
    border-bottom: none;
}

.row-changed[b-ighos8skm7] {
    background: var(--bg-secondary);
}

.row-unchanged[b-ighos8skm7] {
    opacity: 0.7;
}

.field-name[b-ighos8skm7] {
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.change-indicator[b-ighos8skm7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning);
    flex-shrink: 0;
}

.value-cell[b-ighos8skm7] {
    word-break: break-word;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.value-removed[b-ighos8skm7] {
    color: var(--color-danger);
    text-decoration: line-through;
    opacity: 0.8;
}

.value-added[b-ighos8skm7] {
    color: var(--color-success);
    font-weight: 500;
}

.value-unchanged[b-ighos8skm7] {
    color: var(--text-secondary);
}
/* /Components/Dialogs/AIAssistDialog.razor.rz.scp.css */
[b-mwflsnnenh] .ai-assist-dialog {
    max-width: 600px;
    width: 100%;
}

[b-mwflsnnenh] .ai-assist-dialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tm-space-5, 1.25rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-mwflsnnenh] .ai-assist-dialog .dialog-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

[b-mwflsnnenh] .ai-assist-dialog .dialog-content {
    padding: var(--tm-space-6, 1.5rem);
}

[b-mwflsnnenh] .ai-assist-dialog .description {
    color: var(--tm-text-secondary, #475569);
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-mwflsnnenh] .ai-assist-dialog .no-api-key {
    text-align: center;
    padding: var(--tm-space-8, 2rem);
}

[b-mwflsnnenh] .ai-assist-dialog .warning-icon {
    font-size: 3rem;
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-mwflsnnenh] .ai-assist-dialog .suggestion-result {
    margin-top: var(--tm-space-6, 1.5rem);
    padding-top: var(--tm-space-6, 1.5rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-mwflsnnenh] .ai-assist-dialog .suggestion-result h4 {
    font-size: var(--tm-font-size-md, 1rem);
    font-weight: 600;
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-mwflsnnenh] .ai-assist-dialog .suggestion-actions {
    display: flex;
    gap: var(--tm-space-3, 0.75rem);
    margin-top: var(--tm-space-4, 1rem);
}
/* /Components/Dialogs/AIVariablesDialog.razor.rz.scp.css */
[b-jp37jghn22] .ai-variables-dialog {
    max-width: 500px;
    width: 100%;
}

[b-jp37jghn22] .ai-variables-dialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tm-space-5, 1.25rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-jp37jghn22] .ai-variables-dialog .dialog-content {
    padding: var(--tm-space-6, 1.5rem);
    max-height: 60vh;
    overflow-y: auto;
}

[b-jp37jghn22] .ai-variables-dialog .variables-list {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-4, 1rem);
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-jp37jghn22] .ai-variables-dialog .variable-item {
    display: flex;
    align-items: flex-start;
    gap: var(--tm-space-3, 0.75rem);
    padding: var(--tm-space-4, 1rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-md, 0.375rem);
}

[b-jp37jghn22] .ai-variables-dialog .variable-info {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-1, 0.25rem);
}

[b-jp37jghn22] .ai-variables-dialog .variable-name {
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

[b-jp37jghn22] .ai-variables-dialog .variable-desc {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #475569);
}

[b-jp37jghn22] .ai-variables-dialog .variable-default {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #475569);
}

[b-jp37jghn22] .ai-variables-dialog .selection-actions {
    display: flex;
    gap: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-6, 1.5rem);
}

[b-jp37jghn22] .ai-variables-dialog .dialog-actions {
    display: flex;
    gap: var(--tm-space-3, 0.75rem);
    justify-content: flex-end;
    padding-top: var(--tm-space-4, 1rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Components/Dialogs/AppVariableDialog.razor.rz.scp.css */
.dialog-tabs[b-aysnsyl6ii] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    margin-bottom: var(--tm-space-5, 1.25rem);
}

.tab-button[b-aysnsyl6ii] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tm-space-2, 0.5rem);
    padding: var(--tm-space-3, 0.75rem) var(--tm-space-4, 1rem);
    border: none;
    background: none;
    color: var(--tm-text-secondary, #64748b);
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.tab-button:hover[b-aysnsyl6ii] {
    color: var(--tm-text-primary, #1e293b);
    background-color: var(--tm-hover-bg, #f8fafc);
}

.tab-button:focus[b-aysnsyl6ii] {
    outline: 2px solid var(--tm-color-primary-light, #93c5fd);
    outline-offset: -2px;
}

.tab-button.active[b-aysnsyl6ii] {
    color: var(--tm-color-primary, #3b82f6);
    border-bottom-color: var(--tm-color-primary, #3b82f6);
    background-color: var(--tm-color-primary-subtle, #eff6ff);
    font-weight: 600;
}

.tab-content[b-aysnsyl6ii] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-4, 1rem);
}

.form-row[b-aysnsyl6ii] {
    display: flex;
    gap: var(--tm-space-4, 1rem);
    align-items: flex-start;
}

.form-field-half[b-aysnsyl6ii] {
    flex: 1;
    min-width: 0;
}

.field-row-checkbox[b-aysnsyl6ii] {
    padding-top: calc(var(--tm-space-6, 1.5rem) + 2px);
    display: flex;
    align-items: center;
}

.field-hint[b-aysnsyl6ii] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-tertiary, #94a3b8);
    margin-top: var(--tm-space-1, 0.25rem);
}

.field-row[b-aysnsyl6ii] {
    margin-top: var(--tm-space-2, 0.5rem);
}

.dialog-footer[b-aysnsyl6ii] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tm-space-3, 0.75rem);
    margin-top: var(--tm-space-5, 1.25rem);
    padding-top: var(--tm-space-4, 1rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.save-button-wrapper[b-aysnsyl6ii] {
    position: relative;
    display: inline-block;
}

.variable-preview[b-aysnsyl6ii] {
    background: linear-gradient(135deg, var(--tm-color-primary-subtle, #eff6ff) 0%, var(--tm-surface-elevated, #f8fafc) 100%);
    border: 1px solid var(--tm-color-primary-light, #bfdbfe);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: var(--tm-space-4, 1rem);
    margin-top: var(--tm-space-3, 0.75rem);
}

.preview-header[b-aysnsyl6ii] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--tm-color-primary, #3b82f6);
    margin-bottom: var(--tm-space-3, 0.75rem);
    padding-bottom: var(--tm-space-2, 0.5rem);
    border-bottom: 1px solid var(--tm-color-primary-light, #bfdbfe);
}

.preview-content[b-aysnsyl6ii] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-2, 0.5rem);
}

.preview-row[b-aysnsyl6ii] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

.preview-label[b-aysnsyl6ii] {
    color: var(--tm-text-secondary, #64748b);
    font-weight: 500;
    min-width: 120px;
}

.preview-value[b-aysnsyl6ii] {
    color: var(--tm-text-primary, #1e293b);
    font-family: var(--tm-font-mono, ui-monospace, SFMono-Regular, monospace);
    background: var(--tm-surface-default, #ffffff);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-sm, 0.25rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Validation styles */
.validation-error[b-aysnsyl6ii] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
    color: var(--tm-color-error, #ef4444);
    font-size: var(--tm-font-size-xs, 0.75rem);
    margin-top: var(--tm-space-1, 0.25rem);
}

.validation-error[b-aysnsyl6ii]  .tm-icon {
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .form-row[b-aysnsyl6ii] {
        flex-direction: column;
    }
    
    .field-row-checkbox[b-aysnsyl6ii] {
        padding-top: 0;
    }
    
    .dialog-tabs[b-aysnsyl6ii] {
        font-size: var(--tm-font-size-xs, 0.75rem);
    }
    
    .tab-button[b-aysnsyl6ii] {
        padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    }
    
    .preview-label[b-aysnsyl6ii] {
        min-width: auto;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .tab-button:hover[b-aysnsyl6ii] {
        background-color: var(--tm-hover-bg-dark, #1e293b);
    }
    
    .tab-button.active[b-aysnsyl6ii] {
        background-color: var(--tm-color-primary-subtle-dark, #1e3a5f);
    }
    
    .variable-preview[b-aysnsyl6ii] {
        background: linear-gradient(135deg, var(--tm-color-primary-subtle-dark, #1e3a5f) 0%, var(--tm-surface-elevated-dark, #0f172a) 100%);
        border-color: var(--tm-color-primary-dark, #3b82f6);
    }
    
    .preview-header[b-aysnsyl6ii] {
        border-bottom-color: var(--tm-color-primary-dark, #3b82f6);
    }
    
    .preview-value[b-aysnsyl6ii] {
        background: var(--tm-surface-default-dark, #1e293b);
        border-color: var(--tm-border-color-dark, #334155);
    }
}
/* /Components/Dialogs/DetectedVariablesDialog.razor.rz.scp.css */
.dialog-description[b-y65mslg04c] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: var(--tm-space-4, 1rem);
}

.selection-actions[b-y65mslg04c] {
    display: flex;
    gap: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-3, 0.75rem);
}

.variables-table[b-y65mslg04c] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    overflow: hidden;
}

.table-header[b-y65mslg04c] {
    display: grid;
    grid-template-columns: 60px 140px 120px 1fr 140px 70px;
    gap: var(--tm-space-2, 0.5rem);
    padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    background: var(--tm-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    font-size: var(--tm-font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--tm-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-items: center;
}

.table-row[b-y65mslg04c] {
    display: grid;
    grid-template-columns: 60px 140px 120px 1fr 140px 70px;
    gap: var(--tm-space-2, 0.5rem);
    padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    align-items: center;
}

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

.col-select[b-y65mslg04c],
.col-required[b-y65mslg04c] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-name code[b-y65mslg04c] {
    font-family: var(--tm-font-mono, 'Fira Code', monospace);
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-color-primary, #3b82f6);
    background: var(--tm-color-primary-50, #eff6ff);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-sm, 0.25rem);
}

.dialog-footer[b-y65mslg04c] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tm-space-3, 0.75rem);
    margin-top: var(--tm-space-5, 1.25rem);
    padding-top: var(--tm-space-4, 1rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Components/History/HistoryTagSelector.razor.rz.scp.css */
.history-tag-selector[b-veevq4zoz9] {
    display: flex;
    align-items: flex-start;
}

.tag-display[b-veevq4zoz9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.tag-chip[b-veevq4zoz9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: color-mix(in srgb, var(--tag-color, var(--color-primary)) 15%, transparent);
    color: var(--tag-color, var(--color-primary));
    border: 1px solid color-mix(in srgb, var(--tag-color, var(--color-primary)) 30%, transparent);
}

.tag-chip--readonly[b-veevq4zoz9] {
    cursor: default;
}

.tag-edit-panel[b-veevq4zoz9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    min-width: 200px;
}

.tag-checkboxes[b-veevq4zoz9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}

.tag-checkbox[b-veevq4zoz9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.tag-checkbox:hover[b-veevq4zoz9] {
    background-color: var(--color-hover, #f1f5f9);
}

.tag-checkbox input[type="checkbox"][b-veevq4zoz9] {
    cursor: pointer;
}

.tag-edit-actions[b-veevq4zoz9] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border, #e2e8f0);
    padding-top: 0.5rem;
}
/* /Components/Libraries/AsyncImportDialog.razor.rz.scp.css */
.async-import-dialog[b-saoayjttob] {
    padding: 1rem;
}

.progress-section[b-saoayjttob] {
    margin-bottom: 1.5rem;
}

.progress-header[b-saoayjttob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-label[b-saoayjttob] {
    font-weight: 600;
    color: var(--text-primary);
}

.progress-percentage[b-saoayjttob] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
}

.status-message[b-saoayjttob] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
}

.status-info[b-saoayjttob] {
    background-color: var(--info-bg);
    color: var(--info-text);
}

.status-success[b-saoayjttob] {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.status-error[b-saoayjttob] {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.status-warning[b-saoayjttob] {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.job-info[b-saoayjttob] {
    text-align: center;
    margin-bottom: 1rem;
}

.error-details[b-saoayjttob] {
    margin-bottom: 1rem;
}

.dependencies-section[b-saoayjttob] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.dependencies-section h5[b-saoayjttob] {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.dependencies-list[b-saoayjttob] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .progress-percentage[b-saoayjttob] {
        color: var(--primary-light);
    }
}
/* /Components/Prompts/PromptManagerPanel.razor.rz.scp.css */
/* PromptManagerPanel.razor.css */

[b-bs4gw8igyt] .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.panel-header[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-4, 1rem);
    margin-bottom: var(--tm-space-4, 1rem);
    padding-bottom: var(--tm-space-3, 0.75rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    flex-wrap: wrap;
}

.panel-header h3[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    margin: 0;
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.panel-loading[b-bs4gw8igyt],
.panel-empty[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tm-space-8, 2rem);
    color: var(--tm-text-secondary, #64748b);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

/* Prompt Cards */
.prompt-list[b-bs4gw8igyt] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3, 0.75rem);
}

.prompt-card[b-bs4gw8igyt] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: var(--tm-space-4, 1rem);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.prompt-card:hover[b-bs4gw8igyt] {
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.prompt-card-header[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-3, 0.75rem);
    margin-bottom: var(--tm-space-2, 0.5rem);
}

.prompt-name-row[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.prompt-name[b-bs4gw8igyt] {
    font-weight: 600;
    color: var(--tm-color-primary, #3b82f6);
    font-size: var(--tm-font-size-base, 1rem);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prompt-name:hover[b-bs4gw8igyt] {
    color: var(--tm-color-primary-dark, #2563eb);
    text-decoration: underline;
}

.prompt-reorder[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
}

.prompt-description[b-bs4gw8igyt] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: var(--tm-space-2, 0.5rem);
    line-height: 1.5;
}

.prompt-preview[b-bs4gw8igyt] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-muted, #94a3b8);
    margin-bottom: var(--tm-space-3, 0.75rem);
    line-height: 1.4;
}

.preview-label[b-bs4gw8igyt] {
    font-weight: 500;
}

.preview-value[b-bs4gw8igyt] {
    font-style: italic;
}

/* Prompt Footer */
.prompt-footer[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-3, 0.75rem);
    flex-wrap: wrap;
    padding-top: var(--tm-space-3, 0.75rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.prompt-actions[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
}

/* Dialog Footer */
.dialog-footer[b-bs4gw8igyt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tm-space-3, 0.75rem);
    margin-top: var(--tm-space-6, 1.5rem);
    padding-top: var(--tm-space-4, 1rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Responsive */
@media (max-width: 640px) {
    .panel-header[b-bs4gw8igyt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .prompt-card-header[b-bs4gw8igyt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .prompt-reorder[b-bs4gw8igyt] {
        width: 100%;
        justify-content: flex-end;
    }

    .prompt-footer[b-bs4gw8igyt] {
        flex-direction: column;
        align-items: stretch;
    }

    .prompt-actions[b-bs4gw8igyt] {
        justify-content: flex-end;
    }
}
/* /Components/Pwa/OfflineIndicator.razor.rz.scp.css */
[b-1c01cv8tag] .offline-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--tm-color-warning, #f59e0b);
    color: #fff;
    padding: var(--tm-space-3, 0.75rem) var(--tm-space-4, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tm-space-2, 0.5rem);
    z-index: 1000;
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: 500;
    animation: slideUp-b-1c01cv8tag 0.3s ease;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

[b-1c01cv8tag] .offline-bar svg {
    width: 1.25rem;
    height: 1.25rem;
}

@keyframes slideUp-b-1c01cv8tag {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Pwa/PwaInstallPrompt.razor.rz.scp.css */
[b-aeco5cwmah] .pwa-install-prompt {
    position: fixed;
    bottom: var(--tm-space-4, 1rem);
    left: var(--tm-space-4, 1rem);
    right: var(--tm-space-4, 1rem);
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: 0.75rem;
    box-shadow: var(--tm-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
    padding: var(--tm-space-5, 1.25rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-4, 1rem);
    z-index: 1000;
    animation: slideUp-b-aeco5cwmah 0.3s ease;
    max-width: 500px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    [b-aeco5cwmah] .pwa-install-prompt {
        left: auto;
        right: var(--tm-space-4, 1rem);
    }
}

[b-aeco5cwmah] .pwa-install-content {
    display: flex;
    align-items: center;
    gap: var(--tm-space-4, 1rem);
}

[b-aeco5cwmah] .pwa-install-content svg {
    color: var(--tm-color-primary, #3b82f6);
    flex-shrink: 0;
}

[b-aeco5cwmah] .pwa-install-text h4 {
    font-size: var(--tm-font-size-md, 1rem);
    font-weight: 600;
    margin: 0 0 var(--tm-space-1, 0.25rem) 0;
    color: var(--tm-text-primary, #0f172a);
}

[b-aeco5cwmah] .pwa-install-text p {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #475569);
    margin: 0;
}

[b-aeco5cwmah] .pwa-install-actions {
    display: flex;
    gap: var(--tm-space-2, 0.5rem);
    flex-shrink: 0;
}

@keyframes slideUp-b-aeco5cwmah {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Pwa/PwaUpdateNotification.razor.rz.scp.css */
[b-vnklappctc] .pwa-update-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #4f46e5;
    color: #fff;
    padding: 0.625rem var(--tm-space-4, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tm-space-4, 1rem);
    z-index: 1100;
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: 500;
    animation: slideDown-b-vnklappctc 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

[b-vnklappctc] .pwa-update-content {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
}

[b-vnklappctc] .pwa-update-content svg {
    width: 1.125rem;
    height: 1.125rem;
    animation: spin-b-vnklappctc 2s linear infinite;
}

[b-vnklappctc] .pwa-update-actions {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
}

[b-vnklappctc] .pwa-update-apply {
    background-color: #fff;
    color: #4f46e5;
    border: none;
    border-radius: var(--tm-radius-md, 0.375rem);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-3, 0.75rem);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

[b-vnklappctc] .pwa-update-apply:hover {
    background-color: #e0e7ff;
}

[b-vnklappctc] .pwa-update-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: var(--tm-space-1, 0.25rem);
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

[b-vnklappctc] .pwa-update-dismiss:hover {
    color: #fff;
}

@keyframes slideDown-b-vnklappctc {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spin-b-vnklappctc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Shared/TagPicker.razor.rz.scp.css */
/* TagPicker - Scoped CSS with Dark Mode Support */

.tag-picker[b-1l9rk2qrj1] {
    position: relative;
}

.tag-picker__selected[b-1l9rk2qrj1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-2, 0.5rem);
}

.tag-picker__tag[b-1l9rk2qrj1] {
    display: inline-flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-md, 0.375rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

.tag-picker__tag--selected[b-1l9rk2qrj1] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.tag-picker__tag-dot[b-1l9rk2qrj1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-picker__tag-text[b-1l9rk2qrj1] {
    font-weight: 500;
}

.tag-picker__tag-remove[b-1l9rk2qrj1] {
    background: none;
    border: none;
    color: var(--tm-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0;
    margin-left: var(--tm-space-1, 0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--tm-radius-sm, 0.25rem);
    transition: all 0.15s ease;
}

.tag-picker__tag-remove:hover[b-1l9rk2qrj1] {
    background-color: var(--tm-color-danger-light, #fee2e2);
    color: var(--tm-color-danger, #ef4444);
}

.tag-picker__dropdown[b-1l9rk2qrj1] {
    position: relative;
}

.tag-picker__search[b-1l9rk2qrj1] {
    width: 100%;
    padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    transition: all 0.2s ease;
}

.tag-picker__search:focus[b-1l9rk2qrj1] {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tag-picker__search:disabled[b-1l9rk2qrj1] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-muted, #94a3b8);
    cursor: not-allowed;
}

.tag-picker__create[b-1l9rk2qrj1] {
    margin-top: var(--tm-space-2, 0.5rem);
}

.tag-picker__create-btn[b-1l9rk2qrj1] {
    width: 100%;
    padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px dashed var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    color: var(--tm-text-secondary, #475569);
    font-size: var(--tm-font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-picker__create-btn:hover[b-1l9rk2qrj1] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-color-primary, #3b82f6);
    color: var(--tm-color-primary, #3b82f6);
}

.tag-picker__available[b-1l9rk2qrj1] {
    max-height: 200px;
    overflow-y: auto;
    margin-top: var(--tm-space-2, 0.5rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    background-color: var(--tm-bg-surface, #ffffff);
}

.tag-picker__tag--available[b-1l9rk2qrj1] {
    padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    cursor: pointer;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    transition: background-color 0.15s ease;
}

.tag-picker__tag--available:last-child[b-1l9rk2qrj1] {
    border-bottom: none;
}

.tag-picker__tag--available:hover[b-1l9rk2qrj1] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.tag-picker__color-picker[b-1l9rk2qrj1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-space-2, 0.5rem);
    margin-top: var(--tm-space-2, 0.5rem);
    padding: var(--tm-space-2, 0.5rem);
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
}

.tag-picker__color-option[b-1l9rk2qrj1] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.tag-picker__color-option:hover[b-1l9rk2qrj1] {
    transform: scale(1.1);
    border-color: var(--tm-text-primary, #0f172a);
}

/* Disabled state */
.tag-picker--disabled .tag-picker__tag--selected[b-1l9rk2qrj1] {
    opacity: 0.7;
}

.tag-picker--disabled .tag-picker__search[b-1l9rk2qrj1] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    cursor: not-allowed;
}
/* /Components/Shortcuts/ShortcutsHelp.razor.rz.scp.css */
[b-ilmuwemxlu] .shortcuts-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: var(--tm-space-4, 1rem);
    animation: fadeIn-b-ilmuwemxlu 0.2s ease;
}

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

[b-ilmuwemxlu] .shortcuts-dialog {
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: 0.75rem;
    box-shadow: var(--tm-shadow-md, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-ilmuwemxlu 0.2s ease;
}

@keyframes slideUp-b-ilmuwemxlu {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-ilmuwemxlu] .shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tm-space-5, 1.25rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-ilmuwemxlu] .shortcuts-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--tm-text-primary, #0f172a);
}

[b-ilmuwemxlu] .shortcuts-content {
    overflow-y: auto;
    padding: var(--tm-space-5, 1.25rem);
    flex: 1;
}

[b-ilmuwemxlu] .shortcuts-group {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

[b-ilmuwemxlu] .shortcuts-group:last-child {
    margin-bottom: 0;
}

[b-ilmuwemxlu] .shortcuts-group h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tm-text-secondary, #475569);
    margin: 0 0 var(--tm-space-3, 0.75rem) 0;
    letter-spacing: 0.05em;
}

[b-ilmuwemxlu] .shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3, 0.75rem);
}

[b-ilmuwemxlu] .shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tm-space-2, 0.5rem) 0;
}

[b-ilmuwemxlu] .shortcut-keys {
    display: flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
}

[b-ilmuwemxlu] kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    background: linear-gradient(to bottom, var(--tm-bg-surface-secondary, #f8fafc), var(--tm-border-color, #e2e8f0));
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-sm, 0.25rem);
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    box-shadow: var(--tm-shadow-sm, 0 1px 0 rgba(0, 0, 0, 0.1));
}

[b-ilmuwemxlu] kbd + kbd::before {
    content: "+";
    margin: 0 var(--tm-space-1, 0.25rem);
    color: var(--tm-text-secondary, #475569);
}

[b-ilmuwemxlu] .shortcut-description {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #475569);
}

[b-ilmuwemxlu] .shortcuts-footer {
    padding: var(--tm-space-4, 1rem) var(--tm-space-5, 1.25rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: 0 0 0.75rem 0.75rem;
}

[b-ilmuwemxlu] .shortcuts-hint {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #475569);
}
/* /Components/Templates/TemplateVariableEditor.razor.rz.scp.css */
.variable-editor[b-bydzr8iw8n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.variable-editor-header[b-bydzr8iw8n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.variable-editor-header h4[b-bydzr8iw8n] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.variable-editor-empty[b-bydzr8iw8n] {
    color: #9ca3af;
    font-size: 0.875rem;
    font-style: italic;
    padding: 1rem 0;
}

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

.variable-item[b-bydzr8iw8n] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.variable-row[b-bydzr8iw8n] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

[b-bydzr8iw8n] .variable-field {
    flex: 1;
}

[b-bydzr8iw8n] .variable-field-sm {
    flex: 0 0 160px;
}

.variable-actions[b-bydzr8iw8n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
}

.variable-checkbox[b-bydzr8iw8n] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.813rem;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.variable-checkbox input[type="checkbox"][b-bydzr8iw8n] {
    width: 0.875rem;
    height: 0.875rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .variable-row[b-bydzr8iw8n] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-bydzr8iw8n] .variable-field-sm {
        flex: 1;
    }

    .variable-actions[b-bydzr8iw8n] {
        flex-direction: row;
        justify-content: space-between;
    }
}
/* /Components/Theme/ThemeSelector.razor.rz.scp.css */
[b-gddxz2w48e] .theme-selector {
    display: flex;
    gap: var(--tm-space-2, 0.5rem);
    padding: var(--tm-space-1, 0.25rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-md, 0.375rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-gddxz2w48e] .theme-option {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    padding: var(--tm-space-2, 0.5rem) var(--tm-space-3, 0.75rem);
    border-radius: var(--tm-radius-sm, 0.25rem);
    border: none;
    background: transparent;
    color: var(--tm-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--tm-font-size-sm, 0.875rem);
}

[b-gddxz2w48e] .theme-option:hover {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

[b-gddxz2w48e] .theme-option.active {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

[b-gddxz2w48e] .theme-option span {
    display: none;
}

@media (min-width: 640px) {
    [b-gddxz2w48e] .theme-option span {
        display: inline;
    }
}
/* /Components/VariableForm/VariableForm.razor.rz.scp.css */
.variable-form[b-67w00fkwoe] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.variable-field[b-67w00fkwoe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.variable-label[b-67w00fkwoe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.variable-label code[b-67w00fkwoe] {
    background: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: monospace;
    color: #3b82f6;
    font-size: 0.8125rem;
}

.required-marker[b-67w00fkwoe] {
    color: #ef4444;
    font-weight: 600;
}

.variable-desc[b-67w00fkwoe] {
    color: #6b7280;
    font-weight: normal;
}

.default-value-hint[b-67w00fkwoe] {
    font-size: 0.75rem;
    color: #9ca3af;
}
/* /Components/Variables/AppVariablesManager.razor.rz.scp.css */
.card-header-with-icon[b-e92nqyuea7] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-4, 1rem);
}

.card-header-with-icon h3[b-e92nqyuea7] {
    margin: 0;
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: 600;
}

.header-actions[b-e92nqyuea7] {
    margin-left: auto;
}

.variables-list[b-e92nqyuea7] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3, 0.75rem);
}

.variable-item[b-e92nqyuea7] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-1, 0.25rem);
    padding: var(--tm-space-3, 0.75rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    transition: border-color 0.2s;
}

.variable-item:hover[b-e92nqyuea7] {
    border-color: var(--tm-color-primary-200, #bfdbfe);
}

.variable-main[b-e92nqyuea7] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    flex-wrap: wrap;
}

.variable-name[b-e92nqyuea7] {
    font-family: var(--tm-font-mono, 'Fira Code', monospace);
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-color-primary, #3b82f6);
    background: var(--tm-color-primary-50, #eff6ff);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-sm, 0.25rem);
}

.variable-description[b-e92nqyuea7] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    margin: 0;
}

.variable-default[b-e92nqyuea7] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-tertiary, #94a3b8);
}

.variable-actions[b-e92nqyuea7] {
    display: flex;
    gap: var(--tm-space-1, 0.25rem);
    margin-top: var(--tm-space-1, 0.25rem);
}
/* /Components/Variables/AvailableVariablesPanel.razor.rz.scp.css */
.variables-section-label[b-djdari7bvt] {
    display: block;
    font-size: var(--tm-font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--tm-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-1, 0.25rem);
}

[b-djdari7bvt] .variable-badge-app {
    border-color: var(--tm-color-primary-200, #bfdbfe);
    background-color: var(--tm-color-primary-50, #eff6ff);
}
/* /Components/Variants/VariantManagerPanel.razor.rz.scp.css */
.variant-panel[b-b46krfl147] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    overflow: hidden;
}

.panel-header[b-b46krfl147] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3[b-b46krfl147] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-loading[b-b46krfl147] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.panel-empty[b-b46krfl147] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.variant-list[b-b46krfl147] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.variant-card[b-b46krfl147] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}

.variant-card:last-child[b-b46krfl147] {
    border-bottom: none;
}

.variant-card:hover[b-b46krfl147] {
    background: var(--bg-secondary);
}

.variant-card.variant-inactive[b-b46krfl147] {
    opacity: 0.6;
}

.variant-card-header[b-b46krfl147] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.variant-name-row[b-b46krfl147] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variant-name[b-b46krfl147] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.variant-weight[b-b46krfl147] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.weight-value[b-b46krfl147] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.variant-description[b-b46krfl147] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.variant-overrides[b-b46krfl147] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.override-item[b-b46krfl147] {
    display: flex;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.override-label[b-b46krfl147] {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.override-value[b-b46krfl147] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-footer[b-b46krfl147] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.variant-stats[b-b46krfl147] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.variant-actions[b-b46krfl147] {
    display: flex;
    gap: 0.25rem;
}

/* Modal */
.modal-overlay[b-b46krfl147] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-b46krfl147] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-content h3[b-b46krfl147] {
    margin: 0 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-content p[b-b46krfl147] {
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
}

.modal-actions[b-b46krfl147] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.form-group[b-b46krfl147] {
    margin-bottom: 1rem;
}

.form-group label[b-b46krfl147] {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-row[b-b46krfl147] {
    display: flex;
    gap: 1rem;
}

.form-group-half[b-b46krfl147] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .variant-card-header[b-b46krfl147] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .variant-footer[b-b46krfl147] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .form-row[b-b46krfl147] {
        flex-direction: column;
        gap: 0;
    }

    .modal-content[b-b46krfl147] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* Form row for modal */
.form-row[b-b46krfl147] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.form-col-sm[b-b46krfl147] {
    flex: 1;
    min-width: 0;
}

.checkbox-group[b-b46krfl147] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.5rem;
}

/* Modal actions */
.modal-actions[b-b46krfl147] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Components/Versioning/VersionDiffViewer.razor.rz.scp.css */
.diff-container[b-iv0plmor6q] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 1rem;
}

.diff-header[b-iv0plmor6q] {
    padding: 0.625rem 0.875rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.diff-title[b-iv0plmor6q] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* View toggle */
.diff-view-toggle[b-iv0plmor6q] {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-toggle-btn[b-iv0plmor6q] {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-primary);
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.view-toggle-btn:last-child[b-iv0plmor6q] {
    border-right: none;
}

.view-toggle-btn:hover[b-iv0plmor6q] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.view-toggle-btn.active[b-iv0plmor6q] {
    background: var(--color-primary);
    color: white;
}

/* Diff stats */
.diff-stats[b-iv0plmor6q] {
    padding: 0.5rem 0.875rem;
    display: flex;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-secondary);
}

.stat-additions[b-iv0plmor6q] {
    color: var(--color-success);
}

.stat-deletions[b-iv0plmor6q] {
    color: var(--color-danger);
}

.stat-modifications[b-iv0plmor6q] {
    color: var(--color-warning);
}

/* Field-level diff table */
.diff-table[b-iv0plmor6q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.diff-table thead th[b-iv0plmor6q] {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.field-col[b-iv0plmor6q] {
    width: 20%;
}

.value-col[b-iv0plmor6q] {
    width: 40%;
}

.diff-table tbody td[b-iv0plmor6q] {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.diff-table tbody tr:last-child td[b-iv0plmor6q] {
    border-bottom: none;
}

.row-changed[b-iv0plmor6q] {
    background: var(--bg-secondary);
}

.row-unchanged[b-iv0plmor6q] {
    opacity: 0.7;
}

.field-name[b-iv0plmor6q] {
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.change-indicator[b-iv0plmor6q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning);
    flex-shrink: 0;
}

.value-cell[b-iv0plmor6q] {
    word-break: break-word;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.value-removed[b-iv0plmor6q] {
    color: var(--color-danger);
    text-decoration: line-through;
    opacity: 0.8;
}

.value-added[b-iv0plmor6q] {
    color: var(--color-success);
    font-weight: 500;
}

.value-unchanged[b-iv0plmor6q] {
    color: var(--text-secondary);
}

/* Side-by-side diff view */
.diff-side-by-side[b-iv0plmor6q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-x: auto;
}

.diff-panel[b-iv0plmor6q] {
    overflow-x: auto;
}

.diff-panel-left[b-iv0plmor6q] {
    border-right: 1px solid var(--border-color);
}

.panel-label[b-iv0plmor6q] {
    padding: 0.375rem 0.625rem;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Unified diff view */
.diff-unified[b-iv0plmor6q] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-x: auto;
}

/* Diff lines (shared between side-by-side and unified) */
.diff-line[b-iv0plmor6q] {
    display: flex;
    align-items: stretch;
    min-height: 1.5em;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
}

.diff-line:last-child[b-iv0plmor6q] {
    border-bottom: none;
}

.line-number[b-iv0plmor6q] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.5rem;
    min-width: 2.5rem;
    padding: 0 0.375rem;
    color: var(--text-secondary);
    opacity: 0.6;
    font-size: 0.6875rem;
    user-select: none;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.diff-prefix[b-iv0plmor6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    font-weight: 700;
    user-select: none;
}

.line-content[b-iv0plmor6q] {
    flex: 1;
    padding: 0 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Line type styling */
.diff-added[b-iv0plmor6q] {
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.diff-added .diff-prefix[b-iv0plmor6q] {
    color: var(--color-success);
}

.diff-added .line-content[b-iv0plmor6q] {
    color: var(--color-success);
}

.diff-removed[b-iv0plmor6q] {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.diff-removed .diff-prefix[b-iv0plmor6q] {
    color: var(--color-danger);
}

.diff-removed .line-content[b-iv0plmor6q] {
    color: var(--color-danger);
    text-decoration: line-through;
    opacity: 0.85;
}

.diff-modified[b-iv0plmor6q] {
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.diff-modified .diff-prefix[b-iv0plmor6q] {
    color: var(--color-warning);
}

.diff-unchanged[b-iv0plmor6q] {
    background: transparent;
}

.diff-unchanged .line-content[b-iv0plmor6q] {
    color: var(--text-primary);
}
/* /Components/Versioning/VersionHistoryPanel.razor.rz.scp.css */
.version-panel[b-b1g6b1ikte] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.panel-header[b-b1g6b1ikte] {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3[b-b1g6b1ikte] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-loading[b-b1g6b1ikte] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.panel-empty[b-b1g6b1ikte] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

/* Timeline */
.version-timeline[b-b1g6b1ikte] {
    padding: 1rem 1.25rem;
}

.version-item[b-b1g6b1ikte] {
    display: flex;
    gap: 0.875rem;
    position: relative;
}

.version-marker[b-b1g6b1ikte] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 16px;
}

.marker-dot[b-b1g6b1ikte] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 2px var(--border-color);
    flex-shrink: 0;
    margin-top: 4px;
}

.dot-latest[b-b1g6b1ikte] {
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.marker-line[b-b1g6b1ikte] {
    width: 2px;
    flex: 1;
    background: var(--border-color);
    min-height: 1.5rem;
}

.version-content[b-b1g6b1ikte] {
    flex: 1;
    padding-bottom: 1.25rem;
}

.version-header[b-b1g6b1ikte] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.version-number[b-b1g6b1ikte] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.version-badge[b-b1g6b1ikte] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
}

.version-description[b-b1g6b1ikte] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.version-meta[b-b1g6b1ikte] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.version-actions[b-b1g6b1ikte] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Diff section */
.diff-section[b-b1g6b1ikte] {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

.diff-section-header[b-b1g6b1ikte] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* Modal */
.modal-overlay[b-b1g6b1ikte] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-b1g6b1ikte] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 450px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.modal-content h3[b-b1g6b1ikte] {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.modal-content p[b-b1g6b1ikte] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.modal-actions[b-b1g6b1ikte] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Restore confirmation dialog */
.restore-confirm-dialog[b-b1g6b1ikte] {
    max-width: 480px;
}

.restore-dialog-header[b-b1g6b1ikte] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.restore-dialog-header h3[b-b1g6b1ikte] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
}

.restore-dialog-body[b-b1g6b1ikte] {
    margin-bottom: 1.25rem;
}

.restore-warning[b-b1g6b1ikte] {
    margin: 0 0 0.875rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.restore-version-detail[b-b1g6b1ikte] {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.restore-version-detail:last-child[b-b1g6b1ikte] {
    border-bottom: none;
}

.detail-label[b-b1g6b1ikte] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 5rem;
    flex-shrink: 0;
}

.detail-value[b-b1g6b1ikte] {
    color: var(--text-primary);
}
/* /Components/Widgets/DailyTipWidget.razor.rz.scp.css */
/* DailyTipWidget - Scoped CSS with dark mode support */

.daily-tip-widget[b-ca9n0uumdp] {
    padding: 1rem;
}

.tip-content[b-ca9n0uumdp] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    border-left: 3px solid var(--tm-color-primary, #f59e0b);
}

.tip-content[b-ca9n0uumdp]  svg {
    color: var(--tm-color-primary, #f59e0b);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.tip-text[b-ca9n0uumdp] {
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
    line-height: 1.5;
    font-style: italic;
}
/* /Components/Widgets/FavoriteHistoryWidget.razor.rz.scp.css */
/* FavoriteHistoryWidget - Scoped CSS with dark mode support */

.favorite-history-widget[b-6c2gzb5ws9] {
    padding: 0.5rem;
}

.favorites-list[b-6c2gzb5ws9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.favorite-item[b-6c2gzb5ws9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.favorite-item:hover[b-6c2gzb5ws9] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-color-primary, #3b82f6);
}

.favorite-icon[b-6c2gzb5ws9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    color: var(--tm-color-primary, #f59e0b);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.favorite-icon[b-6c2gzb5ws9]  svg {
    color: var(--tm-color-primary, #f59e0b);
}

.favorite-info[b-6c2gzb5ws9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
}

.favorite-app[b-6c2gzb5ws9] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.favorite-preview[b-6c2gzb5ws9] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Widgets/QuickActionsWidget.razor.rz.scp.css */
/* QuickActionsWidget - Scoped CSS with dark mode support */

.quick-actions-widget[b-y09hd8s8ig] {
    padding: 1rem;
}

.actions-grid[b-y09hd8s8ig] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Responsive adjustments */
@media (min-width: 400px) {
    .actions-grid[b-y09hd8s8ig] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 640px) {
    .actions-grid[b-y09hd8s8ig] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Widgets/RecentAppsWidget.razor.rz.scp.css */
/* RecentAppsWidget - Scoped CSS with dark mode support */

.recent-apps-widget[b-c6ug3fsaif] {
    padding: 0.5rem;
}

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

.app-item[b-c6ug3fsaif] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.app-item:hover[b-c6ug3fsaif] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-color-primary, #3b82f6);
}

.app-icon[b-c6ug3fsaif] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: var(--tm-color-primary, #3b82f6);
    color: white;
    flex-shrink: 0;
}

.app-icon[b-c6ug3fsaif]  svg {
    color: white;
}

.app-info[b-c6ug3fsaif] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.app-name[b-c6ug3fsaif] {
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-time[b-c6ug3fsaif] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

.app-usage[b-c6ug3fsaif] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
    font-weight: 500;
}
/* /Components/Widgets/RecentTemplatesWidget.razor.rz.scp.css */
/* RecentTemplatesWidget - Scoped CSS with dark mode support */

.recent-templates-widget[b-ot4b1wjcgw] {
    padding: 0.5rem;
}

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

.template-item[b-ot4b1wjcgw] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.template-item:hover[b-ot4b1wjcgw] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-color-primary, #3b82f6);
}

.template-item[b-ot4b1wjcgw]  svg {
    color: var(--tm-color-primary, #3b82f6);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.template-info[b-ot4b1wjcgw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
}

.template-name[b-ot4b1wjcgw] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-description[b-ot4b1wjcgw] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Widgets/StatsWidget.razor.rz.scp.css */
/* StatsWidget - Scoped CSS with dark mode support */

.stats-widget[b-lxrjl46x1r] {
    padding: 1rem;
}

.stats-grid[b-lxrjl46x1r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-item[b-lxrjl46x1r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: 0.5rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.stat-item[b-lxrjl46x1r]  svg {
    color: var(--tm-color-primary, #3b82f6);
    margin-bottom: 0.5rem;
}

.stat-value[b-lxrjl46x1r] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    line-height: 1.4;
}

.stat-label[b-lxrjl46x1r] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    margin-top: 0.25rem;
}

/* Responsive adjustments */
@media (min-width: 640px) {
    .stats-grid[b-lxrjl46x1r] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}
/* /Components/Widgets/WeeklyActivityWidget.razor.rz.scp.css */
/* WeeklyActivityWidget - Scoped CSS with dark mode support */

.weekly-activity-widget[b-xevqiserk6] {
    padding: 1rem;
}

.activity-chart[b-xevqiserk6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    height: 150px;
    padding-bottom: 1.5rem;
}

.day-column[b-xevqiserk6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.375rem;
}

.bar-wrapper[b-xevqiserk6] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100px;
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: 0.25rem;
    padding: 0.25rem;
    position: relative;
}

.bar[b-xevqiserk6] {
    width: 100%;
    max-width: 24px;
    background-color: var(--tm-color-primary, #3b82f6);
    border-radius: 0.125rem;
    min-height: 4px;
    transition: background-color 0.2s ease;
}

.bar:hover[b-xevqiserk6] {
    background-color: var(--tm-color-primary);
    opacity: 0.8;
}

.day-label[b-xevqiserk6] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    font-weight: 500;
    text-transform: uppercase;
}

.day-count[b-xevqiserk6] {
    font-size: 0.75rem;
    color: var(--tm-text-primary, #0f172a);
    font-weight: 600;
    position: absolute;
    bottom: -1.25rem;
}

/* Ensure proper alignment for count labels */
.day-column[b-xevqiserk6] {
    position: relative;
}
/* /Layouts/AuthLayout.razor.rz.scp.css */
/* Scoped CSS pro AuthLayout - nyní nepoužíváno, styly jsou inline v komponentě */
/* Ponecháno pro kompatibilitu s Blazor scoped CSS systémem */
/* /Layout/LandingLayout.razor.rz.scp.css */
.landing-layout[b-q2davz6lpc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================
   MAIN LAYOUT - Professional Dashboard Design
   ============================================ */

/* Skip Navigation (WCAG 2.1 AA) */
.skip-nav[b-j1xsrqudnj] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--tm-color-primary, #4f46e5);
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    transition: top 0.3s;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 0.375rem 0;
}

.skip-nav:focus[b-j1xsrqudnj] {
    top: 0;
}

.main-layout[b-j1xsrqudnj] {
    display: flex;
    min-height: 100vh;
    background-color: var(--tm-bg-canvas, var(--tm-bg-surface-secondary, #f8fafc));
}

/* ============================================
   SIDEBAR - Professional Navigation
   ============================================ */

.sidebar[b-j1xsrqudnj] {
    width: 280px;
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        4px 0 24px rgba(0, 0, 0, 0.2);
}

/* Sidebar Header */
.sidebar-header[b-j1xsrqudnj] {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.brand[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: white;
    transition: opacity 0.2s;
}

.brand:hover[b-j1xsrqudnj] {
    opacity: 0.9;
}

.brand-icon[b-j1xsrqudnj] {
    font-size: 1.75rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 0.625rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.brand-text[b-j1xsrqudnj] {
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(90deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-toggle[b-j1xsrqudnj] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-toggle:hover[b-j1xsrqudnj] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Navigation */
.sidebar-nav[b-j1xsrqudnj] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.75rem;
}

/* Custom Scrollbar */
.sidebar-nav[b-j1xsrqudnj]::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav[b-j1xsrqudnj]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav[b-j1xsrqudnj]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.sidebar-nav[b-j1xsrqudnj]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Navigation Section */
.nav-section[b-j1xsrqudnj] {
    margin-bottom: 1.5rem;
    position: relative;
}

.nav-section:not(:last-child)[b-j1xsrqudnj]::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.nav-section--primary[b-j1xsrqudnj] {
    margin-bottom: 1.5rem;
}

.nav-section--primary .nav-item[b-j1xsrqudnj] {
    font-weight: 500;
}

/* Section Title */
.nav-section-title[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.5rem;
    user-select: none;
}

/* Collapsible section toggle */
.nav-section-toggle[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.25rem 0.875rem;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem;
    transition: background 0.2s;
}

.nav-section-toggle:hover[b-j1xsrqudnj] {
    background: rgba(255, 255, 255, 0.05);
}

.nav-section-toggle:hover .nav-section-title[b-j1xsrqudnj] {
    color: rgba(255, 255, 255, 0.6);
}

.nav-toggle-icon[b-j1xsrqudnj] {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

/* Navigation Item */
.nav-item[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.nav-item[b-j1xsrqudnj]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease;
}

.nav-item:hover[b-j1xsrqudnj] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.nav-item:hover[b-j1xsrqudnj]::before {
    height: 50%;
}

.nav-item.active[b-j1xsrqudnj] {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item.active[b-j1xsrqudnj]::before {
    height: 70%;
}

.nav-icon[b-j1xsrqudnj] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

.nav-item:hover .nav-icon[b-j1xsrqudnj],
.nav-item.active .nav-icon[b-j1xsrqudnj] {
    opacity: 1;
}

.nav-item.active .nav-icon[b-j1xsrqudnj] {
    transform: scale(1.05);
}

.nav-text[b-j1xsrqudnj] {
    white-space: nowrap;
    font-size: 0.9375rem;
    line-height: 1.25;
}

/* Sub-navigation items */
.nav-item--sub[b-j1xsrqudnj] {
    padding-left: 2.5rem;
    font-size: 0.875rem;
    opacity: 0.85;
    display: flex;
    width: 100%;
}

.nav-item--sub[b-j1xsrqudnj]::before {
    display: none;
}

.nav-item--sub:hover[b-j1xsrqudnj] {
    opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer[b-j1xsrqudnj] {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
}

/* Gamification Mini */
.gamification-mini[b-j1xsrqudnj] {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gamification-level[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.gamification-level[b-j1xsrqudnj]  .tm-badge {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.75rem !important;
}

.gamification-xp[b-j1xsrqudnj] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.gamification-mini[b-j1xsrqudnj]  .tm-progress-bar {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 6px !important;
    border-radius: 3px !important;
}

.gamification-mini[b-j1xsrqudnj]  .tm-progress-bar-fill {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%) !important;
    border-radius: 3px !important;
}

/* User Menu */
.user-menu-item[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    border-radius: 0.625rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.2s;
    border: 1px solid transparent;
}

.user-menu-item:hover[b-j1xsrqudnj] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.user-avatar[b-j1xsrqudnj] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.user-info[b-j1xsrqudnj] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.user-name[b-j1xsrqudnj] {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.user-role[b-j1xsrqudnj] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content[b-j1xsrqudnj] {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   TOP BAR - Professional Header
   ============================================ */

.top-bar[b-j1xsrqudnj] {
    height: 68px;
    background: var(--tm-color-bg, #ffffff);
    border-bottom: 1px solid var(--tm-color-border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.top-bar-left[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

/* Top Bar Center */
.top-bar-center[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0 2rem;
}

.mobile-menu-toggle[b-j1xsrqudnj] {
    display: none;
    background: none;
    border: none;
    color: var(--tm-color-text, #1e293b);
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.mobile-menu-toggle:hover[b-j1xsrqudnj] {
    background: var(--tm-color-bg-tertiary, #f1f5f9);
}

/* Enhanced Search Box */
.search-box[b-j1xsrqudnj] {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.search-box input[b-j1xsrqudnj] {
    width: 100%;
    padding: 0.625rem 3rem 0.625rem 2.75rem;
    background: var(--tm-color-bg-tertiary, #f8fafc);
    border: 1.5px solid var(--tm-color-border, #e2e8f0);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--tm-color-text, #1e293b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-box input[b-j1xsrqudnj]::placeholder {
    color: var(--tm-color-text-muted, #94a3b8);
}

.search-box input:hover[b-j1xsrqudnj] {
    border-color: var(--tm-color-primary-light, #818cf8);
    background: var(--tm-color-bg, #ffffff);
}

.search-box input:focus[b-j1xsrqudnj] {
    border-color: var(--tm-color-primary, #4f46e5);
    background: var(--tm-color-bg, #ffffff);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
}

.search-icon[b-j1xsrqudnj] {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    color: var(--tm-color-text-muted, #94a3b8);
    width: 18px;
    height: 18px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-box:hover .search-icon[b-j1xsrqudnj],
.search-box:focus-within .search-icon[b-j1xsrqudnj] {
    color: var(--tm-color-primary, #4f46e5);
}

.search-shortcut[b-j1xsrqudnj] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--tm-color-bg-secondary, #f1f5f9);
    border: 1px solid var(--tm-color-border, #e2e8f0);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tm-color-text-muted, #64748b);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Top Bar Right */
.top-bar-right[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Icon Buttons */
.icon-button[b-j1xsrqudnj] {
    position: relative;
    background: none;
    border: none;
    color: var(--tm-color-text-secondary, #64748b);
    padding: 0.625rem;
    border-radius: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-button:hover[b-j1xsrqudnj] {
    background: var(--tm-color-bg-tertiary, #f1f5f9);
    color: var(--tm-color-text, #1e293b);
}

.icon-button:active[b-j1xsrqudnj] {
    transform: scale(0.95);
}

.icon-button .badge[b-j1xsrqudnj] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    border: 2px solid var(--tm-color-bg, #ffffff);
}

/* Connection Indicator */
.connection-indicator[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    color: var(--tm-color-danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
    margin-left: 0.25rem;
}

/* User Dropdown */
.user-dropdown[b-j1xsrqudnj] {
    position: relative;
    margin-left: 0.5rem;
}

.user-trigger[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--tm-color-bg-tertiary, #f8fafc);
    border: 1.5px solid var(--tm-color-border, #e2e8f0);
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-trigger:hover[b-j1xsrqudnj] {
    background: var(--tm-color-bg-secondary, #f1f5f9);
    border-color: var(--tm-color-primary-light, #818cf8);
}

.user-trigger .user-avatar[b-j1xsrqudnj] {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.dropdown-arrow[b-j1xsrqudnj] {
    color: var(--tm-color-text-muted, #94a3b8);
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.user-dropdown.open .dropdown-arrow[b-j1xsrqudnj] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-j1xsrqudnj] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--tm-color-bg, #ffffff);
    border: 1px solid var(--tm-color-border, #e2e8f0);
    border-radius: 0.875rem;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    padding: 0.5rem;
    z-index: 1000;
    animation: dropdownIn-b-j1xsrqudnj 0.15s ease-out;
}

@keyframes dropdownIn-b-j1xsrqudnj {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item[b-j1xsrqudnj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    color: var(--tm-color-text, #1e293b);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
    width: 100%;
    border: none;
    background: none;
}

.dropdown-item:hover[b-j1xsrqudnj] {
    background: var(--tm-color-bg-tertiary, #f8fafc);
}

.dropdown-item[b-j1xsrqudnj]  .tm-icon {
    color: var(--tm-color-text-muted, #64748b);
    transition: color 0.15s;
}

.dropdown-item:hover[b-j1xsrqudnj]  .tm-icon {
    color: var(--tm-color-primary, #4f46e5);
}

.dropdown-item.danger[b-j1xsrqudnj] {
    color: var(--tm-color-danger, #ef4444);
}

.dropdown-item.danger:hover[b-j1xsrqudnj] {
    background: rgba(239, 68, 68, 0.08);
}

.dropdown-item.danger[b-j1xsrqudnj]  .tm-icon {
    color: var(--tm-color-danger, #ef4444);
}

.dropdown-divider[b-j1xsrqudnj] {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tm-color-border, #e2e8f0), transparent);
    margin: 0.5rem 0;
}

.dropdown-header[b-j1xsrqudnj] {
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dropdown-header-text[b-j1xsrqudnj] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tm-color-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-header-subtext[b-j1xsrqudnj] {
    font-size: 0.75rem;
    color: var(--tm-color-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   PAGE CONTENT
   ============================================ */

.page-content[b-j1xsrqudnj] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--tm-color-bg-secondary, #f8fafc);
}

/* Error Boundary */
.error-boundary[b-j1xsrqudnj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 2rem;
}

.error-boundary h3[b-j1xsrqudnj] {
    font-size: 1.5rem;
    color: var(--tm-color-danger, #ef4444);
    margin-bottom: 0.5rem;
}

.error-boundary p[b-j1xsrqudnj] {
    color: var(--tm-color-text-muted, #64748b);
    margin-bottom: 1.5rem;
}

/* ============================================
   SIDEBAR COLLAPSED STATE
   ============================================ */

.sidebar-collapsed .sidebar[b-j1xsrqudnj] {
    width: 76px;
}

.sidebar-collapsed .brand-text[b-j1xsrqudnj],
.sidebar-collapsed .nav-section-title[b-j1xsrqudnj],
.sidebar-collapsed .nav-text[b-j1xsrqudnj],
.sidebar-collapsed .user-info[b-j1xsrqudnj],
.sidebar-collapsed .gamification-xp[b-j1xsrqudnj],
.sidebar-collapsed[b-j1xsrqudnj]  .tm-progress-bar {
    display: none;
}

.sidebar-collapsed .main-content[b-j1xsrqudnj] {
    margin-left: 76px;
}

.sidebar-collapsed .nav-item[b-j1xsrqudnj] {
    justify-content: center;
    padding: 0.75rem;
    margin-bottom: 0.25rem;
}

.sidebar-collapsed .nav-item[b-j1xsrqudnj]::before {
    display: none;
}

.sidebar-collapsed .nav-section[b-j1xsrqudnj] {
    margin-bottom: 1rem;
}

.sidebar-collapsed .nav-section:not(:last-child)[b-j1xsrqudnj]::after {
    left: 0.5rem;
    right: 0.5rem;
}

.sidebar-collapsed .nav-item.active[b-j1xsrqudnj] {
    background: rgba(255, 255, 255, 0.15);
}

.sidebar-collapsed .user-menu-item[b-j1xsrqudnj] {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar-collapsed .gamification-mini[b-j1xsrqudnj] {
    padding: 0.5rem;
}

.sidebar-collapsed .gamification-level[b-j1xsrqudnj] {
    justify-content: center;
}

/* No rotation needed - icon direction is controlled by C# code */

/* ============================================
   MOBILE STYLES
   ============================================ */

@media (max-width: 991px) {
    .mobile-menu-toggle[b-j1xsrqudnj] {
        display: flex;
    }

    [b-j1xsrqudnj] .tm-breadcrumbs {
        display: none;
    }

    .top-bar-center[b-j1xsrqudnj] {
        justify-content: flex-end;
        padding: 0 0.5rem;
    }

    .sidebar[b-j1xsrqudnj] {
        transform: translateX(-100%);
        width: 280px !important;
    }

    .main-content[b-j1xsrqudnj] {
        margin-left: 0 !important;
    }

    .mobile-menu-open .sidebar[b-j1xsrqudnj] {
        transform: translateX(0);
    }

    .mobile-overlay[b-j1xsrqudnj] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 999;
    }

    .search-box[b-j1xsrqudnj] {
        max-width: 240px;
    }

    .user-trigger .user-avatar[b-j1xsrqudnj] {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 640px) {
    .top-bar[b-j1xsrqudnj] {
        padding: 0 1rem;
        height: 60px;
    }

    .search-box[b-j1xsrqudnj] {
        max-width: 200px;
    }

    .search-shortcut[b-j1xsrqudnj] {
        display: none;
    }

    .icon-button[b-j1xsrqudnj] {
        padding: 0.5rem;
    }

    .page-content[b-j1xsrqudnj] {
        padding: 1rem;
    }

    .dropdown-menu[b-j1xsrqudnj] {
        right: -0.5rem;
        min-width: 200px;
    }
}

/* ============================================
   CSS VARIABLES FOR THEMES
   ============================================ */

:root[b-j1xsrqudnj] {
    /* Light theme defaults */
    --color-sidebar-bg-start: #1e1b4b;
    --color-sidebar-bg-end: #312e81;
    --color-sidebar-text: #ffffff;
}

html.dark[b-j1xsrqudnj] {
    --color-sidebar-bg-start: #0f0d1f;
    --color-sidebar-bg-end: #1a1835;
    --color-sidebar-text: #ffffff;
}

/* Animation utilities */
@keyframes fadeIn-b-j1xsrqudnj {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight-b-j1xsrqudnj {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Focus visible styles */
.nav-item:focus-visible[b-j1xsrqudnj],
.icon-button:focus-visible[b-j1xsrqudnj],
.user-trigger:focus-visible[b-j1xsrqudnj],
.dropdown-item:focus-visible[b-j1xsrqudnj] {
    outline: 2px solid var(--tm-color-primary, #4f46e5);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .sidebar[b-j1xsrqudnj],
    .top-bar[b-j1xsrqudnj] {
        display: none;
    }

    .main-content[b-j1xsrqudnj] {
        margin-left: 0;
    }

    .page-content[b-j1xsrqudnj] {
        padding: 0;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-xcyfnvo3cj] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-xcyfnvo3cj] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-xcyfnvo3cj] {
    font-size: 1.1rem;
}

.bi[b-xcyfnvo3cj] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-xcyfnvo3cj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-xcyfnvo3cj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-xcyfnvo3cj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-xcyfnvo3cj] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-xcyfnvo3cj] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-xcyfnvo3cj] {
        padding-bottom: 1rem;
    }

    .nav-item[b-xcyfnvo3cj]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-xcyfnvo3cj]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-xcyfnvo3cj]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-xcyfnvo3cj] {
        display: none;
    }

    .collapse[b-xcyfnvo3cj] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-xcyfnvo3cj] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Analytics/AnalyticsDashboardPage.razor.rz.scp.css */
/* AnalyticsDashboardPage.razor.css - Dark Mode Support */

.page-container[b-f3iwn2f4nt] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-f3iwn2f4nt] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-f3iwn2f4nt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

.loading-state[b-f3iwn2f4nt] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: var(--tm-text-secondary, #64748b);
}

.dashboard-section[b-f3iwn2f4nt] {
    margin-bottom: 2rem;
}

.dashboard-section h2[b-f3iwn2f4nt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 1rem 0;
}

/* Charts and stats */
.stats-grid[b-f3iwn2f4nt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-f3iwn2f4nt] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

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

.stat-value[b-f3iwn2f4nt] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.25rem;
}

.stat-label[b-f3iwn2f4nt] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Charts */
.chart-container[b-f3iwn2f4nt] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.chart-title[b-f3iwn2f4nt] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 1rem;
}

.chart-placeholder[b-f3iwn2f4nt] {
    height: 200px;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-text-muted, #94a3b8);
}

/* Top apps grid */
.top-apps-grid[b-f3iwn2f4nt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.top-app-card[b-f3iwn2f4nt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.top-app-card:hover[b-f3iwn2f4nt] {
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.top-app-icon[b-f3iwn2f4nt] {
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.top-app-info[b-f3iwn2f4nt] {
    flex: 1;
    min-width: 0;
}

.top-app-name[b-f3iwn2f4nt] {
    display: block;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-app-stats[b-f3iwn2f4nt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.usage-count[b-f3iwn2f4nt] {
    font-size: 0.8rem;
    color: var(--tm-text-secondary, #64748b);
    font-weight: 500;
}

.last-used[b-f3iwn2f4nt] {
    display: block;
    font-size: 0.7rem;
    color: var(--tm-text-muted, #94a3b8);
    margin-top: 0.125rem;
}

.top-app-arrow[b-f3iwn2f4nt] {
    flex-shrink: 0;
    color: var(--tm-text-muted, #94a3b8);
}

/* Analytics period selector */
.period-selector[b-f3iwn2f4nt] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.period-btn[b-f3iwn2f4nt] {
    padding: 0.5rem 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tm-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-btn:hover[b-f3iwn2f4nt] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.period-btn.active[b-f3iwn2f4nt] {
    background-color: var(--tm-color-primary, #3b82f6);
    border-color: var(--tm-color-primary, #3b82f6);
    color: white;
}

@media (max-width: 768px) {
    .page-container[b-f3iwn2f4nt] {
        padding: 1rem;
    }
    
    .stats-grid[b-f3iwn2f4nt] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-value[b-f3iwn2f4nt] {
        font-size: 1.5rem;
    }
    
    .period-selector[b-f3iwn2f4nt] {
        flex-wrap: wrap;
    }
}
/* /Pages/ApiKeys/ApiDocumentationPage.razor.rz.scp.css */
/* ApiDocumentationPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-pvo6ppsvvz] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-pvo6ppsvvz] {
    margin-bottom: 2rem;
}

.page-header h1[b-pvo6ppsvvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

/* Sections */
.doc-section[b-pvo6ppsvvz] {
    margin-bottom: 2.5rem;
}

.doc-section h2[b-pvo6ppsvvz] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.doc-section p[b-pvo6ppsvvz] {
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* Code blocks */
.code-block[b-pvo6ppsvvz] {
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.code-block code[b-pvo6ppsvvz],
.code-block pre code[b-pvo6ppsvvz] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--tm-text-primary, #0f172a);
}

.code-block pre[b-pvo6ppsvvz] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-label[b-pvo6ppsvvz] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: 0.5rem;
}

/* Tables */
.doc-table[b-pvo6ppsvvz] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.doc-table thead th[b-pvo6ppsvvz] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.doc-table tbody td[b-pvo6ppsvvz] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.doc-table tbody tr:last-child td[b-pvo6ppsvvz] {
    border-bottom: none;
}

.doc-table tbody tr:hover[b-pvo6ppsvvz] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.doc-table code[b-pvo6ppsvvz] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-sm, 0.25rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-color-primary, #3b82f6);
}

/* Endpoint cards */
.endpoint-card[b-pvo6ppsvvz] {
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background-color: var(--tm-bg-surface, #ffffff);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.endpoint-card:hover[b-pvo6ppsvvz] {
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: var(--tm-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.endpoint-header[b-pvo6ppsvvz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.http-method[b-pvo6ppsvvz] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: var(--tm-radius-sm, 0.25rem);
    flex-shrink: 0;
}

.method-get[b-pvo6ppsvvz] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.method-post[b-pvo6ppsvvz] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.method-put[b-pvo6ppsvvz] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.method-delete[b-pvo6ppsvvz] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.endpoint-path[b-pvo6ppsvvz] {
    font-family: var(--font-mono, monospace);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.endpoint-description[b-pvo6ppsvvz] {
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.endpoint-meta[b-pvo6ppsvvz] {
    margin-bottom: 0.75rem;
}

.scope-required[b-pvo6ppsvvz] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

.scope-required code[b-pvo6ppsvvz] {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-sm, 0.25rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
}
/* /Pages/ApiKeys/ApiKeysPage.razor.rz.scp.css */
/* ApiKeysPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-dm2frxhfnh] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-dm2frxhfnh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header-text h1[b-dm2frxhfnh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

.page-header-actions[b-dm2frxhfnh] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.security-notice[b-dm2frxhfnh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.8125rem;
    margin-bottom: 1.5rem;
}

.loading-state[b-dm2frxhfnh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Table */
.keys-table-wrapper[b-dm2frxhfnh] {
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    overflow: hidden;
    background-color: var(--tm-bg-surface, #ffffff);
}

.keys-table[b-dm2frxhfnh] {
    width: 100%;
    border-collapse: collapse;
}

.keys-table thead th[b-dm2frxhfnh] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.keys-table tbody td[b-dm2frxhfnh] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.keys-table tbody tr:last-child td[b-dm2frxhfnh] {
    border-bottom: none;
}

.keys-table tbody tr:hover[b-dm2frxhfnh] {
    background: var(--tm-bg-surface-secondary, #f1f5f9);
}

.row-inactive[b-dm2frxhfnh] {
    opacity: 0.55;
}

.cell-name[b-dm2frxhfnh] {
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.cell-prefix code[b-dm2frxhfnh] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-sm, 0.25rem);
    color: var(--tm-text-primary, #0f172a);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.cell-meta[b-dm2frxhfnh] {
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.8125rem;
}

.cell-actions[b-dm2frxhfnh] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

/* Scope badges */
.scope-badges[b-dm2frxhfnh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.scope-badge[b-dm2frxhfnh] {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full, 9999px);
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    white-space: nowrap;
}

/* Status badges */
.status-badge[b-dm2frxhfnh] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full, 9999px);
}

.status-active[b-dm2frxhfnh] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-revoked[b-dm2frxhfnh] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-expired[b-dm2frxhfnh] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.text-muted[b-dm2frxhfnh] {
    color: var(--tm-text-secondary, #64748b);
}

.text-danger[b-dm2frxhfnh] {
    color: var(--tm-color-danger, #ef4444);
}

/* Modal */
.modal-overlay[b-dm2frxhfnh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-dm2frxhfnh] {
    background: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-radius-lg, 0.5rem);
    max-width: 500px;
    width: 90%;
    box-shadow: var(--tm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    overflow: hidden;
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.modal-key-created[b-dm2frxhfnh] {
    max-width: 550px;
}

.modal-header[b-dm2frxhfnh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    background-color: var(--tm-bg-surface, #ffffff);
}

.modal-header h3[b-dm2frxhfnh] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tm-text-primary, #0f172a);
}

.modal-body[b-dm2frxhfnh] {
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.modal-footer[b-dm2frxhfnh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    background-color: var(--tm-bg-surface, #ffffff);
}

/* Form */
.form-group[b-dm2frxhfnh] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-dm2frxhfnh] {
    margin-bottom: 0;
}

.form-label[b-dm2frxhfnh] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.375rem;
}

.form-input[b-dm2frxhfnh] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    background: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus[b-dm2frxhfnh] {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-input[b-dm2frxhfnh]::placeholder {
    color: var(--tm-text-secondary, #64748b);
}

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

.form-hint[b-dm2frxhfnh] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    margin: 0 0 0.5rem;
}

/* Scope checkboxes */
.scope-checkboxes[b-dm2frxhfnh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scope-checkbox[b-dm2frxhfnh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.scope-checkbox input[type="checkbox"][b-dm2frxhfnh] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tm-color-primary, #3b82f6);
    cursor: pointer;
}

/* Key created dialog */
.key-created-warning[b-dm2frxhfnh] {
    margin: 0 0 1rem;
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.875rem;
    line-height: 1.5;
}

.key-display[b-dm2frxhfnh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
}

.key-value[b-dm2frxhfnh] {
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    word-break: break-all;
    color: var(--tm-text-primary, #0f172a);
    user-select: all;
}

/* Environment badges */
.env-badges[b-dm2frxhfnh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
/* /Pages/Apps/AppCard.razor.rz.scp.css */
/* AppCard.razor.css - Dark Mode Support */

/* Card container */
.app-card[b-lywn5iuuhc] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Header section with icon and title */
.app-card-header[b-lywn5iuuhc] {
    background-color: transparent;
}

.app-icon[b-lywn5iuuhc] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-primary, #0f172a);
}

.app-info h3[b-lywn5iuuhc] {
    color: var(--tm-text-primary, #0f172a);
}

.app-info[b-lywn5iuuhc]  .tm-badge {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

/* Description */
.app-description[b-lywn5iuuhc] {
    color: var(--tm-text-secondary, #64748b);
}

/* Tags section */
.app-tags[b-lywn5iuuhc] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.app-tags[b-lywn5iuuhc]  .tm-badge {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

/* Footer section */
.app-footer[b-lywn5iuuhc] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-secondary, #64748b);
}

.usage-count[b-lywn5iuuhc] {
    color: var(--tm-text-secondary, #64748b);
}

.usage-count[b-lywn5iuuhc]  .tm-icon {
    color: var(--tm-color-primary, #3b82f6);
}

.last-used[b-lywn5iuuhc] {
    color: var(--tm-text-secondary, #64748b);
}

/* Actions */
.app-actions[b-lywn5iuuhc] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.app-actions[b-lywn5iuuhc]  .tm-toolbar-button {
    color: var(--tm-text-secondary, #64748b);
}

.app-actions[b-lywn5iuuhc]  .tm-toolbar-button:hover {
    color: var(--tm-text-primary, #0f172a);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}
/* /Pages/Apps/AppDetailPage.razor.rz.scp.css */
/* ========================================
   APP DETAIL PAGE - Modern UI/UX
   ======================================== */

/* Page Layout */
.page-container[b-qbmoyj1f65] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--tm-space-6, 1.5rem);
}

/* Loading State */
.loading-state[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tm-space-16, 4rem);
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-radius-xl, 0.75rem);
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.loading-state p[b-qbmoyj1f65] {
    margin-top: var(--tm-space-4, 1rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

/* Header Section */
.app-header-section[b-qbmoyj1f65] {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.app-detail-header[b-qbmoyj1f65] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tm-space-6, 1.5rem);
    flex-wrap: wrap;
}

.header-left[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-5, 1.25rem);
}

.app-icon-large[b-qbmoyj1f65] {
    width: 64px;
    height: 64px;
    border-radius: var(--tm-radius-xl, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: var(--tm-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
}

.app-title[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-2, 0.5rem);
}

.app-title h1[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
    line-height: 1.2;
}

.app-meta[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    flex-wrap: wrap;
}

.meta-divider[b-qbmoyj1f65] {
    color: var(--tm-text-muted, #94a3b8);
}

.tags-count[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-1, 0.25rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
}

.header-actions[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3, 0.75rem);
    flex-wrap: wrap;
}

/* Description Section */
.app-description-section[b-qbmoyj1f65] {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.app-description[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-base, 1rem);
    color: var(--tm-text-secondary, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* Main Grid Layout */
.app-detail-grid[b-qbmoyj1f65] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--tm-space-6, 1.5rem);
    align-items: start;
}

@media (max-width: 1024px) {
    .app-detail-grid[b-qbmoyj1f65] {
        grid-template-columns: 1fr;
    }
}

/* Columns */
.detail-column[b-qbmoyj1f65],
.stats-column[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-6, 1.5rem);
}

/* Card Common Styles */
[b-qbmoyj1f65] .tm-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-xl, 0.75rem);
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    overflow: hidden;
}

[b-qbmoyj1f65] .tm-card:hover {
    box-shadow: var(--tm-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
}

.card-header-with-icon[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-4, 1rem);
    padding-bottom: var(--tm-space-3, 0.75rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.card-header-with-icon h3[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
    flex: 1;
}

.card-header-with-icon .header-icon[b-qbmoyj1f65] {
    color: var(--tm-color-primary, #3b82f6);
}

.card-footer-actions[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tm-space-3, 0.75rem);
    margin-top: var(--tm-space-4, 1rem);
    padding-top: var(--tm-space-4, 1rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Role Definition Card */
.role-definition-card[b-qbmoyj1f65]  .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.copy-role-btn[b-qbmoyj1f65] {
    margin-left: auto;
}

.role-content[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    line-height: 1.7;
    color: var(--tm-text-primary, #0f172a);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: var(--tm-space-4, 1rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.role-content :deep(p)[b-qbmoyj1f65] {
    margin: 0 0 var(--tm-space-3, 0.75rem) 0;
}

.role-content :deep(p:last-child)[b-qbmoyj1f65] {
    margin-bottom: 0;
}

.role-content :deep(ul)[b-qbmoyj1f65],
.role-content :deep(ol)[b-qbmoyj1f65] {
    margin: var(--tm-space-2, 0.5rem) 0;
    padding-left: var(--tm-space-6, 1.5rem);
}

.role-content :deep(li)[b-qbmoyj1f65] {
    margin-bottom: var(--tm-space-1, 0.25rem);
}

.role-content :deep(code)[b-qbmoyj1f65] {
    background-color: var(--tm-bg-surface, #ffffff);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-sm, 0.25rem);
    font-family: var(--tm-font-mono, monospace);
    font-size: 0.9em;
    color: var(--tm-color-primary, #3b82f6);
}

.role-content :deep(span[style*="color"])[b-qbmoyj1f65] {
    font-weight: 500;
}

/* Variables Card */
.variables-card[b-qbmoyj1f65]  .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.variables-grid[b-qbmoyj1f65] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--tm-space-3, 0.75rem);
}

.variable-card[b-qbmoyj1f65] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: var(--tm-space-3, 0.75rem);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.variable-card:hover[b-qbmoyj1f65] {
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.variable-header[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-2, 0.5rem);
    margin-bottom: var(--tm-space-2, 0.5rem);
}

.variable-name[b-qbmoyj1f65] {
    font-family: var(--tm-font-mono, monospace);
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--tm-color-primary, #3b82f6);
    background-color: var(--tm-bg-surface, #ffffff);
    padding: var(--tm-space-1, 0.25rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-md, 0.375rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.variable-description[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

/* Tags Card */
.tags-card[b-qbmoyj1f65]  .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.tags-container[b-qbmoyj1f65] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-space-2, 0.5rem);
}

/* Stats Card */
.stats-card[b-qbmoyj1f65]  .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.stats-grid[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-4, 1rem);
}

.stat-item[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-4, 1rem);
    padding: var(--tm-space-3, 0.75rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-lg, 0.5rem);
    transition: background-color 0.2s;
}

.stat-item:hover[b-qbmoyj1f65] {
    background-color: var(--tm-bg-surface, #ffffff);
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.stat-icon-wrapper[b-qbmoyj1f65] {
    width: 40px;
    height: 40px;
    border-radius: var(--tm-radius-lg, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.usage-icon[b-qbmoyj1f65] {
    background-color: var(--tm-color-primary-soft, #dbeafe);
    color: var(--tm-color-primary, #3b82f6);
}

.time-icon[b-qbmoyj1f65] {
    background-color: var(--tm-color-warning-soft, #fef3c7);
    color: var(--tm-color-warning, #f59e0b);
}

.created-icon[b-qbmoyj1f65] {
    background-color: var(--tm-color-success-soft, #dcfce7);
    color: var(--tm-color-success, #22c55e);
}

.stat-content[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-0-5, 0.125rem);
}

.stat-value[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.stat-label[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
}

/* History Card */
.history-card[b-qbmoyj1f65]  .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.history-list[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3, 0.75rem);
}

.history-item[b-qbmoyj1f65] {
    padding: var(--tm-space-3, 0.75rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-lg, 0.5rem);
    border-left: 3px solid var(--tm-color-primary, #3b82f6);
}

.history-content[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-1, 0.25rem);
}

.history-preview[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.history-date[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-secondary, #64748b);
}

/* API Access Card */
.api-access-card[b-qbmoyj1f65]  .tm-card-content {
    padding: var(--tm-space-5, 1.25rem);
}

.api-keys-list[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3, 0.75rem);
}

.api-key-item[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-3, 0.75rem);
    padding: var(--tm-space-3, 0.75rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-lg, 0.5rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.api-key-info[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-1, 0.25rem);
    min-width: 0;
    flex: 1;
}

.api-key-main[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
    flex-wrap: wrap;
}

.api-key-name[b-qbmoyj1f65] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
}

.api-key-prefix[b-qbmoyj1f65] {
    font-family: var(--tm-font-mono, monospace);
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface, #ffffff);
    padding: var(--tm-space-0-5, 0.125rem) var(--tm-space-2, 0.5rem);
    border-radius: var(--tm-radius-sm, 0.25rem);
}

.more-items-hint[b-qbmoyj1f65] {
    text-align: center;
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    padding: var(--tm-space-2, 0.5rem);
}

/* Empty States */
.compact-empty-state[b-qbmoyj1f65] {
    padding: var(--tm-space-6, 1.5rem) var(--tm-space-4, 1rem);
}

.compact-empty-state[b-qbmoyj1f65]  .tm-empty-state-icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--tm-space-3, 0.75rem);
}

.compact-empty-state[b-qbmoyj1f65]  .tm-empty-state-title {
    font-size: var(--tm-font-size-base, 1rem);
    margin-bottom: var(--tm-space-1, 0.25rem);
}

.compact-empty-state[b-qbmoyj1f65]  .tm-empty-state-description {
    font-size: var(--tm-font-size-sm, 0.875rem);
}

/* API Key Created Modal Content */
.api-key-created-content[b-qbmoyj1f65] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-4, 1rem);
}

.key-display-box[b-qbmoyj1f65] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3, 0.75rem);
    padding: var(--tm-space-4, 1rem);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 2px dashed var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
}

.key-value[b-qbmoyj1f65] {
    font-family: var(--tm-font-mono, monospace);
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-primary, #0f172a);
    word-break: break-all;
    flex: 1;
    background: transparent;
    padding: 0;
}

.key-copy-btn[b-qbmoyj1f65] {
    flex-shrink: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .page-container[b-qbmoyj1f65] {
        padding: var(--tm-space-4, 1rem);
    }

    .app-detail-header[b-qbmoyj1f65] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-qbmoyj1f65] {
        width: 100%;
        justify-content: flex-start;
    }

    .app-icon-large[b-qbmoyj1f65] {
        width: 48px;
        height: 48px;
    }

    .app-title h1[b-qbmoyj1f65] {
        font-size: var(--tm-font-size-xl, 1.25rem);
    }

    .variables-grid[b-qbmoyj1f65] {
        grid-template-columns: 1fr;
    }

    .key-display-box[b-qbmoyj1f65] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .role-content :deep(code)[b-qbmoyj1f65] {
        background-color: var(--tm-bg-surface-secondary, #1e293b);
    }
}

[data-theme="dark"] .role-content :deep(code)[b-qbmoyj1f65] {
    background-color: var(--tm-bg-surface-secondary, #1e293b);
}
/* /Pages/Apps/AppsListPage.razor.rz.scp.css */
/* AppsListPage.razor.css - Dark Mode Support */

/* Page container */
.page-container[b-qmuba43n4b] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Page header */
.page-header[b-qmuba43n4b] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.page-header h1[b-qmuba43n4b] {
    color: var(--tm-text-primary, #0f172a);
}

.page-header .text-muted[b-qmuba43n4b] {
    color: var(--tm-text-secondary, #64748b);
}

/* Loading grid */
.loading-grid[b-qmuba43n4b] {
    background-color: transparent;
}

.loading-grid[b-qmuba43n4b]  .tm-skeleton {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

/* MultiViewList styling */
[b-qmuba43n4b] .tm-multi-view-list {
    background-color: transparent;
}

[b-qmuba43n4b] .tm-multi-view-list .view-toolbar {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-qmuba43n4b] .tm-multi-view-list .view-search {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

[b-qmuba43n4b] .tm-multi-view-list .view-search::placeholder {
    color: var(--tm-text-secondary, #64748b);
}

[b-qmuba43n4b] .tm-multi-view-list .grid-view .grid-item {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-qmuba43n4b] .tm-multi-view-list .grid-view .grid-item:hover {
    border-color: var(--tm-color-primary, #3b82f6);
}

[b-qmuba43n4b] .tm-multi-view-list .list-view .list-item {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-qmuba43n4b] .tm-multi-view-list .list-view .list-item:hover {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

[b-qmuba43n4b] .tm-multi-view-list .filter-panel {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Empty state */
[b-qmuba43n4b] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

[b-qmuba43n4b] .tm-empty-state .empty-title {
    color: var(--tm-text-primary, #0f172a);
}
/* /Pages/Apps/CreateEditAppPage.razor.rz.scp.css */
/* CreateEditAppPage.razor.css - Enhanced UX Design */

/* Page Layout */
.page-container[b-f6djeg7izl] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--tm-spacing-lg, 1.5rem);
}

.page-header[b-f6djeg7izl] {
    margin-bottom: var(--tm-spacing-xl, 2rem);
    padding-bottom: var(--tm-spacing-md, 1rem);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.page-header h1[b-f6djeg7izl] {
    font-size: var(--tm-font-size-2xl, 1.5rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
}

/* Stepper Container */
.stepper-container[b-f6djeg7izl] {
    margin-bottom: var(--tm-spacing-xl, 2rem);
    padding: var(--tm-spacing-md, 1rem);
    background: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-border-radius-lg, 0.5rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    overflow: visible;
}

/* Progress */
.progress-container[b-f6djeg7izl] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-md, 1rem);
    margin-bottom: var(--tm-spacing-xl, 2rem);
    padding: var(--tm-spacing-sm, 0.5rem) var(--tm-spacing-md, 1rem);
    background: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-border-radius-md, 0.375rem);
}

.progress-container[b-f6djeg7izl]  .tm-progress {
    flex: 1;
}

.progress-text[b-f6djeg7izl] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    font-weight: var(--tm-font-weight-medium, 500);
    white-space: nowrap;
}

/* Form Layout */
.form-layout[b-f6djeg7izl] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--tm-spacing-xl, 2rem);
}

@media (max-width: 1024px) {
    .form-layout[b-f6djeg7izl] {
        grid-template-columns: 1fr;
    }
    
    .preview-column[b-f6djeg7izl] {
        order: -1;
    }
}

/* Form Column */
.form-column[b-f6djeg7izl] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-lg, 1.5rem);
}

/* Section Content */
.section-content[b-f6djeg7izl] {
    padding: var(--tm-spacing-md, 1rem) 0;
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-lg, 1.5rem);
    overflow: visible;
}

/* TmSection - allow dropdown to overflow */
[b-f6djeg7izl] .tm-section {
    overflow: visible;
}

[b-f6djeg7izl] .tm-section-content {
    overflow: visible;
}

.section-hint[b-f6djeg7izl] {
    color: var(--tm-text-secondary, #64748b);
    font-size: var(--tm-font-size-sm, 0.875rem);
    margin: 0 0 var(--tm-spacing-sm, 0.5rem) 0;
}

/* Icon Selection */
.icon-selection[b-f6djeg7izl] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-sm, 0.5rem);
}

.selection-label[b-f6djeg7izl] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: var(--tm-font-weight-medium, 500);
    color: var(--tm-text-primary, #0f172a);
}

.icon-grid[b-f6djeg7izl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tm-spacing-sm, 0.5rem);
}

.icon-option[b-f6djeg7izl] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 2px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-border-radius-lg, 0.5rem);
    background: var(--tm-bg-surface, #ffffff);
    cursor: pointer;
    transition: all var(--tm-transition-fast, 150ms);
}

.icon-option:hover[b-f6djeg7izl] {
    border-color: var(--tm-color-primary, #3b82f6);
    background: var(--tm-bg-surface-secondary, #f8fafc);
    transform: translateY(-2px);
}

.icon-option.selected[b-f6djeg7izl] {
    border-color: var(--tm-color-primary, #3b82f6);
    background: var(--tm-color-primary-light, #dbeafe);
    box-shadow: 0 0 0 3px var(--tm-color-primary-alpha, rgba(59, 130, 246, 0.2));
}

.icon-option[b-f6djeg7izl]  .tm-icon {
    color: var(--tm-text-secondary, #64748b);
}

.icon-option.selected[b-f6djeg7izl]  .tm-icon {
    color: var(--tm-color-primary, #3b82f6);
}

/* Color Selection */
.color-selection[b-f6djeg7izl] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-sm, 0.5rem);
}

.color-grid[b-f6djeg7izl] {
    display: flex;
    gap: var(--tm-spacing-md, 1rem);
    flex-wrap: wrap;
}

.color-option[b-f6djeg7izl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all var(--tm-transition-fast, 150ms);
    padding: 2px;
}

.color-option:hover[b-f6djeg7izl] {
    transform: scale(1.1);
}

.color-option.selected[b-f6djeg7izl] {
    border-color: var(--tm-text-primary, #0f172a);
    box-shadow: 0 0 0 3px var(--tm-color-primary-alpha, rgba(59, 130, 246, 0.2));
}

.color-circle[b-f6djeg7izl] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-value, var(--tm-color-primary));
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Step Navigation */
.step-navigation[b-f6djeg7izl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--tm-spacing-lg, 1.5rem);
    margin-top: var(--tm-spacing-lg, 1.5rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.step-navigation[b-f6djeg7izl]  .tm-button {
    min-width: 120px;
}

/* Preview Column */
.preview-column[b-f6djeg7izl] {
    position: sticky;
    top: var(--tm-spacing-lg, 1.5rem);
    height: fit-content;
}

.preview-column[b-f6djeg7izl]  .tm-section {
    background: var(--tm-bg-surface-secondary, #f8fafc);
}

.preview-content[b-f6djeg7izl] {
    padding: var(--tm-spacing-md, 1rem) 0;
}

.preview-description[b-f6djeg7izl] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    margin: 0 0 var(--tm-spacing-md, 1rem) 0;
}

/* App Card Preview */
.app-card-preview[b-f6djeg7izl] {
    background: var(--tm-bg-surface, #ffffff);
    border: 2px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-border-radius-xl, 0.75rem);
    padding: var(--tm-spacing-lg, 1.5rem);
    box-shadow: var(--tm-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    transition: all var(--tm-transition-normal, 250ms);
}

.app-card-preview:hover[b-f6djeg7izl] {
    box-shadow: var(--tm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border-color: var(--app-color, var(--tm-color-primary));
}

.card-header[b-f6djeg7izl] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-md, 1rem);
    margin-bottom: var(--tm-spacing-md, 1rem);
}

.card-icon[b-f6djeg7izl] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tm-border-radius-lg, 0.5rem);
    background: var(--app-color, var(--tm-color-primary));
    color: white;
    flex-shrink: 0;
}

.card-title-area[b-f6djeg7izl] {
    flex: 1;
    min-width: 0;
}

.card-title[b-f6djeg7izl] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 var(--tm-spacing-xs, 0.25rem) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-category[b-f6djeg7izl] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-description[b-f6djeg7izl] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary, #64748b);
    line-height: 1.5;
    margin: 0 0 var(--tm-spacing-md, 1rem) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-description.placeholder[b-f6djeg7izl] {
    color: var(--tm-text-muted, #94a3b8);
    font-style: italic;
}

.card-tags[b-f6djeg7izl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-spacing-xs, 0.25rem);
    margin-bottom: var(--tm-spacing-md, 1rem);
}

.card-footer[b-f6djeg7izl] {
    padding-top: var(--tm-spacing-md, 1rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Skeleton */
.form-skeleton[b-f6djeg7izl] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-lg, 1.5rem);
}

.skeleton-buttons[b-f6djeg7izl] {
    display: flex;
    gap: var(--tm-spacing-md, 1rem);
    justify-content: flex-end;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .page-header h1[b-f6djeg7izl] {
        color: var(--tm-text-primary-dark, #f1f5f9);
    }
    
    .stepper-container[b-f6djeg7izl],
    .app-card-preview[b-f6djeg7izl] {
        background: var(--tm-bg-surface-dark, #1e293b);
        border-color: var(--tm-border-color-dark, #334155);
    }
    
    .progress-container[b-f6djeg7izl] {
        background: var(--tm-bg-surface-secondary-dark, #0f172a);
    }
    
    .progress-text[b-f6djeg7izl] {
        color: var(--tm-text-secondary-dark, #94a3b8);
    }
    
    .selection-label[b-f6djeg7izl] {
        color: var(--tm-text-primary-dark, #f1f5f9);
    }
    
    .icon-option[b-f6djeg7izl] {
        background: var(--tm-bg-surface-dark, #1e293b);
        border-color: var(--tm-border-color-dark, #334155);
    }
    
    .icon-option:hover[b-f6djeg7izl] {
        background: var(--tm-bg-surface-secondary-dark, #0f172a);
    }
    
    .card-title[b-f6djeg7izl] {
        color: var(--tm-text-primary-dark, #f1f5f9);
    }
    
    .card-description[b-f6djeg7izl] {
        color: var(--tm-text-secondary-dark, #94a3b8);
    }
    
    .color-option.selected[b-f6djeg7izl] {
        border-color: var(--tm-text-primary-dark, #f1f5f9);
    }
}

/* Validation Messages */
[b-f6djeg7izl] .validation-message {
    color: var(--tm-color-danger, #ef4444);
    font-size: var(--tm-font-size-sm, 0.875rem);
    margin-top: var(--tm-spacing-xs, 0.25rem);
}

[b-f6djeg7izl] .validation-summary {
    background: var(--tm-color-danger-light, #fee2e2);
    border: 1px solid var(--tm-color-danger, #ef4444);
    border-radius: var(--tm-border-radius-md, 0.375rem);
    padding: var(--tm-spacing-md, 1rem);
    margin-bottom: var(--tm-spacing-lg, 1.5rem);
}

/* Tag Picker */
[b-f6djeg7izl] .tag-picker {
    background: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-f6djeg7izl] .tag-picker .tag-item {
    background: var(--tm-bg-surface-secondary, #f8fafc);
    color: var(--tm-text-primary, #0f172a);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Rich Editor */
[b-f6djeg7izl] .tm-rich-editor {
    background: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-f6djeg7izl] .tm-rich-editor .editor-toolbar {
    background: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-f6djeg7izl] .tm-rich-editor .editor-content {
    background: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}
/* /Pages/Apps/GeneratePromptPage.razor.rz.scp.css */
/* GeneratePromptPage.razor.css - Scoped styles */

/* Page container */
.page-container[b-5qlytdi50e] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Loading state */
.loading-state[b-5qlytdi50e] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-secondary, #64748b);
}

/* Generate header */
.generate-header[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    margin-bottom: 1.5rem;
}

.header-left[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--tm-text-primary, #0f172a);
}

.app-info[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--tm-text-primary, #0f172a);
}

.app-info h1[b-5qlytdi50e] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--tm-text-primary, #0f172a);
}

.app-icon-small[b-5qlytdi50e] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: white;
}

.header-actions[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Environment selector */
.environment-selector[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
}

.environment-hint[b-5qlytdi50e] {
    font-size: 0.8125rem;
    color: var(--tm-text-secondary, #64748b);
    font-style: italic;
}

/* Generation environment info */
.generation-environment-info[b-5qlytdi50e] {
    margin-bottom: 1rem;
}

/* Prompt selector */
.prompt-selector[b-5qlytdi50e] {
    margin-bottom: 1rem;
}

/* Generate grid layout */
.generate-grid[b-5qlytdi50e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Input column */
.input-column[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-column[b-5qlytdi50e]  .tm-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.input-column h3[b-5qlytdi50e] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    color: var(--tm-text-primary, #0f172a);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Variable groups */
.variable-group[b-5qlytdi50e] {
    margin-bottom: 0.75rem;
}

.variable-group:last-child[b-5qlytdi50e] {
    margin-bottom: 0;
}

.variable-group-header[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
    user-select: none;
}

.variable-group-header:hover[b-5qlytdi50e] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.variable-group-title[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variable-group-count[b-5qlytdi50e] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Variables form */
.variables-form[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0 0 0;
}

.variable-field[b-5qlytdi50e] {
    background-color: transparent;
}

/* Preview column */
.preview-column[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

.preview-card[b-5qlytdi50e] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.preview-header[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.preview-title-row[b-5qlytdi50e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-header h3[b-5qlytdi50e] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--tm-text-primary, #0f172a);
}

.preview-stats[b-5qlytdi50e] {
    display: flex;
    gap: 0.5rem;
}

/* Generating state */
.generating-state[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.5rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Prompt preview box */
.prompt-preview-box[b-5qlytdi50e] {
    max-height: 50vh;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}

.prompt-preview-box.preview-loading[b-5qlytdi50e] {
    opacity: 0.5;
}

.prompt-preview-box pre[b-5qlytdi50e] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tm-text-primary, #0f172a);
}

/* Empty preview */
.empty-preview[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.5rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Structured view */
.structured-card[b-5qlytdi50e] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.structured-card h4[b-5qlytdi50e] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    color: var(--tm-text-primary, #0f172a);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.structured-parts[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
}

.structured-part[b-5qlytdi50e] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.structured-part:last-child[b-5qlytdi50e] {
    border-bottom: none;
    padding-bottom: 0;
}

.part-label[b-5qlytdi50e] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: 0.375rem;
}

.structured-part p[b-5qlytdi50e] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--tm-text-primary, #0f172a);
}

.structured-part pre[b-5qlytdi50e] {
    margin: 0;
    padding: 0.5rem;
    white-space: pre-wrap;
    font-size: 0.8125rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.375rem;
    color: var(--tm-text-primary, #0f172a);
}

/* Modal content */
.modal-body-content[b-5qlytdi50e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.modal-footer-content[b-5qlytdi50e] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Responsive */
@media (max-width: 768px) {
    .generate-grid[b-5qlytdi50e] {
        grid-template-columns: 1fr;
    }

    .generate-header[b-5qlytdi50e] {
        flex-direction: column;
        align-items: flex-start;
    }

    .preview-column[b-5qlytdi50e] {
        position: static;
    }
}
/* /Pages/Apps/PromptDetailPage.razor.rz.scp.css */
/* PromptDetailPage.razor.css - Dark Mode Support */

/* Page container */
.page-container[b-efqtfzlp37] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Loading state */
.loading-state[b-efqtfzlp37] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-secondary, #64748b);
}

/* Prompt detail header */
.prompt-detail-header[b-efqtfzlp37] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.header-left[b-efqtfzlp37] {
    color: var(--tm-text-primary, #0f172a);
}

.prompt-title h1[b-efqtfzlp37] {
    color: var(--tm-text-primary, #0f172a);
}

.header-actions[b-efqtfzlp37]  .tm-button {
    color: var(--tm-text-primary, #0f172a);
}

/* Detail grid layout */
.prompt-detail-grid[b-efqtfzlp37] {
    background-color: transparent;
}

/* Detail column */
.detail-column[b-efqtfzlp37] {
    background-color: transparent;
}

.detail-column[b-efqtfzlp37]  .tm-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.detail-column h3[b-efqtfzlp37] {
    color: var(--tm-text-primary, #0f172a);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Info rows */
.info-row[b-efqtfzlp37] {
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.info-label[b-efqtfzlp37] {
    color: var(--tm-text-secondary, #64748b);
}

.info-value[b-efqtfzlp37] {
    color: var(--tm-text-primary, #0f172a);
}

/* Prompt preview */
.prompt-preview[b-efqtfzlp37] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-primary, #0f172a);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Empty state */
.empty-state[b-efqtfzlp37] {
    color: var(--tm-text-secondary, #64748b);
}

/* Stats column */
.stats-column[b-efqtfzlp37] {
    background-color: transparent;
}

.stats-column[b-efqtfzlp37]  .tm-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.stats-column h3[b-efqtfzlp37] {
    color: var(--tm-text-primary, #0f172a);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Modal overlay */
.modal-overlay[b-efqtfzlp37] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content[b-efqtfzlp37] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Form groups */
.form-group label[b-efqtfzlp37] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-actions[b-efqtfzlp37] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Pages/AuditLogs/AuditLogsPage.razor.rz.scp.css */
/* AuditLogsPage.razor.css - Dark Mode Support */

.page-container[b-e8p3mcde22] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-e8p3mcde22] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header-text h1[b-e8p3mcde22] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--tm-text-primary, #0f172a);
}

/* Filters bar */
.filters-bar[b-e8p3mcde22] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    margin-bottom: 1.5rem;
}

.filter-group[b-e8p3mcde22] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-select[b-e8p3mcde22],
.filter-input[b-e8p3mcde22] {
    min-width: 160px;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.filter-select:focus[b-e8p3mcde22],
.filter-input:focus[b-e8p3mcde22] {
    border-color: var(--tm-color-primary, #3b82f6);
    outline: none;
}

.date-input[b-e8p3mcde22] {
    max-width: 160px;
}

.filter-actions[b-e8p3mcde22] {
    display: flex;
    gap: 0.5rem;
}

/* Result info */
.result-info[b-e8p3mcde22] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.total-count[b-e8p3mcde22] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Audit table */
.audit-table-wrapper[b-e8p3mcde22] {
    overflow-x: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    background-color: var(--tm-bg-surface, #ffffff);
}

.audit-table[b-e8p3mcde22] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.audit-table thead[b-e8p3mcde22] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.audit-table th[b-e8p3mcde22] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.audit-table td[b-e8p3mcde22] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
    vertical-align: middle;
}

.audit-table tbody tr:hover[b-e8p3mcde22] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.audit-table tbody tr:last-child td[b-e8p3mcde22] {
    border-bottom: none;
}

/* Cell styles */
.cell-date[b-e8p3mcde22] {
    white-space: nowrap;
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.8125rem;
}

.cell-user[b-e8p3mcde22] {
    font-weight: 500;
}

.cell-action[b-e8p3mcde22] {
    white-space: nowrap;
}

.cell-resource-type[b-e8p3mcde22] {
    white-space: nowrap;
}

.cell-resource-name[b-e8p3mcde22] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-ip code[b-e8p3mcde22] {
    font-size: 0.75rem;
    color: var(--tm-text-muted, #94a3b8);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.cell-actions[b-e8p3mcde22] {
    text-align: right;
    white-space: nowrap;
}

/* Action badges */
.action-badge[b-e8p3mcde22] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.action-create[b-e8p3mcde22] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.action-update[b-e8p3mcde22] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.action-delete[b-e8p3mcde22] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.action-login[b-e8p3mcde22] {
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.action-default[b-e8p3mcde22] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

/* Details row */
.details-row td[b-e8p3mcde22] {
    padding: 0;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.details-content[b-e8p3mcde22] {
    padding: 1rem;
}

.details-content pre[b-e8p3mcde22] {
    margin: 0;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    color: var(--tm-text-primary, #0f172a);
}

.details-content code[b-e8p3mcde22] {
    font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

.user-agent-info[b-e8p3mcde22] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--tm-text-muted, #94a3b8);
}

/* Pagination */
.pagination[b-e8p3mcde22] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.page-info[b-e8p3mcde22] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Loading state */
.loading-state[b-e8p3mcde22] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-e8p3mcde22] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--tm-text-secondary, #64748b);
}

.empty-state-icon[b-e8p3mcde22] {
    font-size: 3rem;
    color: var(--tm-text-muted, #94a3b8);
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .page-container[b-e8p3mcde22] {
        padding: 1rem;
    }
    
    .filters-bar[b-e8p3mcde22] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-e8p3mcde22] {
        flex-direction: column;
    }

    .filter-select[b-e8p3mcde22],
    .filter-input[b-e8p3mcde22] {
        min-width: 100%;
    }

    .date-input[b-e8p3mcde22] {
        max-width: 100%;
    }

    .filter-actions[b-e8p3mcde22] {
        justify-content: flex-end;
    }
    
    .audit-table th[b-e8p3mcde22],
    .audit-table td[b-e8p3mcde22] {
        padding: 0.5rem 0.75rem;
    }
}
/* /Pages/Auth/ChangePasswordPage.razor.rz.scp.css */
/* ========================================
   CHANGE PASSWORD PAGE - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

/* Page container */
.page-container[b-11x9uuevnm] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    min-height: 100%;
    padding: var(--tm-space-6, 1.5rem);
}

/* Page header */
.page-header[b-11x9uuevnm] {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.page-header h1[b-11x9uuevnm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Max width container */
.max-w-2xl[b-11x9uuevnm] {
    max-width: 42rem;
}

/* Card styling */
[b-11x9uuevnm] .tm-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-11x9uuevnm] .tm-card-body {
    padding: var(--tm-space-6, 1.5rem);
}

/* Password requirements */
.password-requirements[b-11x9uuevnm] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 12px;
    padding: var(--tm-space-4, 1rem);
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.password-requirements h4[b-11x9uuevnm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 var(--tm-space-3, 0.75rem) 0;
}

.requirement[b-11x9uuevnm] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--tm-text-secondary, #475569);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.requirement:last-child[b-11x9uuevnm] {
    margin-bottom: 0;
}

.requirement.met[b-11x9uuevnm] {
    color: var(--tm-color-success, #10b981);
}

.requirement[b-11x9uuevnm]  .tm-icon {
    width: 16px;
    height: 16px;
}

/* Form field styling */
[b-11x9uuevnm] .tm-form-field {
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-11x9uuevnm] .tm-form-field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

/* Checkbox styling */
[b-11x9uuevnm] .tm-checkbox {
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

[b-11x9uuevnm] .tm-checkbox__box {
    border-color: var(--tm-border-color, #e2e8f0);
    border-radius: 6px;
}

/* Hint text */
.text-sm[b-11x9uuevnm] {
    font-size: 0.875rem;
}

.text-gray-500[b-11x9uuevnm] {
    color: var(--tm-text-secondary, #64748b);
}

.mt-1[b-11x9uuevnm] {
    margin-top: 0.25rem;
}

/* Space utility */
.space-y-6 > * + *[b-11x9uuevnm] {
    margin-top: var(--tm-space-6, 1.5rem);
}

/* Alert styling */
.alert[b-11x9uuevnm] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3, 0.75rem);
    padding: var(--tm-space-4, 1rem);
    border-radius: 8px;
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.alert-success[b-11x9uuevnm] {
    background-color: var(--tm-color-success-light, #d1fae5);
    border: 1px solid var(--tm-color-success, #10b981);
    color: var(--tm-color-success-dark, #065f46);
}

.alert-danger[b-11x9uuevnm] {
    background-color: var(--tm-color-danger-light, #fee2e2);
    border: 1px solid var(--tm-color-danger, #ef4444);
    color: var(--tm-color-danger-dark, #991b1b);
}

/* Button group */
.flex[b-11x9uuevnm] {
    display: flex;
}

.gap-4[b-11x9uuevnm] {
    gap: var(--tm-space-4, 1rem);
}

/* Button styling */
[b-11x9uuevnm] .tm-btn {
    font-weight: 600;
}

[b-11x9uuevnm] .tm-btn-primary {
    background-color: var(--tm-color-primary, #3b82f6);
    color: white;
}

[b-11x9uuevnm] .tm-btn-secondary {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

/* Responsive */
@media (max-width: 640px) {
    .page-container[b-11x9uuevnm] {
        padding: var(--tm-space-4, 1rem);
    }

    .page-header h1[b-11x9uuevnm] {
        font-size: 1.5rem;
    }

    .flex[b-11x9uuevnm] {
        flex-direction: column;
    }

    .gap-4[b-11x9uuevnm] {
        gap: var(--tm-space-3, 0.75rem);
    }
}
/* /Pages/Auth/ForgotPasswordPage.razor.rz.scp.css */
/* ========================================
   FORGOT PASSWORD PAGE - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

/* Auth page container */
.auth-page[b-cynfofpvm3] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    animation: fadeInUp-b-cynfofpvm3 0.5s ease-out;
}

@keyframes fadeInUp-b-cynfofpvm3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth card */
[b-cynfofpvm3] .auth-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Auth header */
.auth-header[b-cynfofpvm3] {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header[b-cynfofpvm3]  .tm-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.auth-header h1[b-cynfofpvm3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.auth-header p[b-cynfofpvm3] {
    font-size: 0.9375rem;
    color: var(--tm-text-secondary, #475569);
    margin: 0;
    line-height: 1.5;
}

/* Alert styling */
[b-cynfofpvm3] .auth-alert {
    margin-bottom: 1.25rem;
    animation: slideIn-b-cynfofpvm3 0.3s ease-out;
}

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

/* Success message styling */
.auth-alert[b-cynfofpvm3]  .tm-alert {
    background-color: var(--tm-color-success-light, #d1fae5);
    border-color: var(--tm-color-success, #10b981);
    color: var(--tm-color-success-dark, #065f46);
}

/* Auth footer */
.auth-footer[b-cynfofpvm3] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    text-align: center;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #475569);
}

.auth-footer a[b-cynfofpvm3] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.auth-footer a:hover[b-cynfofpvm3] {
    color: var(--tm-color-primary-dark, #2563eb);
    text-decoration: underline;
}

/* Submit button */
[b-cynfofpvm3] .tm-btn {
    border-radius: 12px;
    font-weight: 600;
}

[b-cynfofpvm3] .tm-btn-primary {
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #6366f1 100%);
    border: none;
}

/* Form field styling */
[b-cynfofpvm3] .tm-form-field {
    margin-bottom: 1.25rem;
}

[b-cynfofpvm3] .tm-form-field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

[b-cynfofpvm3] .tm-form-field__required {
    color: var(--tm-color-danger, #ef4444);
    margin-left: 0.25rem;
}

/* Responsive */
@media (max-width: 640px) {
    .auth-page[b-cynfofpvm3] {
        max-width: 100%;
        padding: 0 1rem;
    }

    .auth-header h1[b-cynfofpvm3] {
        font-size: 1.5rem;
    }

    .auth-header p[b-cynfofpvm3] {
        font-size: 0.875rem;
    }
}
/* /Pages/Auth/LoginPage.razor.rz.scp.css */
/* ========================================
   LOGIN PAGE - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

/* Auth page container */
.auth-page[b-2c6r68h6zd] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    animation: fadeInUp-b-2c6r68h6zd 0.5s ease-out;
}

@keyframes fadeInUp-b-2c6r68h6zd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth card - uses Tempo.Blazor card component */
[b-2c6r68h6zd] .auth-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Auth header */
.auth-header[b-2c6r68h6zd] {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header[b-2c6r68h6zd]  .tm-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.auth-header h1[b-2c6r68h6zd] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.auth-header p[b-2c6r68h6zd] {
    font-size: 0.9375rem;
    color: var(--tm-text-secondary, #475569);
    margin: 0;
    line-height: 1.5;
}

/* Form options (Remember me + Forgot password) */
.form-options[b-2c6r68h6zd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.form-options[b-2c6r68h6zd]  .tm-checkbox {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #475569);
}

.form-options[b-2c6r68h6zd]  .tm-checkbox__box {
    border-radius: 6px;
    border-color: var(--tm-border-color, #e2e8f0);
}

.form-options a[b-2c6r68h6zd] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.form-options a:hover[b-2c6r68h6zd] {
    color: var(--tm-color-primary-dark, #2563eb);
    text-decoration: underline;
}

/* Alert styling */
[b-2c6r68h6zd] .auth-alert {
    margin-bottom: 1.25rem;
    animation: slideIn-b-2c6r68h6zd 0.3s ease-out;
}

@keyframes slideIn-b-2c6r68h6zd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth footer */
.auth-footer[b-2c6r68h6zd] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    text-align: center;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #475569);
}

.auth-footer a[b-2c6r68h6zd] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
    transition: color 0.2s ease;
}

.auth-footer a:hover[b-2c6r68h6zd] {
    color: var(--tm-color-primary-dark, #2563eb);
    text-decoration: underline;
}

/* Submit button */
[b-2c6r68h6zd] .tm-btn {
    border-radius: 12px;
    font-weight: 600;
}

[b-2c6r68h6zd] .tm-btn-primary {
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #6366f1 100%);
    border: none;
}

/* Responsive */
@media (max-width: 640px) {
    .auth-page[b-2c6r68h6zd] {
        max-width: 100%;
        padding: 0 1rem;
    }

    .auth-header h1[b-2c6r68h6zd] {
        font-size: 1.5rem;
    }

    .auth-header p[b-2c6r68h6zd] {
        font-size: 0.875rem;
    }

    .form-options[b-2c6r68h6zd] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}
/* /Pages/Auth/ProfilePage.razor.rz.scp.css */
/* ========================================
   PROFILE PAGE - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

/* Page container */
.page-container[b-2dtqz46uy5] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    min-height: 100%;
    padding: var(--tm-space-6, 1.5rem);
}

/* Page header */
.page-header[b-2dtqz46uy5] {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.page-header h1[b-2dtqz46uy5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Grid layout */
.grid[b-2dtqz46uy5] {
    display: grid;
}

.grid-cols-1[b-2dtqz46uy5] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-6[b-2dtqz46uy5] {
    gap: var(--tm-space-6, 1.5rem);
}

/* Card styling */
[b-2dtqz46uy5] .tm-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-2dtqz46uy5] .tm-card-header {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-bottom-color: var(--tm-border-color, #e2e8f0);
    padding: var(--tm-space-4, 1rem) var(--tm-space-6, 1.5rem);
}

[b-2dtqz46uy5] .tm-card-header-title {
    color: var(--tm-text-primary, #0f172a);
    font-weight: 600;
}

[b-2dtqz46uy5] .tm-card-body {
    padding: var(--tm-space-6, 1.5rem);
}

/* Outlined card variant (for danger zone) */
[b-2dtqz46uy5] .tm-card--outlined {
    background-color: transparent;
    border-width: 2px;
}

/* Loading state */
.loading-state[b-2dtqz46uy5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tm-space-12, 3rem);
    color: var(--tm-text-secondary, #475569);
}

.loading-state p[b-2dtqz46uy5] {
    margin-top: var(--tm-space-4, 1rem);
    font-size: 0.875rem;
}

/* Form field styling */
[b-2dtqz46uy5] .tm-form-field {
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-2dtqz46uy5] .tm-form-field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

[b-2dtqz46uy5] .tm-form-field__required {
    color: var(--tm-color-danger, #ef4444);
    margin-left: 0.25rem;
}

/* Select styling */
[b-2dtqz46uy5] .tm-select {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

/* Checkbox styling */
[b-2dtqz46uy5] .tm-checkbox {
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

[b-2dtqz46uy5] .tm-checkbox__box {
    border-color: var(--tm-border-color, #e2e8f0);
    border-radius: 6px;
}

/* Alert styling */
.alert[b-2dtqz46uy5] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3, 0.75rem);
    padding: var(--tm-space-4, 1rem);
    border-radius: 8px;
    margin-top: var(--tm-space-4, 1rem);
}

.alert-danger[b-2dtqz46uy5] {
    background-color: var(--tm-color-danger-light, #fee2e2);
    border: 1px solid var(--tm-color-danger, #ef4444);
    color: var(--tm-color-danger-dark, #991b1b);
}

/* Button group */
.flex[b-2dtqz46uy5] {
    display: flex;
}

.flex-col[b-2dtqz46uy5] {
    flex-direction: column;
}

.gap-4[b-2dtqz46uy5] {
    gap: var(--tm-space-4, 1rem);
}

.mt-6[b-2dtqz46uy5] {
    margin-top: var(--tm-space-6, 1.5rem);
}

.mt-8[b-2dtqz46uy5] {
    margin-top: var(--tm-space-8, 2rem);
}

.mt-4[b-2dtqz46uy5] {
    margin-top: var(--tm-space-4, 1rem);
}

/* Danger zone styling */
.danger-zone-title[b-2dtqz46uy5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-color-danger, #ef4444);
    margin: 0 0 var(--tm-space-4, 1rem) 0;
}

/* Danger card content */
.danger-content h3[b-2dtqz46uy5] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 var(--tm-space-1, 0.25rem) 0;
}

.danger-content h3.text-danger[b-2dtqz46uy5] {
    color: var(--tm-color-danger, #ef4444);
}

.danger-content p[b-2dtqz46uy5] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
    margin: 0;
}

/* Justify between */
.justify-between[b-2dtqz46uy5] {
    justify-content: space-between;
}

.items-center[b-2dtqz46uy5] {
    align-items: center;
}

/* Button styling */
[b-2dtqz46uy5] .tm-btn {
    font-weight: 600;
}

[b-2dtqz46uy5] .tm-btn-primary {
    background-color: var(--tm-color-primary, #3b82f6);
    color: white;
}

[b-2dtqz46uy5] .tm-btn-secondary {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

[b-2dtqz46uy5] .tm-btn-danger {
    background-color: var(--tm-color-danger, #ef4444);
    color: white;
}

[b-2dtqz46uy5] .tm-btn-danger:hover {
    background-color: var(--tm-color-danger-dark, #dc2626);
}

/* Space utilities */
.space-y-4 > * + *[b-2dtqz46uy5] {
    margin-top: var(--tm-space-4, 1rem);
}

/* Text utilities */
.text-sm[b-2dtqz46uy5] {
    font-size: 0.875rem;
}

.text-gray-500[b-2dtqz46uy5] {
    color: var(--tm-text-secondary, #64748b);
}

/* Info row styling (for read-only profile info) */
.info-row[b-2dtqz46uy5] {
    display: flex;
    justify-content: space-between;
    padding: var(--tm-space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.info-row:last-child[b-2dtqz46uy5] {
    border-bottom: none;
}

.info-row .label[b-2dtqz46uy5] {
    color: var(--tm-text-secondary, #64748b);
}

.info-row .value[b-2dtqz46uy5] {
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
}

/* Responsive */
@media (min-width: 768px) {
    .md\\:grid-cols-2[b-2dtqz46uy5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page-container[b-2dtqz46uy5] {
        padding: var(--tm-space-4, 1rem);
    }

    .page-header h1[b-2dtqz46uy5] {
        font-size: 1.5rem;
    }

    .flex[b-2dtqz46uy5] {
        flex-direction: column;
    }

    .gap-4[b-2dtqz46uy5] {
        gap: var(--tm-space-3, 0.75rem);
    }
}
/* /Pages/Auth/RegisterPage.razor.rz.scp.css */
/* ========================================
   REGISTER PAGE - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

/* Auth page container */
.auth-page[b-ixbdclcoo9] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    animation: fadeInUp-b-ixbdclcoo9 0.5s ease-out;
}

@keyframes fadeInUp-b-ixbdclcoo9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth card */
[b-ixbdclcoo9] .auth-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Auth header */
.auth-header[b-ixbdclcoo9] {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header[b-ixbdclcoo9]  .tm-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.auth-header h1[b-ixbdclcoo9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.auth-header p[b-ixbdclcoo9] {
    font-size: 0.9375rem;
    color: var(--tm-text-secondary, #475569);
    margin: 0;
    line-height: 1.5;
}

/* Password requirements */
.password-requirements[b-ixbdclcoo9] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem 0;
}

.requirement[b-ixbdclcoo9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--tm-text-secondary, #475569);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.requirement:last-child[b-ixbdclcoo9] {
    margin-bottom: 0;
}

.requirement[b-ixbdclcoo9]  .tm-icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.requirement.met[b-ixbdclcoo9] {
    color: var(--tm-color-success, #10b981);
}

.requirement.met[b-ixbdclcoo9]  .tm-icon {
    transform: scale(1.1);
}

/* Password strength indicator */
[b-ixbdclcoo9] .tm-password-strength {
    margin: 1rem 0;
}

[b-ixbdclcoo9] .tm-password-strength-bar {
    height: 6px;
    border-radius: 3px;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    overflow: hidden;
}

[b-ixbdclcoo9] .tm-password-strength-fill {
    border-radius: 3px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alert styling */
[b-ixbdclcoo9] .auth-alert {
    margin-bottom: 1.25rem;
    animation: slideIn-b-ixbdclcoo9 0.3s ease-out;
}

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

/* Auth footer */
.auth-footer[b-ixbdclcoo9] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    text-align: center;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #475569);
}

.auth-footer a[b-ixbdclcoo9] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
    transition: color 0.2s ease;
}

.auth-footer a:hover[b-ixbdclcoo9] {
    color: var(--tm-color-primary-dark, #2563eb);
    text-decoration: underline;
}

/* Submit button */
[b-ixbdclcoo9] .tm-btn {
    border-radius: 12px;
    font-weight: 600;
}

[b-ixbdclcoo9] .tm-btn-primary {
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #6366f1 100%);
    border: none;
}

/* Responsive */
@media (max-width: 640px) {
    .auth-page[b-ixbdclcoo9] {
        max-width: 100%;
        padding: 0 1rem;
    }

    .auth-header h1[b-ixbdclcoo9] {
        font-size: 1.5rem;
    }

    .auth-header p[b-ixbdclcoo9] {
        font-size: 0.875rem;
    }

    .password-requirements[b-ixbdclcoo9] {
        padding: 0.875rem 1rem;
    }
}
/* /Pages/Auth/ResetPasswordPage.razor.rz.scp.css */
/* ========================================
   RESET PASSWORD PAGE - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

/* Auth page container */
.auth-page[b-42aoohoonf] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    animation: fadeInUp-b-42aoohoonf 0.5s ease-out;
}

@keyframes fadeInUp-b-42aoohoonf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth card */
[b-42aoohoonf] .auth-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Auth header */
.auth-header[b-42aoohoonf] {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header[b-42aoohoonf]  .tm-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.auth-header h1[b-42aoohoonf] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.auth-header p[b-42aoohoonf] {
    font-size: 0.9375rem;
    color: var(--tm-text-secondary, #475569);
    margin: 0;
    line-height: 1.5;
}

/* Password requirements */
.password-requirements[b-42aoohoonf] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem 0;
}

.requirement[b-42aoohoonf] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--tm-text-secondary, #475569);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.requirement:last-child[b-42aoohoonf] {
    margin-bottom: 0;
}

.requirement[b-42aoohoonf]  .tm-icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.requirement.met[b-42aoohoonf] {
    color: var(--tm-color-success, #10b981);
}

.requirement.met[b-42aoohoonf]  .tm-icon {
    transform: scale(1.1);
}

/* Password strength indicator */
[b-42aoohoonf] .tm-password-strength {
    margin: 1rem 0;
}

[b-42aoohoonf] .tm-password-strength-bar {
    height: 6px;
    border-radius: 3px;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    overflow: hidden;
}

[b-42aoohoonf] .tm-password-strength-fill {
    border-radius: 3px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alert styling */
[b-42aoohoonf] .auth-alert {
    margin-bottom: 1.25rem;
    animation: slideIn-b-42aoohoonf 0.3s ease-out;
}

@keyframes slideIn-b-42aoohoonf {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error alert specific */
[b-42aoohoonf] .auth-alert.tm-alert--error {
    background-color: var(--tm-color-danger-light, #fee2e2);
    border-color: var(--tm-color-danger, #ef4444);
    color: var(--tm-color-danger-dark, #991b1b);
}

/* Auth footer */
.auth-footer[b-42aoohoonf] {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    text-align: center;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #475569);
}

.auth-footer a[b-42aoohoonf] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.auth-footer a:hover[b-42aoohoonf] {
    color: var(--tm-color-primary-dark, #2563eb);
    text-decoration: underline;
}

/* Submit button */
[b-42aoohoonf] .tm-btn {
    border-radius: 12px;
    font-weight: 600;
}

[b-42aoohoonf] .tm-btn-primary {
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #6366f1 100%);
    border: none;
}

/* Form field styling */
[b-42aoohoonf] .tm-form-field {
    margin-bottom: 1.25rem;
}

[b-42aoohoonf] .tm-form-field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

[b-42aoohoonf] .tm-form-field__required {
    color: var(--tm-color-danger, #ef4444);
    margin-left: 0.25rem;
}

/* Responsive */
@media (max-width: 640px) {
    .auth-page[b-42aoohoonf] {
        max-width: 100%;
        padding: 0 1rem;
    }

    .auth-header h1[b-42aoohoonf] {
        font-size: 1.5rem;
    }

    .auth-header p[b-42aoohoonf] {
        font-size: 0.875rem;
    }

    .password-requirements[b-42aoohoonf] {
        padding: 0.875rem 1rem;
    }
}
/* /Pages/ChangeRequests/ChangeRequestDetailPage.razor.rz.scp.css */
/* ChangeRequestDetailPage.razor.css - Dark Mode Support */

.page-container[b-ltnja97d3x] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.loading-state[b-ltnja97d3x] {
    display: flex;
    justify-content: center;
    padding: 3rem;
    color: var(--tm-text-secondary, #64748b);
}

.empty-state[b-ltnja97d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    text-align: center;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px dashed var(--tm-border-color, #e2e8f0);
}

/* Header */
.detail-header[b-ltnja97d3x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.header-left[b-ltnja97d3x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.header-left h1[b-ltnja97d3x] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin: 0;
}

.breadcrumbs[b-ltnja97d3x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

.breadcrumbs a[b-ltnja97d3x] {
    color: var(--tm-color-primary, #3b82f6);
    text-decoration: none;
}

.breadcrumbs a:hover[b-ltnja97d3x] {
    text-decoration: underline;
}

.header-actions[b-ltnja97d3x] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Status badge */
.status-badge[b-ltnja97d3x] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-pending[b-ltnja97d3x] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-approved[b-ltnja97d3x] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-rejected[b-ltnja97d3x] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-implemented[b-ltnja97d3x] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Meta info */
.detail-meta[b-ltnja97d3x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    margin-bottom: 1.5rem;
}

.meta-item[b-ltnja97d3x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.meta-value[b-ltnja97d3x] {
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.description-text[b-ltnja97d3x] {
    color: var(--tm-text-secondary, #64748b);
    line-height: 1.6;
}

/* Approvals progress */
.approvals-bar[b-ltnja97d3x] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.approvals-info[b-ltnja97d3x] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
}

.approvals-track[b-ltnja97d3x] {
    height: 8px;
    border-radius: 4px;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    overflow: hidden;
}

.approvals-fill[b-ltnja97d3x] {
    height: 100%;
    border-radius: 4px;
    background-color: var(--tm-color-primary, #3b82f6);
    transition: width 0.3s ease;
}

.approvals-fill.complete[b-ltnja97d3x] {
    background-color: #22c55e;
}

/* Sections */
.detail-section[b-ltnja97d3x] {
    margin-bottom: 2rem;
}

.detail-section h3[b-ltnja97d3x] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.empty-section[b-ltnja97d3x] {
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.875rem;
    font-style: italic;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.5rem;
    text-align: center;
}

/* Proposed changes diff */
.diff-container[b-ltnja97d3x] {
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--tm-bg-surface, #ffffff);
}

.diff-header[b-ltnja97d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.diff-header h4[b-ltnja97d3x] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

/* Reviews */
.reviews-list[b-ltnja97d3x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-item[b-ltnja97d3x] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--tm-border-color, #e2e8f0);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.review-item.review-approved[b-ltnja97d3x] {
    border-left-color: #22c55e;
    background-color: rgba(34, 197, 94, 0.05);
}

.review-item.review-rejected[b-ltnja97d3x] {
    border-left-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
}

.review-header[b-ltnja97d3x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.reviewer-name[b-ltnja97d3x] {
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.review-decision[b-ltnja97d3x] {
    color: var(--tm-text-secondary, #64748b);
}

.review-decision.approved[b-ltnja97d3x] {
    color: #22c55e;
}

.review-decision.rejected[b-ltnja97d3x] {
    color: #ef4444;
}

.review-date[b-ltnja97d3x] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

.review-comment[b-ltnja97d3x] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
    padding-left: 1rem;
    border-left: 2px solid var(--tm-border-color, #e2e8f0);
}

/* Comments */
.comments-list[b-ltnja97d3x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comment-item[b-ltnja97d3x] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.comment-header[b-ltnja97d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.comment-author[b-ltnja97d3x] {
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.comment-date[b-ltnja97d3x] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

.comment-content[b-ltnja97d3x] {
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
    line-height: 1.5;
}

/* Add comment form */
.add-comment-form[b-ltnja97d3x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.5rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.comment-textarea[b-ltnja97d3x] {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
    resize: vertical;
}

.comment-textarea:focus[b-ltnja97d3x] {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-textarea[b-ltnja97d3x]::placeholder {
    color: var(--tm-text-muted, #94a3b8);
}

/* Timeline */
.timeline-section[b-ltnja97d3x] {
    margin-top: 2rem;
}

.timeline-container[b-ltnja97d3x] {
    position: relative;
    padding-left: 1.5rem;
}

.timeline-container[b-ltnja97d3x]::before {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--tm-border-color, #e2e8f0);
}

.timeline-item[b-ltnja97d3x] {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-dot[b-ltnja97d3x] {
    position: absolute;
    left: -1.5rem;
    top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 2px solid var(--tm-color-primary, #3b82f6);
}

.timeline-content[b-ltnja97d3x] {
    font-size: 0.875rem;
}

.timeline-action[b-ltnja97d3x] {
    color: var(--tm-text-primary, #0f172a);
    font-weight: 500;
}

.timeline-meta[b-ltnja97d3x] {
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Modal overlay */
.modal-overlay[b-ltnja97d3x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-ltnja97d3x] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.modal-content h3[b-ltnja97d3x] {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.modal-text[b-ltnja97d3x] {
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: 1rem;
}

.modal-actions[b-ltnja97d3x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .page-container[b-ltnja97d3x] {
        padding: 1rem;
    }
    
    .detail-header[b-ltnja97d3x] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-actions[b-ltnja97d3x] {
        justify-content: flex-end;
    }
    
    .detail-meta[b-ltnja97d3x] {
        grid-template-columns: 1fr;
    }
    
    .review-header[b-ltnja97d3x] {
        flex-wrap: wrap;
    }
    
    .review-date[b-ltnja97d3x] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Pages/ChangeRequests/ChangeRequestsPage.razor.rz.scp.css */
/* ChangeRequestsPage.razor.css - Dark Mode Support */

.page-container[b-j17onrkz5z] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-j17onrkz5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header h1[b-j17onrkz5z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

/* Tab navigation */
.tab-nav[b-j17onrkz5z] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--tm-border-color, #e2e8f0);
    margin-bottom: 1.5rem;
}

.tab-item[b-j17onrkz5z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: none;
    color: var(--tm-text-secondary, #64748b);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.tab-item:hover[b-j17onrkz5z] {
    color: var(--tm-text-primary, #0f172a);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.tab-item.active[b-j17onrkz5z] {
    color: var(--tm-color-primary, #3b82f6);
    border-bottom-color: var(--tm-color-primary, #3b82f6);
}

.tab-badge[b-j17onrkz5z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tm-text-secondary, #64748b);
}

.tab-item.active .tab-badge[b-j17onrkz5z] {
    background-color: var(--tm-color-primary, #3b82f6);
    color: white;
}

/* Filter bar */
.filter-bar[b-j17onrkz5z] {
    margin-bottom: 1rem;
    max-width: 300px;
}

.filter-input[b-j17onrkz5z] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.filter-input:focus[b-j17onrkz5z] {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-input[b-j17onrkz5z]::placeholder {
    color: var(--tm-text-muted, #94a3b8);
}

/* Loading state */
.loading-state[b-j17onrkz5z] {
    display: flex;
    justify-content: center;
    padding: 3rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-j17onrkz5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    text-align: center;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px dashed var(--tm-border-color, #e2e8f0);
}

.empty-state[b-j17onrkz5z]  .empty-icon {
    opacity: 0.3;
    margin-bottom: 1rem;
    color: var(--tm-text-muted, #94a3b8);
}

.empty-state p[b-j17onrkz5z] {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--tm-text-primary, #0f172a);
}

.empty-state small[b-j17onrkz5z] {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Change requests table */
.cr-table-container[b-j17onrkz5z] {
    overflow-x: auto;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.cr-table[b-j17onrkz5z] {
    width: 100%;
    border-collapse: collapse;
}

.cr-table thead th[b-j17onrkz5z] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.cr-table tbody td[b-j17onrkz5z] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    font-size: 0.875rem;
    vertical-align: middle;
    color: var(--tm-text-primary, #0f172a);
}

.cr-row[b-j17onrkz5z] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cr-row:hover[b-j17onrkz5z] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.cr-row:last-child td[b-j17onrkz5z] {
    border-bottom: none;
}

/* Status badges */
.status-badge[b-j17onrkz5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-pending[b-j17onrkz5z] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-approved[b-j17onrkz5z] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-rejected[b-j17onrkz5z] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-implemented[b-j17onrkz5z] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Cell content */
.cr-title-cell[b-j17onrkz5z] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cr-title[b-j17onrkz5z] {
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
}

.cr-desc[b-j17onrkz5z] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.approvals[b-j17onrkz5z] {
    font-weight: 500;
    color: var(--tm-text-secondary, #64748b);
}

.approvals.approvals-met[b-j17onrkz5z] {
    color: #22c55e;
}

.date[b-j17onrkz5z] {
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.8125rem;
}

/* Pagination */
.pagination[b-j17onrkz5z] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.page-info[b-j17onrkz5z] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

@media (max-width: 768px) {
    .page-container[b-j17onrkz5z] {
        padding: 1rem;
    }
    
    .tab-nav[b-j17onrkz5z] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-item[b-j17onrkz5z] {
        padding: 0.625rem 1rem;
        white-space: nowrap;
    }
    
    .filter-bar[b-j17onrkz5z] {
        max-width: 100%;
    }
    
    .cr-table th[b-j17onrkz5z],
    .cr-table td[b-j17onrkz5z] {
        padding: 0.625rem 0.75rem;
    }
    
    .cr-desc[b-j17onrkz5z] {
        max-width: 150px;
    }
}
/* /Pages/ExportPage.razor.rz.scp.css */
/* ExportPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

[b-nt6722jxwa] .export-page {
    max-width: 1000px;
    background-color: var(--tm-bg-surface, #ffffff);
}

[b-nt6722jxwa] .export-page .page-description {
    color: var(--tm-text-secondary, #64748b);
    margin-top: var(--tm-space-2, 0.5rem);
}

[b-nt6722jxwa] .page-header h1 {
    color: var(--tm-text-primary, #0f172a);
}

[b-nt6722jxwa] .export-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tm-space-6, 1.5rem);
    margin-bottom: var(--tm-space-6, 1.5rem);
}

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

[b-nt6722jxwa] .export-section,
[b-nt6722jxwa] .export-history-section {
    height: fit-content;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
}

[b-nt6722jxwa] .export-section .form-fields,
[b-nt6722jxwa] .export-history-section .form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-5, 1.25rem);
    margin-bottom: var(--tm-space-6, 1.5rem);
}

[b-nt6722jxwa] .export-section .form-actions,
[b-nt6722jxwa] .export-history-section .form-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--tm-space-6, 1.5rem);
    padding-top: var(--tm-space-6, 1.5rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-nt6722jxwa] .section-description {
    color: var(--tm-text-secondary, #64748b);
    font-size: var(--tm-font-size-sm, 0.875rem);
    margin-bottom: var(--tm-space-4, 1rem);
}

[b-nt6722jxwa] .date-range-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tm-space-4, 1rem);
}

[b-nt6722jxwa] .radio-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-space-4, 1rem);
}

[b-nt6722jxwa] .import-section {
    margin-top: var(--tm-space-6, 1.5rem);
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
}

[b-nt6722jxwa] .import-upload {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

[b-nt6722jxwa] .import-preview {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: var(--tm-radius-md, 0.375rem);
    padding: var(--tm-space-6, 1.5rem);
    margin-top: var(--tm-space-6, 1.5rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-nt6722jxwa] .import-preview h4 {
    font-size: var(--tm-font-size-md, 1rem);
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 var(--tm-space-4, 1rem) 0;
}

[b-nt6722jxwa] .preview-card {
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-radius-md, 0.375rem);
    padding: var(--tm-space-4, 1rem);
    margin-bottom: var(--tm-space-4, 1rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-nt6722jxwa] .preview-row {
    display: flex;
    justify-content: space-between;
    padding: var(--tm-space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-nt6722jxwa] .preview-row:last-child {
    border-bottom: none;
}

[b-nt6722jxwa] .preview-label {
    font-weight: 500;
    color: var(--tm-text-secondary, #64748b);
}

[b-nt6722jxwa] .preview-value {
    color: var(--tm-text-primary, #0f172a);
    font-weight: 500;
}

[b-nt6722jxwa] .preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-space-2, 0.5rem);
    margin-top: var(--tm-space-3, 0.75rem);
    padding-top: var(--tm-space-3, 0.75rem);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-nt6722jxwa] .preview-actions {
    display: flex;
    gap: var(--tm-space-3, 0.75rem);
    margin-top: var(--tm-space-4, 1rem);
}

[b-nt6722jxwa] .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tm-space-10, 2.5rem);
    color: var(--tm-text-secondary, #64748b);
    gap: var(--tm-space-4, 1rem);
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-radius-lg, 0.5rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-nt6722jxwa] .date-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--tm-font-size-sm, 0.875rem);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-nt6722jxwa] .date-input:focus {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[b-nt6722jxwa] .date-input::-webkit-calendar-picker-indicator {
    filter: var(--tm-calendar-icon-filter, none);
    cursor: pointer;
}

[b-nt6722jxwa] .checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2, 0.5rem);
}

[b-nt6722jxwa] .checkbox-wrapper input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--tm-color-primary, #3b82f6);
}

[b-nt6722jxwa] .checkbox-wrapper label {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-primary, #0f172a);
    cursor: pointer;
}

/* Form Labels */
[b-nt6722jxwa] .tm-form-field label {
    color: var(--tm-text-primary, #0f172a);
    font-weight: 500;
}

/* Select styling */
[b-nt6722jxwa] .tm-select {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

[b-nt6722jxwa] .tm-select:focus {
    border-color: var(--tm-color-primary, #3b82f6);
}
/* /Pages/Gamification/GamificationPage.razor.rz.scp.css */
/* GamificationPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-o9thcvzdub] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

/* Loading State */
.gamification-loading[b-o9thcvzdub] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stats-loading[b-o9thcvzdub] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .stats-loading[b-o9thcvzdub] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Hero Section */
.gamification-hero[b-o9thcvzdub] {
    margin-bottom: 1.5rem;
}

.hero-content[b-o9thcvzdub] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem;
}

.hero-avatar[b-o9thcvzdub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hero-info[b-o9thcvzdub] {
    flex: 1;
}

.hero-info h1[b-o9thcvzdub] {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

.hero-actions[b-o9thcvzdub] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* XP Section */
.xp-section[b-o9thcvzdub] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.xp-text[b-o9thcvzdub] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

.next-level-text[b-o9thcvzdub] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    text-align: right;
}

/* Stats Grid */
.gamification-stats[b-o9thcvzdub] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .gamification-stats[b-o9thcvzdub] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Streak Section */
.gamification-streak[b-o9thcvzdub] {
    margin-bottom: 1.5rem;
}

.section-title[b-o9thcvzdub] {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.streak-details[b-o9thcvzdub] {
    display: flex;
    gap: 2rem;
}

.streak-item[b-o9thcvzdub] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.streak-value[b-o9thcvzdub] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

/* Sections */
.gamification-section[b-o9thcvzdub] {
    margin-bottom: 2rem;
}

.gamification-section .section-title[b-o9thcvzdub] {
    margin-bottom: 1rem;
}

/* Badges Grid */
.badges-grid[b-o9thcvzdub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.badge-card[b-o9thcvzdub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.75rem;
}

.badge-card.earned[b-o9thcvzdub] {
    opacity: 1;
}

.badge-card.locked[b-o9thcvzdub] {
    opacity: 0.6;
}

.badge-card.locked .badge-icon[b-o9thcvzdub] {
    filter: grayscale(100%);
}

.badge-icon[b-o9thcvzdub] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tm-radius-lg, 0.5rem);
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6), var(--tm-color-secondary, #8b5cf6));
    color: white;
}

.badge-name[b-o9thcvzdub] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.badge-description[b-o9thcvzdub] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
    line-height: 1.4;
}

.badge-earned[b-o9thcvzdub] {
    font-size: 0.6875rem;
    color: #22c55e;
    font-weight: 600;
}

.badge-locked[b-o9thcvzdub] {
    font-size: 0.6875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Level Badges */
[b-o9thcvzdub] .claim-daily-btn {
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6), var(--tm-color-secondary, #8b5cf6));
    border: none;
}

[b-o9thcvzdub] .view-leaderboard-btn {
    color: var(--tm-text-secondary, #64748b);
}

[b-o9thcvzdub] .view-leaderboard-btn:hover {
    color: var(--tm-text-primary, #0f172a);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}
/* /Pages/Gamification/LeaderboardPage.razor.rz.scp.css */
/* LeaderboardPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-grua907d6x] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-grua907d6x] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-grua907d6x] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

/* Your Position Card */
.your-position-card[b-grua907d6x] {
    margin-bottom: 1.5rem;
    max-width: 200px;
}

/* Loading State */
.loading-state[b-grua907d6x] {
    padding: 2rem;
}

/* Period Filter */
.period-filter[b-grua907d6x] {
    margin-bottom: 1.5rem;
    max-width: 200px;
}

/* Leaderboard Top 3 - Podium */
.leaderboard-top3[b-grua907d6x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

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

.podium-card[b-grua907d6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.75rem;
    position: relative;
}

.podium-card.rank-1[b-grua907d6x] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--tm-radius-lg, 0.5rem);
}

.podium-card.rank-2[b-grua907d6x] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.05));
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--tm-radius-lg, 0.5rem);
}

.podium-card.rank-3[b-grua907d6x] {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.1), rgba(180, 83, 9, 0.05));
    border: 2px solid rgba(180, 83, 9, 0.3);
    border-radius: var(--tm-radius-lg, 0.5rem);
}

.podium-card.current-user[b-grua907d6x] {
    box-shadow: 0 0 0 3px var(--tm-color-primary, #3b82f6);
}

.podium-card h3[b-grua907d6x] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.podium-card .score[b-grua907d6x] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tm-color-primary, #3b82f6);
}

/* Rank Badges */
[b-grua907d6x] .rank-badge {
    font-weight: 700;
}

/* Leaderboard Table */
.leaderboard-table[b-grua907d6x] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    overflow: hidden;
    background-color: var(--tm-bg-surface, #ffffff);
}

.leaderboard-table thead th[b-grua907d6x] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.leaderboard-table thead th:first-child[b-grua907d6x] {
    text-align: center;
    width: 80px;
}

.leaderboard-table tbody td[b-grua907d6x] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.leaderboard-table tbody td:first-child[b-grua907d6x] {
    text-align: center;
    font-weight: 700;
    color: var(--tm-text-secondary, #64748b);
}

.leaderboard-table tbody tr:last-child td[b-grua907d6x] {
    border-bottom: none;
}

.leaderboard-table tbody tr:hover[b-grua907d6x] {
    background: var(--tm-bg-surface-secondary, #f1f5f9);
}

.leaderboard-table tbody tr.current-user[b-grua907d6x] {
    background: rgba(59, 130, 246, 0.05);
}

.leaderboard-table tbody tr.current-user td[b-grua907d6x] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
}

/* User Cell */
.user-cell[b-grua907d6x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-cell span[b-grua907d6x] {
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
}

/* Current User Row Highlighting */
.current-user[b-grua907d6x] {
    background-color: rgba(59, 130, 246, 0.05);
}

.current-user .user-cell span[b-grua907d6x] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 600;
}
/* /Pages/History/HistoryPage.razor.rz.scp.css */
/* HistoryPage.razor.css - Dark Mode Support */

.page-header[b-qq0lncvyhv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-qq0lncvyhv] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.header-actions[b-qq0lncvyhv] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.search-input[b-qq0lncvyhv] {
    min-width: 300px;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.search-input[b-qq0lncvyhv]::placeholder {
    color: var(--tm-text-muted, #94a3b8);
}

.loading-state[b-qq0lncvyhv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface, #ffffff);
}

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

.history-card[b-qq0lncvyhv] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.history-card:hover[b-qq0lncvyhv] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: var(--tm-color-primary, #3b82f6);
}

.history-card.selected[b-qq0lncvyhv] {
    border-color: var(--tm-color-primary, #3b82f6);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.history-card-header[b-qq0lncvyhv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.history-meta[b-qq0lncvyhv] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.history-date[b-qq0lncvyhv] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

.history-preview[b-qq0lncvyhv] {
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.75rem;
}

.history-preview p[b-qq0lncvyhv] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.history-note[b-qq0lncvyhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.history-actions[b-qq0lncvyhv] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Tags */
.history-tags[b-qq0lncvyhv] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.history-tag[b-qq0lncvyhv] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tm-text-secondary, #64748b);
}

/* Pagination */
.pagination[b-qq0lncvyhv] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem;
}

.page-info[b-qq0lncvyhv] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-qq0lncvyhv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px dashed var(--tm-border-color, #e2e8f0);
}

.empty-state-icon[b-qq0lncvyhv] {
    font-size: 3rem;
    color: var(--tm-text-muted, #94a3b8);
    margin-bottom: 1rem;
}

.empty-state-title[b-qq0lncvyhv] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

.empty-state-text[b-qq0lncvyhv] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Filters bar */
.filters-bar[b-qq0lncvyhv] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.filter-group[b-qq0lncvyhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label[b-qq0lncvyhv] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tm-text-secondary, #64748b);
}

@media (max-width: 768px) {
    .page-header[b-qq0lncvyhv] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-actions[b-qq0lncvyhv] {
        flex-direction: column;
    }
    
    .search-input[b-qq0lncvyhv] {
        min-width: auto;
        width: 100%;
    }
    
    .history-card-header[b-qq0lncvyhv] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filters-bar[b-qq0lncvyhv] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-qq0lncvyhv] {
        width: 100%;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ========================================
   DASHBOARD - Scoped CSS
   Uses Tempo.Blazor Design Tokens
   ======================================== */

.dashboard[b-tfoaqblpat] {
    min-height: 100%;
}

/* Welcome Section */
.welcome-section[b-tfoaqblpat] {
    margin-bottom: var(--tm-space-6, 1.5rem);
}

.welcome-section h1[b-tfoaqblpat] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 var(--tm-space-2, 0.5rem) 0;
}

.daily-tip[b-tfoaqblpat] {
    font-size: 0.9375rem;
    color: var(--tm-text-secondary, #475569);
    margin: 0;
}

/* Widget Overrides using Tempo.Blazor tokens */
[b-tfoaqblpat] .tm-dashboard-widget {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-tfoaqblpat] .tm-dashboard-widget-header {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-bottom-color: var(--tm-border-color, #e2e8f0);
}

[b-tfoaqblpat] .tm-dashboard-widget-title {
    color: var(--tm-text-primary, #0f172a);
}

[b-tfoaqblpat] .tm-dashboard-widget-content {
    background-color: var(--tm-bg-surface, #ffffff);
}

/* Stats Widget */
[b-tfoaqblpat] .stats-widget .stat-value {
    color: var(--tm-text-primary, #0f172a);
}

[b-tfoaqblpat] .stats-widget .stat-label {
    color: var(--tm-text-secondary, #475569);
}

/* Quick Actions Widget */
[b-tfoaqblpat] .quick-actions-widget .action-btn {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

[b-tfoaqblpat] .quick-actions-widget .action-btn:hover {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-color-primary, #3b82f6);
}

/* Recent Apps Widget */
[b-tfoaqblpat] .recent-apps-widget .app-item {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-tfoaqblpat] .recent-apps-widget .app-item:hover {
    background-color: var(--tm-bg-surface, #ffffff);
}

[b-tfoaqblpat] .recent-apps-widget .app-name {
    color: var(--tm-text-primary, #0f172a);
}

[b-tfoaqblpat] .recent-apps-widget .app-meta {
    color: var(--tm-text-secondary, #475569);
}

/* Daily Tip Widget */
[b-tfoaqblpat] .daily-tip-widget {
    background: linear-gradient(135deg, var(--tm-bg-surface-secondary, #f8fafc) 0%, var(--tm-bg-surface, #ffffff) 100%);
}

[b-tfoaqblpat] .daily-tip-widget .tip-text {
    color: var(--tm-text-secondary, #475569);
}

/* Empty State */
[b-tfoaqblpat] .empty-state {
    color: var(--tm-text-secondary, #475569);
}

[b-tfoaqblpat] .empty-state-icon {
    color: var(--tm-text-muted, #94a3b8);
}

/* Activity Chart */
[b-tfoaqblpat] .activity-chart .chart-bar {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

[b-tfoaqblpat] .activity-chart .chart-bar-fill {
    background: linear-gradient(180deg, var(--tm-color-primary, #3b82f6) 0%, var(--tm-color-primary-dark, #2563eb) 100%);
}

[b-tfoaqblpat] .activity-chart .chart-label {
    color: var(--tm-text-secondary, #475569);
}

/* Favorite History */
[b-tfoaqblpat] .favorite-history-widget .history-item {
    border-bottom-color: var(--tm-border-color, #e2e8f0);
}

[b-tfoaqblpat] .favorite-history-widget .history-text {
    color: var(--tm-text-primary, #0f172a);
}

[b-tfoaqblpat] .favorite-history-widget .history-time {
    color: var(--tm-text-secondary, #475569);
}

/* Widget Grid */
[b-tfoaqblpat] .tm-dashboard {
    background-color: transparent;
}

[b-tfoaqblpat] .tm-dashboard-grid {
    background-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-section h1[b-tfoaqblpat] {
        font-size: 1.5rem;
    }
    
    .daily-tip[b-tfoaqblpat] {
        font-size: 0.875rem;
    }
}
/* /Pages/Invitations/InvitationsPage.razor.rz.scp.css */
/* InvitationsPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-cq17fe7f5c] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-cq17fe7f5c] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-cq17fe7f5c] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

/* Loading State */
.loading-state[b-cq17fe7f5c] {
    padding: 2rem;
}

/* Invitations List */
.invitations-list[b-cq17fe7f5c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Invitation Card */
.invitation-card[b-cq17fe7f5c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem;
    gap: 1rem;
}

.invitation-info[b-cq17fe7f5c] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.invitation-details[b-cq17fe7f5c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invitation-details h3[b-cq17fe7f5c] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.invitation-meta[b-cq17fe7f5c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--tm-text-secondary, #64748b);
}

.invitation-meta span[b-cq17fe7f5c] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.invitation-message[b-cq17fe7f5c] {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-md, 0.375rem);
    font-size: 0.8125rem;
    color: var(--tm-text-secondary, #64748b);
    font-style: italic;
    border-left: 3px solid var(--tm-color-primary, #3b82f6);
}

/* Invitation Actions */
.invitation-actions[b-cq17fe7f5c] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

[b-cq17fe7f5c] .accept-btn {
    background-color: var(--tm-color-success, #22c55e);
    border-color: var(--tm-color-success, #22c55e);
}

[b-cq17fe7f5c] .accept-btn:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}

[b-cq17fe7f5c] .decline-btn,
[b-cq17fe7f5c] .revoke-btn {
    background-color: var(--tm-color-danger, #ef4444);
    border-color: var(--tm-color-danger, #ef4444);
}

[b-cq17fe7f5c] .decline-btn:hover,
[b-cq17fe7f5c] .revoke-btn:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* Status Badges - variants are handled by TmBadge component */

/* Empty State */
[b-cq17fe7f5c] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: 3rem;
}

/* Tabs Customization */
[b-cq17fe7f5c] .tm-tabs {
    background-color: transparent;
}

[b-cq17fe7f5c] .tm-tabs .tab-header {
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-cq17fe7f5c] .tm-tabs .tab-button {
    color: var(--tm-text-secondary, #64748b);
}

[b-cq17fe7f5c] .tm-tabs .tab-button.active {
    color: var(--tm-color-primary, #3b82f6);
    border-bottom-color: var(--tm-color-primary, #3b82f6);
}

[b-cq17fe7f5c] .tm-tabs .tab-button:hover {
    color: var(--tm-text-primary, #0f172a);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

@media (max-width: 640px) {
    .invitation-card[b-cq17fe7f5c] {
        flex-direction: column;
    }
    
    .invitation-actions[b-cq17fe7f5c] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .invitation-meta[b-cq17fe7f5c] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Pages/Landing/Components/CTASection.razor.rz.scp.css */
.cta-section[b-ibxrf1bp0f] {
    padding: 6rem var(--tm-space-8);
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #764ba2 100%);
    color: #fff;
}

.cta-container[b-ibxrf1bp0f] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.cta-title[b-ibxrf1bp0f] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--tm-space-4);
}

.cta-subtitle[b-ibxrf1bp0f] {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: var(--tm-space-8);
}
/* /Pages/Landing/Components/FAQSection.razor.rz.scp.css */
.faq-section[b-o968ry4aaf] {
    padding: 6rem var(--tm-space-8);
    background: var(--tm-bg-surface, #ffffff);
}

.faq-container[b-o968ry4aaf] {
    max-width: 800px;
    margin: 0 auto;
}

.faq-title[b-o968ry4aaf] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--tm-space-10);
    color: var(--tm-text-primary, #0f172a);
}

.faq-list[b-o968ry4aaf] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-4);
}

.faq-item[b-o968ry4aaf] {
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.faq-item:hover[b-o968ry4aaf] {
    box-shadow: var(--tm-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.faq-question[b-o968ry4aaf] {
    width: 100%;
    padding: var(--tm-space-5);
    background: var(--tm-bg-surface, #ffffff);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    color: var(--tm-text-primary, #0f172a);
    font-size: var(--tm-font-size-md, 1rem);
    transition: background 0.15s;
}

.faq-question:hover[b-o968ry4aaf] {
    background: var(--tm-bg-surface-secondary, #f8fafc);
}

.faq-answer[b-o968ry4aaf] {
    padding: 0 var(--tm-space-5) var(--tm-space-5);
    color: var(--tm-text-secondary, #475569);
    line-height: 1.6;
}
/* /Pages/Landing/Components/FeaturesGrid.razor.rz.scp.css */
.features-section[b-xb4unoaupi] {
    padding: 6rem var(--tm-space-8);
    background: var(--tm-bg-surface-secondary, #f8fafc);
}

.features-container[b-xb4unoaupi] {
    max-width: 1200px;
    margin: 0 auto;
}

.features-title[b-xb4unoaupi] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--tm-space-10);
    color: var(--tm-text-primary, #0f172a);
}

.features-grid[b-xb4unoaupi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--tm-space-8);
}

/* TmCard child component — ::deep needed to reach its rendered root */
[b-xb4unoaupi] .feature-card {
    text-align: center;
    padding: var(--tm-space-8);
}

.feature-icon[b-xb4unoaupi] {
    margin-bottom: var(--tm-space-4);
}

[b-xb4unoaupi] .feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--tm-space-2);
    color: var(--tm-text-primary, #0f172a);
}

[b-xb4unoaupi] .feature-card p {
    color: var(--tm-text-secondary, #475569);
    line-height: 1.6;
}
/* /Pages/Landing/Components/HeroSection.razor.rz.scp.css */
.hero-section[b-c4wcq94qb8] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #764ba2 100%);
    color: #fff;
    padding: 6rem var(--tm-space-8) var(--tm-space-10);
    position: relative;
}

.hero-container[b-c4wcq94qb8] {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tm-space-10);
    align-items: center;
}

.hero-title[b-c4wcq94qb8] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--tm-space-6);
}

.hero-subtitle[b-c4wcq94qb8] {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: var(--tm-space-8);
    line-height: 1.6;
}

.hero-buttons[b-c4wcq94qb8] {
    display: flex;
    gap: var(--tm-space-4);
    flex-wrap: wrap;
}

.hero-mockup[b-c4wcq94qb8] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--tm-radius-md, 0.375rem);
    padding: var(--tm-space-6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-mockup-header[b-c4wcq94qb8] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2);
    margin-bottom: var(--tm-space-4);
    font-weight: 500;
}

.hero-mockup-label[b-c4wcq94qb8] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    opacity: 0.8;
    font-weight: 500;
}

.hero-mockup-content[b-c4wcq94qb8] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-4);
}

.hero-mockup-variables[b-c4wcq94qb8] {
    display: flex;
    gap: var(--tm-space-2);
}

.hero-mockup-variable[b-c4wcq94qb8] {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--tm-space-1) var(--tm-space-3);
    border-radius: var(--tm-radius-sm, 0.25rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

.hero-scroll-indicator[b-c4wcq94qb8] {
    position: absolute;
    bottom: var(--tm-space-8);
    animation: bounce-b-c4wcq94qb8 2s infinite;
    opacity: 0.7;
}

@keyframes bounce-b-c4wcq94qb8 {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@media (max-width: 768px) {
    .hero-container[b-c4wcq94qb8] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-title[b-c4wcq94qb8] {
        font-size: 2.5rem;
    }

    .hero-buttons[b-c4wcq94qb8] {
        justify-content: center;
    }
}
/* /Pages/Landing/Components/HowItWorks.razor.rz.scp.css */
.how-it-works-section[b-xwhbunq9tf] {
    padding: 6rem var(--tm-space-8);
    background: var(--tm-bg-surface, #ffffff);
}

.how-it-works-container[b-xwhbunq9tf] {
    max-width: 1000px;
    margin: 0 auto;
}

.how-it-works-title[b-xwhbunq9tf] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--tm-space-10);
    color: var(--tm-text-primary, #0f172a);
}

.how-it-works-steps[b-xwhbunq9tf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tm-space-8);
}

.how-it-works-step[b-xwhbunq9tf] {
    text-align: center;
    flex: 1;
    max-width: 250px;
}

.step-number[b-xwhbunq9tf] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--tm-color-primary, #3b82f6) 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 auto var(--tm-space-4);
}

.step-icon[b-xwhbunq9tf] {
    margin-bottom: var(--tm-space-4);
}

.how-it-works-step h3[b-xwhbunq9tf] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--tm-space-2);
    color: var(--tm-text-primary, #0f172a);
}

.how-it-works-step p[b-xwhbunq9tf] {
    color: var(--tm-text-secondary, #475569);
    line-height: 1.6;
}

.step-connector[b-xwhbunq9tf] {
    color: var(--tm-border-color, #e2e8f0);
}

@media (max-width: 768px) {
    .how-it-works-steps[b-xwhbunq9tf] {
        flex-direction: column;
    }

    .step-connector[b-xwhbunq9tf] {
        transform: rotate(90deg);
    }
}
/* /Pages/Landing/Components/LandingFooter.razor.rz.scp.css */
.landing-footer[b-9vn6jo2skg] {
    background: #0f172a;
    color: #fff;
    padding: var(--tm-space-10) var(--tm-space-8) var(--tm-space-8);
}

.landing-footer-container[b-9vn6jo2skg] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--tm-space-10);
    margin-bottom: var(--tm-space-10);
}

.landing-footer-logo[b-9vn6jo2skg] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--tm-space-4);
}

.landing-footer-tagline[b-9vn6jo2skg] {
    color: var(--tm-text-secondary, #94a3b8);
}

.footer-links-column h4[b-9vn6jo2skg] {
    font-weight: 600;
    margin-bottom: var(--tm-space-4);
}

.footer-links-column a[b-9vn6jo2skg] {
    display: block;
    color: var(--tm-text-secondary, #94a3b8);
    text-decoration: none;
    padding: var(--tm-space-1) 0;
    transition: color 0.2s;
}

.footer-links-column a:hover[b-9vn6jo2skg] {
    color: #fff;
}

.landing-footer-social[b-9vn6jo2skg] {
    display: flex;
    gap: var(--tm-space-4);
}

.social-link[b-9vn6jo2skg] {
    color: var(--tm-text-secondary, #94a3b8);
    transition: color 0.2s;
}

.social-link:hover[b-9vn6jo2skg] {
    color: #fff;
}

.landing-footer-bottom[b-9vn6jo2skg] {
    text-align: center;
    padding-top: var(--tm-space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--tm-text-secondary, #94a3b8);
}

@media (max-width: 768px) {
    .landing-footer-container[b-9vn6jo2skg] {
        grid-template-columns: 1fr;
        gap: var(--tm-space-8);
    }
}
/* /Pages/Landing/Components/LandingNavigation.razor.rz.scp.css */
.landing-nav[b-jdk5x5z258] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--tm-bg-surface, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.landing-nav-container[b-jdk5x5z258] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--tm-space-4) var(--tm-space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-logo[b-jdk5x5z258] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    text-decoration: none;
}

.landing-nav-links[b-jdk5x5z258] {
    display: flex;
    gap: var(--tm-space-8);
}

.landing-nav-link[b-jdk5x5z258] {
    color: var(--tm-text-secondary, #475569);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.landing-nav-link:hover[b-jdk5x5z258] {
    color: var(--tm-color-primary, #3b82f6);
}

.landing-nav-actions[b-jdk5x5z258] {
    display: flex;
    gap: var(--tm-space-3);
}

.landing-nav-mobile-toggle[b-jdk5x5z258] {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tm-text-primary, #0f172a);
}

.landing-nav-mobile-menu[b-jdk5x5z258] {
    display: flex;
    flex-direction: column;
    padding: var(--tm-space-4) var(--tm-space-8);
    gap: var(--tm-space-2);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
    background: var(--tm-bg-surface, #ffffff);
}

.landing-nav-mobile-link[b-jdk5x5z258] {
    color: var(--tm-text-secondary, #475569);
    text-decoration: none;
    font-weight: 500;
    padding: var(--tm-space-2) 0;
}

@media (max-width: 768px) {
    .landing-nav-links[b-jdk5x5z258],
    .landing-nav-actions[b-jdk5x5z258] {
        display: none;
    }

    .landing-nav-mobile-toggle[b-jdk5x5z258] {
        display: block;
    }
}
/* /Pages/Landing/Components/PricingSection.razor.rz.scp.css */
.pricing-section[b-8q1fi3u0d0] {
    padding: 6rem var(--tm-space-8);
    background: var(--tm-bg-surface-secondary, #f8fafc);
}

.pricing-container[b-8q1fi3u0d0] {
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-title[b-8q1fi3u0d0] {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--tm-space-10);
    color: var(--tm-text-primary, #0f172a);
}

.pricing-grid[b-8q1fi3u0d0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--tm-space-8);
    max-width: 800px;
    margin: 0 auto;
}

/* TmCard child component — ::deep needed to reach its rendered root */
[b-8q1fi3u0d0] .pricing-card {
    position: relative;
    padding: var(--tm-space-8);
}

[b-8q1fi3u0d0] .pricing-card-featured {
    border: 2px solid var(--tm-color-primary, #3b82f6);
    transform: scale(1.05);
}

.pricing-badge[b-8q1fi3u0d0] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.pricing-card-header[b-8q1fi3u0d0] {
    text-align: center;
    margin-bottom: var(--tm-space-8);
}

.pricing-card-header h3[b-8q1fi3u0d0] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--tm-space-4);
    color: var(--tm-text-primary, #0f172a);
}

.pricing-price[b-8q1fi3u0d0] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--tm-space-1);
}

.price-value[b-8q1fi3u0d0] {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--tm-text-primary, #0f172a);
}

.price-currency[b-8q1fi3u0d0] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tm-text-secondary, #475569);
}

.price-period[b-8q1fi3u0d0] {
    color: var(--tm-text-secondary, #475569);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

.pricing-features[b-8q1fi3u0d0] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--tm-space-8) 0;
}

.pricing-features li[b-8q1fi3u0d0] {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3);
    padding: var(--tm-space-3) 0;
    color: var(--tm-text-secondary, #475569);
}
/* /Pages/Libraries/CodeLibrariesPage.razor.rz.scp.css */
/* ============================================
   Code Libraries Page - Modern Design
   Using Tempo.Blazor Design Tokens
   ============================================ */

.page-container[b-ehl7sajcka] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--tm-spacing-6, 1.5rem);
}

/* Hlavička stránky */
.page-header[b-ehl7sajcka] {
    margin-bottom: var(--tm-spacing-6, 1.5rem);
}

.page-header-content[b-ehl7sajcka] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--tm-spacing-4, 1rem);
}

.page-title[b-ehl7sajcka] {
    font-size: var(--tm-font-size-3xl, 1.875rem);
    font-weight: var(--tm-font-weight-bold, 700);
    color: var(--tm-text-primary);
    margin: 0 0 var(--tm-spacing-2, 0.5rem) 0;
    line-height: var(--tm-line-height-tight, 1.25);
}

.page-subtitle[b-ehl7sajcka] {
    font-size: var(--tm-font-size-base, 1rem);
    color: var(--tm-text-secondary);
    margin: 0;
    line-height: var(--tm-line-height-normal, 1.5);
}

/* Statistiky */
.stats-row[b-ehl7sajcka] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tm-spacing-4, 1rem);
    margin-bottom: var(--tm-spacing-6, 1.5rem);
}

[b-ehl7sajcka] .stats-row .tm-stat-card {
    background: var(--tm-bg-surface);
    border: 1px solid var(--tm-border-color);
    border-radius: var(--tm-radius-lg, 0.75rem);
    padding: var(--tm-spacing-4, 1rem);
    transition: all 0.2s ease;
}

[b-ehl7sajcka] .stats-row .tm-stat-card:hover {
    border-color: var(--tm-color-primary);
    box-shadow: var(--tm-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* Filtry karta */
[b-ehl7sajcka] .filters-card {
    margin-bottom: var(--tm-spacing-6, 1.5rem);
    background: var(--tm-bg-surface);
    border: 1px solid var(--tm-border-color);
}

[b-ehl7sajcka] .filters-card .tm-card-content {
    padding: var(--tm-spacing-4, 1rem);
}

.filters-toolbar[b-ehl7sajcka] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-spacing-4, 1rem);
    align-items: flex-end;
}

.filters-search[b-ehl7sajcka] {
    flex: 1;
    min-width: 280px;
}

[b-ehl7sajcka] .search-input {
    width: 100%;
}

[b-ehl7sajcka] .search-input .tm-input-container {
    background: var(--tm-bg-surface-secondary);
    border-color: var(--tm-border-color);
    border-radius: var(--tm-radius-md, 0.5rem);
}

[b-ehl7sajcka] .search-input .tm-input-container:focus-within {
    border-color: var(--tm-color-primary);
    box-shadow: 0 0 0 3px var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1));
}

.filters-dropdowns[b-ehl7sajcka] {
    display: flex;
    gap: var(--tm-spacing-3, 0.75rem);
    flex-wrap: wrap;
}

[b-ehl7sajcka] .filter-select {
    min-width: 160px;
}

[b-ehl7sajcka] .filter-select .tm-select-container {
    background: var(--tm-bg-surface-secondary);
    border-color: var(--tm-border-color);
}

[b-ehl7sajcka] .filter-select .tm-select-container:focus-within {
    border-color: var(--tm-color-primary);
}

/* Aktivní filtry */
.active-filters[b-ehl7sajcka] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tm-spacing-3, 0.75rem);
    margin-top: var(--tm-spacing-4, 1rem);
    padding-top: var(--tm-spacing-4, 1rem);
    border-top: 1px solid var(--tm-border-color);
}

.active-filters-label[b-ehl7sajcka] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: var(--tm-font-weight-medium, 500);
    color: var(--tm-text-secondary);
}

[b-ehl7sajcka] .active-filters .tm-chip {
    background: var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1));
    color: var(--tm-color-primary);
    border: 1px solid var(--tm-color-primary-light, rgba(59, 130, 246, 0.3));
}

/* Výsledky vyhledávání */
.search-results[b-ehl7sajcka] {
    margin-top: var(--tm-spacing-3, 0.75rem);
    padding-top: var(--tm-spacing-3, 0.75rem);
    border-top: 1px solid var(--tm-border-color);
}

.results-text[b-ehl7sajcka] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
}

/* Loading grid */
.loading-grid[b-ehl7sajcka] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--tm-spacing-4, 1rem);
}

[b-ehl7sajcka] .library-card-skeleton {
    padding: var(--tm-spacing-5, 1.25rem);
    border: 1px solid var(--tm-border-color);
}

[b-ehl7sajcka] .skeleton-badges {
    display: flex;
    gap: var(--tm-spacing-2, 0.5rem);
    margin-top: var(--tm-spacing-3, 0.75rem);
}

/* Grid knihoven */
.libraries-grid[b-ehl7sajcka] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--tm-spacing-4, 1rem);
}

/* Karta knihovny */
[b-ehl7sajcka] .library-card {
    background: var(--tm-bg-surface);
    border: 1px solid var(--tm-border-color);
    border-radius: var(--tm-radius-xl, 0.75rem);
    padding: var(--tm-spacing-5, 1.25rem);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

[b-ehl7sajcka] .library-card:hover {
    border-color: var(--tm-color-primary);
    box-shadow: var(--tm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

[b-ehl7sajcka] .library-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tm-color-primary), var(--tm-color-primary-light, #60a5fa));
    opacity: 0;
    transition: opacity 0.2s ease;
}

[b-ehl7sajcka] .library-card:hover::before {
    opacity: 1;
}

.library-card-header[b-ehl7sajcka] {
    display: flex;
    align-items: flex-start;
    gap: var(--tm-spacing-3, 0.75rem);
    margin-bottom: var(--tm-spacing-3, 0.75rem);
}

.library-icon-wrapper[b-ehl7sajcka] {
    width: 48px;
    height: 48px;
    border-radius: var(--tm-radius-lg, 0.75rem);
    background: linear-gradient(135deg, var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1)), var(--tm-color-primary-light, rgba(59, 130, 246, 0.2)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-color-primary);
    flex-shrink: 0;
}

[b-ehl7sajcka] .library-icon-wrapper .tm-icon {
    width: 24px;
    height: 24px;
}

.library-title-wrapper[b-ehl7sajcka] {
    flex: 1;
    min-width: 0;
}

.library-name[b-ehl7sajcka] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    color: var(--tm-text-primary);
    margin: 0 0 var(--tm-spacing-1, 0.25rem) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-version[b-ehl7sajcka] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    font-weight: var(--tm-font-weight-medium, 500);
    color: var(--tm-text-tertiary);
    font-family: var(--tm-font-mono, monospace);
}

.library-description[b-ehl7sajcka] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    line-height: var(--tm-line-height-normal, 1.5);
    margin: 0 0 var(--tm-spacing-3, 0.75rem) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5rem;
}

.library-description-empty[b-ehl7sajcka] {
    color: var(--tm-text-tertiary);
    font-style: italic;
}

.library-badges[b-ehl7sajcka] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tm-spacing-2, 0.5rem);
    margin-bottom: var(--tm-spacing-4, 1rem);
}

[b-ehl7sajcka] .library-badges .tm-badge {
    font-weight: var(--tm-font-weight-medium, 500);
}

.library-footer[b-ehl7sajcka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--tm-spacing-3, 0.75rem);
    border-top: 1px solid var(--tm-border-color);
    margin-top: auto;
}

.library-stats[b-ehl7sajcka] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-3, 0.75rem);
}

.library-stat[b-ehl7sajcka] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-1, 0.25rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
}

[b-ehl7sajcka] .library-stat .tm-icon {
    color: var(--tm-text-tertiary);
}

[b-ehl7sajcka] .library-card .tm-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

[b-ehl7sajcka] .library-card:hover .tm-btn {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-ehl7sajcka] {
        padding: var(--tm-spacing-4, 1rem);
    }

    .page-header-content[b-ehl7sajcka] {
        flex-direction: column;
        gap: var(--tm-spacing-4, 1rem);
    }

    .page-title[b-ehl7sajcka] {
        font-size: var(--tm-font-size-2xl, 1.5rem);
    }

    .stats-row[b-ehl7sajcka] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-toolbar[b-ehl7sajcka] {
        flex-direction: column;
    }

    .filters-search[b-ehl7sajcka] {
        min-width: 100%;
    }

    .filters-dropdowns[b-ehl7sajcka] {
        width: 100%;
    }

    [b-ehl7sajcka] .filter-select {
        flex: 1;
        min-width: 140px;
    }

    .libraries-grid[b-ehl7sajcka] {
        grid-template-columns: 1fr;
    }

    [b-ehl7sajcka] .library-card .tm-btn {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .stats-row[b-ehl7sajcka] {
        grid-template-columns: 1fr;
    }

    .filters-dropdowns[b-ehl7sajcka] {
        flex-direction: column;
    }

    [b-ehl7sajcka] .filter-select {
        width: 100%;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    [b-ehl7sajcka] .library-card:hover {
        box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.4);
    }

    [b-ehl7sajcka] .library-icon-wrapper {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3));
    }
}

/* ============================================
   CSS Variables fallback for Tempo.Blazor
   ============================================ */

:host[b-ehl7sajcka] {
    --tm-spacing-1: 0.25rem;
    --tm-spacing-2: 0.5rem;
    --tm-spacing-3: 0.75rem;
    --tm-spacing-4: 1rem;
    --tm-spacing-5: 1.25rem;
    --tm-spacing-6: 1.5rem;

    --tm-radius-md: 0.5rem;
    --tm-radius-lg: 0.75rem;
    --tm-radius-xl: 0.75rem;

    --tm-font-size-xs: 0.75rem;
    --tm-font-size-sm: 0.875rem;
    --tm-font-size-base: 1rem;
    --tm-font-size-lg: 1.125rem;
    --tm-font-size-2xl: 1.5rem;
    --tm-font-size-3xl: 1.875rem;

    --tm-font-weight-medium: 500;
    --tm-font-weight-semibold: 600;
    --tm-font-weight-bold: 700;

    --tm-line-height-tight: 1.25;
    --tm-line-height-normal: 1.5;

    --tm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --tm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* /Pages/Libraries/CreateEditLibraryPage.razor.rz.scp.css */
/* ============================================
   Create/Edit Library Page - Modern Design
   ============================================ */

.page-container[b-4frblgdqe0] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--tm-spacing-6, 1.5rem);
}

/* Hlavička stránky */
.page-header[b-4frblgdqe0] {
    margin-bottom: var(--tm-spacing-6, 1.5rem);
}

.page-header-content[b-4frblgdqe0] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-4, 1rem);
}

.page-header-icon[b-4frblgdqe0] {
    width: 64px;
    height: 64px;
    border-radius: var(--tm-radius-xl, 0.75rem);
    background: linear-gradient(135deg, var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1)), var(--tm-color-primary-light, rgba(59, 130, 246, 0.2)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-color-primary);
    flex-shrink: 0;
}

[b-4frblgdqe0] .page-header-icon .tm-icon {
    width: 32px;
    height: 32px;
}

.page-header-text[b-4frblgdqe0] {
    flex: 1;
}

.page-title[b-4frblgdqe0] {
    font-size: var(--tm-font-size-3xl, 1.875rem);
    font-weight: var(--tm-font-weight-bold, 700);
    color: var(--tm-text-primary);
    margin: 0 0 var(--tm-spacing-2, 0.5rem) 0;
    line-height: var(--tm-line-height-tight, 1.25);
}

.page-subtitle[b-4frblgdqe0] {
    font-size: var(--tm-font-size-base, 1rem);
    color: var(--tm-text-secondary);
    margin: 0;
    line-height: var(--tm-line-height-normal, 1.5);
}

/* Formulář */
.library-form[b-4frblgdqe0] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-6, 1.5rem);
}

/* Sekce formuláře */
[b-4frblgdqe0] .form-section-card {
    background: var(--tm-bg-surface);
    border: 1px solid var(--tm-border-color);
    border-radius: var(--tm-radius-xl, 0.75rem);
    overflow: hidden;
    transition: all 0.2s ease;
}

[b-4frblgdqe0] .form-section-card:hover {
    border-color: var(--tm-border-color-hover, var(--tm-color-primary-light));
}

[b-4frblgdqe0] .form-section-card.section-expanded {
    border-color: var(--tm-color-primary-light, rgba(59, 130, 246, 0.3));
    box-shadow: 0 0 0 3px var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1));
}

[b-4frblgdqe0] .form-section-card .tm-card-content {
    padding: var(--tm-spacing-6, 1.5rem);
}

/* Hlavička sekce */
.section-header[b-4frblgdqe0] {
    display: flex;
    align-items: flex-start;
    gap: var(--tm-spacing-4, 1rem);
    margin-bottom: var(--tm-spacing-6, 1.5rem);
    padding-bottom: var(--tm-spacing-4, 1rem);
    border-bottom: 1px solid var(--tm-border-color);
}

.section-header-toggle[b-4frblgdqe0] {
    flex-wrap: wrap;
}

.section-header-toggle[b-4frblgdqe0]  .tm-toggle-wrapper {
    margin-left: auto;
}

.section-icon[b-4frblgdqe0] {
    width: 48px;
    height: 48px;
    border-radius: var(--tm-radius-lg, 0.75rem);
    background: linear-gradient(135deg, var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1)), var(--tm-color-primary-light, rgba(59, 130, 246, 0.2)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-color-primary);
    flex-shrink: 0;
}

.section-icon-secondary[b-4frblgdqe0] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
    color: var(--tm-color-success, #10b981);
}

.section-icon-optional[b-4frblgdqe0] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2));
    color: var(--tm-color-warning, #f59e0b);
}

[b-4frblgdqe0] .section-icon .tm-icon {
    width: 24px;
    height: 24px;
}

.section-title-wrapper[b-4frblgdqe0] {
    flex: 1;
    min-width: 0;
}

.section-title[b-4frblgdqe0] {
    font-size: var(--tm-font-size-xl, 1.25rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    color: var(--tm-text-primary);
    margin: 0 0 var(--tm-spacing-1, 0.25rem) 0;
    line-height: var(--tm-line-height-tight, 1.25);
}

.section-description[b-4frblgdqe0] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    margin: 0;
    line-height: var(--tm-line-height-normal, 1.5);
}

/* Form grid */
.form-grid[b-4frblgdqe0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tm-spacing-5, 1.25rem);
}

.form-stack[b-4frblgdqe0] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-6, 1.5rem);
}

/* Form field */
.form-field[b-4frblgdqe0] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-1, 0.25rem);
}

.form-field-full[b-4frblgdqe0] {
    grid-column: 1 / -1;
}

.field-label[b-4frblgdqe0] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: var(--tm-font-weight-medium, 500);
    color: var(--tm-text-primary);
    margin-bottom: var(--tm-spacing-1, 0.25rem);
}

.field-help-text[b-4frblgdqe0] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-secondary);
    margin: 0 0 var(--tm-spacing-2, 0.5rem) 0;
}

[b-4frblgdqe0] .field-validation {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-color-danger, #ef4444);
}

/* TextArea - zvýšená výška a lepší styly */
[b-4frblgdqe0] .form-field .tm-textarea {
    resize: vertical;
    font-family: var(--tm-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: var(--tm-font-size-sm, 0.875rem);
    line-height: 1.6;
}

[b-4frblgdqe0] .form-field .tm-textarea:focus {
    min-height: 150px;
}

/* NuGet Feed sekce */
.nuget-feed-fields[b-4frblgdqe0] {
    margin-top: var(--tm-spacing-4, 1rem);
    padding-top: var(--tm-spacing-4, 1rem);
    border-top: 1px solid var(--tm-border-color);
}

/* Akce formuláře */
.form-actions-bar[b-4frblgdqe0] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--tm-spacing-3, 0.75rem);
    padding-top: var(--tm-spacing-4, 1rem);
    border-top: 1px solid var(--tm-border-color);
    margin-top: var(--tm-spacing-2, 0.5rem);
}

/* Toggle styling */
[b-4frblgdqe0] .section-header-toggle .tm-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-3, 0.75rem);
}

[b-4frblgdqe0] .section-header-toggle .tm-toggle-label-text {
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: var(--tm-font-weight-medium, 500);
    color: var(--tm-text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .page-container[b-4frblgdqe0] {
        padding: var(--tm-spacing-4, 1rem);
    }

    .page-header-content[b-4frblgdqe0] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tm-spacing-3, 0.75rem);
    }

    .page-header-icon[b-4frblgdqe0] {
        width: 48px;
        height: 48px;
    }

    [b-4frblgdqe0] .page-header-icon .tm-icon {
        width: 24px;
        height: 24px;
    }

    .page-title[b-4frblgdqe0] {
        font-size: var(--tm-font-size-2xl, 1.5rem);
    }

    .section-header[b-4frblgdqe0] {
        flex-direction: column;
        gap: var(--tm-spacing-3, 0.75rem);
    }

    .section-header-toggle[b-4frblgdqe0] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .section-header-toggle[b-4frblgdqe0]  .tm-toggle-wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: var(--tm-spacing-2, 0.5rem);
    }

    .form-grid[b-4frblgdqe0] {
        grid-template-columns: 1fr;
    }

    .form-actions-bar[b-4frblgdqe0] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    [b-4frblgdqe0] .form-actions-bar .tm-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    [b-4frblgdqe0] .form-section-card:hover {
        border-color: var(--tm-color-primary-light, rgba(59, 130, 246, 0.4));
    }

    [b-4frblgdqe0] .form-section-card.section-expanded {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
}

/* ============================================
   CSS Variables fallback
   ============================================ */

:host[b-4frblgdqe0] {
    --tm-spacing-1: 0.25rem;
    --tm-spacing-2: 0.5rem;
    --tm-spacing-3: 0.75rem;
    --tm-spacing-4: 1rem;
    --tm-spacing-5: 1.25rem;
    --tm-spacing-6: 1.5rem;

    --tm-radius-lg: 0.75rem;
    --tm-radius-xl: 0.75rem;

    --tm-font-size-xs: 0.75rem;
    --tm-font-size-sm: 0.875rem;
    --tm-font-size-base: 1rem;
    --tm-font-size-xl: 1.25rem;
    --tm-font-size-2xl: 1.5rem;
    --tm-font-size-3xl: 1.875rem;

    --tm-font-weight-medium: 500;
    --tm-font-weight-semibold: 600;
    --tm-font-weight-bold: 700;

    --tm-line-height-tight: 1.25;
    --tm-line-height-normal: 1.5;
}
/* /Pages/Libraries/ItemDetailPage.razor.rz.scp.css */
/* Dark mode styles for ItemDetailPage */

@media (prefers-color-scheme: dark) {
    [b-zxfx1yrdqx] .page-container {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-primary);
    }

    [b-zxfx1yrdqx] .item-header {
        background-color: var(--tm-bg-surface-secondary);
        border-bottom-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .item-name {
        color: var(--tm-text-primary);
    }

    [b-zxfx1yrdqx] .item-description {
        color: var(--tm-text-secondary);
    }

    [b-zxfx1yrdqx] .item-version {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-secondary);
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .item-library {
        color: var(--tm-text-secondary);
    }

    [b-zxfx1yrdqx] .item-library a {
        color: var(--tm-color-primary);
    }

    [b-zxfx1yrdqx] .code-section {
        background-color: var(--tm-bg-surface);
    }

    [b-zxfx1yrdqx] .code-header {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .code-language {
        color: var(--tm-text-secondary);
    }

    [b-zxfx1yrdqx] .code-actions {
        border-bottom-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .code-container {
        background-color: #1e1e1e;
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .code-block {
        color: #d4d4d4;
    }

    [b-zxfx1yrdqx] .syntax-keyword {
        color: #569cd6;
    }

    [b-zxfx1yrdqx] .syntax-string {
        color: #ce9178;
    }

    [b-zxfx1yrdqx] .syntax-comment {
        color: #6a9955;
    }

    [b-zxfx1yrdqx] .syntax-function {
        color: #dcdcaa;
    }

    [b-zxfx1yrdqx] .syntax-number {
        color: #b5cea8;
    }

    [b-zxfx1yrdqx] .syntax-class {
        color: #4ec9b0;
    }

    [b-zxfx1yrdqx] .syntax-interface {
        color: #b8d7a3;
    }

    [b-zxfx1yrdqx] .syntax-enum {
        color: #b8d7a3;
    }

    [b-zxfx1yrdqx] .line-numbers {
        background-color: #1e1e1e;
        color: #858585;
        border-right-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .metadata-section {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .metadata-title {
        color: var(--tm-text-primary);
        border-bottom-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .metadata-label {
        color: var(--tm-text-secondary);
    }

    [b-zxfx1yrdqx] .metadata-value {
        color: var(--tm-text-primary);
    }

    [b-zxfx1yrdqx] .tags-container {
        background-color: var(--tm-bg-surface);
    }

    [b-zxfx1yrdqx] .tag {
        background-color: var(--tm-bg-surface-secondary);
        color: var(--tm-text-secondary);
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .usage-section {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .usage-title {
        color: var(--tm-text-primary);
    }

    [b-zxfx1yrdqx] .usage-example {
        background-color: #1e1e1e;
        border-color: var(--tm-border-color);
    }

    [b-zxfx1yrdqx] .breadcrumb {
        color: var(--tm-text-secondary);
    }

    [b-zxfx1yrdqx] .breadcrumb a {
        color: var(--tm-color-primary);
    }

    [b-zxfx1yrdqx] .breadcrumb-current {
        color: var(--tm-text-primary);
    }
}
/* /Pages/Libraries/LibraryDetailPage.razor.rz.scp.css */
/* ============================================
   Library Detail Page - Modern Design
   ============================================ */

.page-container[b-6l1pmni07i] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--tm-spacing-6, 1.5rem);
}

/* Hlavička knihovny */
.library-header[b-6l1pmni07i] {
    background: linear-gradient(135deg, var(--tm-color-primary-subtle, rgba(59, 130, 246, 0.1)), var(--tm-bg-surface));
    border-radius: var(--tm-radius-xl, 1rem);
    padding: var(--tm-spacing-6, 1.5rem);
    margin-bottom: var(--tm-spacing-6, 1.5rem);
    border: 1px solid var(--tm-border-color);
}

.library-header-content[b-6l1pmni07i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--tm-spacing-4, 1rem);
}

.library-header-main[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-4, 1rem);
}

[b-6l1pmni07i] .back-button {
    align-self: flex-start;
}

.library-title-section[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-4, 1rem);
}

.library-icon-wrapper[b-6l1pmni07i] {
    width: 64px;
    height: 64px;
    border-radius: var(--tm-radius-lg, 0.75rem);
    background: linear-gradient(135deg, var(--tm-color-primary), var(--tm-color-primary-light, #60a5fa));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

[b-6l1pmni07i] .library-icon-wrapper .tm-icon {
    width: 32px;
    height: 32px;
}

.library-title-info[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-2, 0.5rem);
}

.library-name[b-6l1pmni07i] {
    font-size: var(--tm-font-size-3xl, 1.875rem);
    font-weight: var(--tm-font-weight-bold, 700);
    color: var(--tm-text-primary);
    margin: 0;
}

.library-meta[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-2, 0.5rem);
    flex-wrap: wrap;
}

.version-tag[b-6l1pmni07i] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    color: var(--tm-text-secondary);
    font-family: var(--tm-font-mono, monospace);
    background: var(--tm-bg-surface-secondary);
    padding: var(--tm-spacing-1, 0.25rem) var(--tm-spacing-2, 0.5rem);
    border-radius: var(--tm-radius-md, 0.5rem);
    border: 1px solid var(--tm-border-color);
}

/* Statistiky */
.stats-row[b-6l1pmni07i] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tm-spacing-4, 1rem);
    margin-bottom: var(--tm-spacing-6, 1.5rem);
}

[b-6l1pmni07i] .stats-row .tm-stat-card {
    background: var(--tm-bg-surface);
    border: 1px solid var(--tm-border-color);
    border-radius: var(--tm-radius-lg, 0.75rem);
    padding: var(--tm-spacing-4, 1rem);
    transition: all 0.2s ease;
}

[b-6l1pmni07i] .stats-row .tm-stat-card:hover {
    border-color: var(--tm-color-primary-light);
    box-shadow: var(--tm-shadow-md);
}

/* Getting Started */
.getting-started-card[b-6l1pmni07i] {
    margin-bottom: var(--tm-spacing-6, 1.5rem);
}

.getting-started-header[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-3, 0.75rem);
    margin-bottom: var(--tm-spacing-4, 1rem);
    padding-bottom: var(--tm-spacing-4, 1rem);
    border-bottom: 1px solid var(--tm-border-color);
}

.getting-started-header h3[b-6l1pmni07i] {
    margin: 0;
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: var(--tm-font-weight-semibold, 600);
}

.getting-started-content pre[b-6l1pmni07i] {
    background: var(--tm-bg-surface-secondary);
    padding: var(--tm-spacing-4, 1rem);
    border-radius: var(--tm-radius-md, 0.5rem);
    font-family: var(--tm-font-mono, monospace);
    font-size: var(--tm-font-size-sm, 0.875rem);
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 0;
}

/* Taby */
[b-6l1pmni07i] .library-tabs {
    background: var(--tm-bg-surface);
    border: 1px solid var(--tm-border-color);
    border-radius: var(--tm-radius-xl, 1rem);
    overflow: hidden;
}

[b-6l1pmni07i] .library-tabs .tm-tabs-nav {
    background: var(--tm-bg-surface-secondary);
    border-bottom: 1px solid var(--tm-border-color);
    padding: var(--tm-spacing-2, 0.5rem) var(--tm-spacing-4, 1rem);
}

[b-6l1pmni07i] .library-tabs .tm-tab-panel {
    padding: var(--tm-spacing-6, 1.5rem);
}

/* Tab toolbar */
.tab-toolbar[b-6l1pmni07i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tm-spacing-6, 1.5rem);
    gap: var(--tm-spacing-4, 1rem);
    flex-wrap: wrap;
}

[b-6l1pmni07i] .search-input {
    flex: 1;
    min-width: 280px;
}

.tab-title-wrapper h3[b-6l1pmni07i] {
    margin: 0 0 var(--tm-spacing-1, 0.25rem) 0;
    font-size: var(--tm-font-size-xl, 1.25rem);
    font-weight: var(--tm-font-weight-semibold, 600);
}

.tab-description[b-6l1pmni07i] {
    margin: 0;
    color: var(--tm-text-secondary);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

/* Items grid */
.items-grid[b-6l1pmni07i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--tm-spacing-4, 1rem);
}

.item-card[b-6l1pmni07i] {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--tm-border-color);
}

.item-card:hover[b-6l1pmni07i] {
    border-color: var(--tm-color-primary);
    box-shadow: var(--tm-shadow-lg);
    transform: translateY(-2px);
}

.item-card-header[b-6l1pmni07i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--tm-spacing-2, 0.5rem);
    margin-bottom: var(--tm-spacing-2, 0.5rem);
}

.item-name[b-6l1pmni07i] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    margin: 0;
    color: var(--tm-text-primary);
}

.item-badges[b-6l1pmni07i] {
    display: flex;
    gap: var(--tm-spacing-1, 0.25rem);
    flex-wrap: wrap;
}

.item-category[b-6l1pmni07i] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    margin-bottom: var(--tm-spacing-2, 0.5rem);
}

.item-description[b-6l1pmni07i] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    margin: 0 0 var(--tm-spacing-4, 1rem) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card-footer[b-6l1pmni07i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--tm-spacing-3, 0.75rem);
    border-top: 1px solid var(--tm-border-color);
}

.item-stats[b-6l1pmni07i] {
    display: flex;
    gap: var(--tm-spacing-3, 0.75rem);
}

.item-stat[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-1, 0.25rem);
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-secondary);
}

.item-actions[b-6l1pmni07i] {
    display: flex;
    gap: var(--tm-spacing-1, 0.25rem);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.item-card:hover .item-actions[b-6l1pmni07i] {
    opacity: 1;
}

/* Examples grid */
.examples-grid[b-6l1pmni07i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--tm-spacing-4, 1rem);
}

.example-card[b-6l1pmni07i] {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--tm-border-color);
}

.example-card:hover[b-6l1pmni07i] {
    border-color: var(--tm-color-primary);
    box-shadow: var(--tm-shadow-lg);
}

.example-card-header[b-6l1pmni07i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--tm-spacing-2, 0.5rem);
}

.example-title[b-6l1pmni07i] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    margin: 0;
}

.example-description[b-6l1pmni07i] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    margin: 0 0 var(--tm-spacing-3, 0.75rem) 0;
}

.example-components[b-6l1pmni07i] {
    margin-bottom: var(--tm-spacing-3, 0.75rem);
}

.components-label[b-6l1pmni07i] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-tertiary);
    margin-bottom: var(--tm-spacing-1, 0.25rem);
    display: block;
}

.example-actions[b-6l1pmni07i] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tm-spacing-1, 0.25rem);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.example-card:hover .example-actions[b-6l1pmni07i] {
    opacity: 1;
}

/* Version list */
.version-list[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.version-item[b-6l1pmni07i] {
    display: flex;
    gap: var(--tm-spacing-4, 1rem);
    padding: var(--tm-spacing-4, 1rem) 0;
}

.version-marker[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
}

.version-dot[b-6l1pmni07i] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tm-border-color);
    border: 3px solid var(--tm-bg-surface);
    box-shadow: 0 0 0 2px var(--tm-border-color);
}

.dot-current[b-6l1pmni07i] {
    background: var(--tm-color-success, #22c55e);
    box-shadow: 0 0 0 2px var(--tm-color-success, #22c55e);
}

.version-line[b-6l1pmni07i] {
    flex: 1;
    width: 2px;
    background: var(--tm-border-color);
    margin: var(--tm-spacing-2, 0.5rem) 0;
}

.version-content[b-6l1pmni07i] {
    flex: 1;
    padding-bottom: var(--tm-spacing-4, 1rem);
    border-bottom: 1px solid var(--tm-border-color);
}

.version-header[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-2, 0.5rem);
    margin-bottom: var(--tm-spacing-1, 0.25rem);
}

.version-number[b-6l1pmni07i] {
    font-size: var(--tm-font-size-lg, 1.125rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    font-family: var(--tm-font-mono, monospace);
}

.version-date[b-6l1pmni07i] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
}

.version-notes[b-6l1pmni07i] {
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    margin: var(--tm-spacing-2, 0.5rem) 0 0 0;
}

.version-notes.empty[b-6l1pmni07i] {
    font-style: italic;
    color: var(--tm-text-tertiary);
}

/* Import sekce */
.import-card[b-6l1pmni07i] {
    border: 1px solid var(--tm-border-color);
    transition: all 0.2s ease;
}

.import-card:hover[b-6l1pmni07i] {
    border-color: var(--tm-color-primary-light);
}

.import-card-header[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-4, 1rem);
    margin-bottom: var(--tm-spacing-6, 1.5rem);
    padding-bottom: var(--tm-spacing-4, 1rem);
    border-bottom: 1px solid var(--tm-border-color);
}

.import-icon[b-6l1pmni07i] {
    width: 56px;
    height: 56px;
    border-radius: var(--tm-radius-lg, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.2));
    color: var(--tm-color-primary);
}

.import-title-wrapper h3[b-6l1pmni07i] {
    margin: 0 0 var(--tm-spacing-1, 0.25rem) 0;
    font-size: var(--tm-font-size-xl, 1.25rem);
    font-weight: var(--tm-font-weight-semibold, 600);
}

.import-title-wrapper p[b-6l1pmni07i] {
    margin: 0;
    color: var(--tm-text-secondary);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

.import-form[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-4, 1rem);
}

.form-row[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-2, 0.5rem);
}

.form-row.two-columns[b-6l1pmni07i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tm-spacing-4, 1rem);
}

/* TmFileDropZone customizations */
[b-6l1pmni07i] .import-file-drop .tm-file-drop-zone__content {
    color: var(--tm-text-secondary);
}

[b-6l1pmni07i] .supplementary-file-drop {
    min-height: auto;
}

[b-6l1pmni07i] .supplementary-file-drop .tm-file-drop-zone__content {
    color: var(--tm-text-secondary);
    font-size: var(--tm-font-size-sm, 0.875rem);
}

/* Schema info panel (shared for JSON Schema + Supplementary JSON) */
.schema-info-panel[b-6l1pmni07i] {
    background: var(--tm-color-primary-subtle, #f0f7ff);
    border: 1px solid var(--tm-color-primary-light, #bfdbfe);
    border-radius: var(--tm-radius-lg, 0.75rem);
    padding: var(--tm-spacing-5, 1.25rem);
}

.schema-info-panel-header[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-2, 0.5rem);
    margin-bottom: var(--tm-spacing-3, 0.75rem);
    color: var(--tm-color-primary);
}

.schema-info-panel-header h4[b-6l1pmni07i] {
    margin: 0;
    font-size: var(--tm-font-size-base, 1rem);
    font-weight: var(--tm-font-weight-semibold, 600);
}

.schema-info-description[b-6l1pmni07i] {
    margin: 0 0 var(--tm-spacing-4, 1rem) 0;
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    line-height: 1.5;
}

.schema-info-example-wrapper[b-6l1pmni07i] {
    border: 1px solid var(--tm-border-color);
    border-radius: var(--tm-radius-md, 0.5rem);
    overflow: hidden;
    background: var(--tm-bg-primary, #fff);
}

.schema-info-example-toolbar[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tm-spacing-2, 0.5rem) var(--tm-spacing-3, 0.75rem);
    background: var(--tm-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--tm-border-color);
}

.schema-info-example-label[b-6l1pmni07i] {
    font-size: var(--tm-font-size-xs, 0.75rem);
    font-weight: var(--tm-font-weight-semibold, 600);
    color: var(--tm-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.schema-info-example[b-6l1pmni07i] {
    margin: 0;
    padding: var(--tm-spacing-4, 1rem);
    overflow-x: auto;
    font-size: var(--tm-font-size-sm, 0.875rem);
    line-height: 1.6;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    color: var(--tm-text-primary);
    max-height: 400px;
    overflow-y: auto;
}

.schema-info-kind-values[b-6l1pmni07i] {
    margin: var(--tm-spacing-3, 0.75rem) 0;
    font-size: var(--tm-font-size-xs, 0.75rem);
    color: var(--tm-text-tertiary);
    font-style: italic;
}

.schema-info-hint[b-6l1pmni07i] {
    display: flex;
    align-items: flex-start;
    gap: var(--tm-spacing-2, 0.5rem);
    padding: var(--tm-spacing-3, 0.75rem);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--tm-radius-md, 0.5rem);
    font-size: var(--tm-font-size-sm, 0.875rem);
    color: var(--tm-text-secondary);
    line-height: 1.5;
    margin-top: var(--tm-spacing-3, 0.75rem);
}

.schema-info-hint[b-6l1pmni07i]  .tm-icon {
    color: #8b5cf6;
    flex-shrink: 0;
    margin-top: 2px;
}

.preview-card[b-6l1pmni07i] {
    margin-top: var(--tm-spacing-4, 1rem);
    border: 1px solid var(--tm-color-primary-light);
    background: var(--tm-color-primary-subtle);
}

.import-actions[b-6l1pmni07i] {
    display: flex;
    justify-content: flex-end;
    gap: var(--tm-spacing-3, 0.75rem);
    margin-top: var(--tm-spacing-4, 1rem);
}

@media (max-width: 640px) {
    .form-row.two-columns[b-6l1pmni07i] {
        grid-template-columns: 1fr;
    }
}

/* API Keys */
.apikeys-list[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-3, 0.75rem);
}

.apikey-card[b-6l1pmni07i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tm-spacing-4, 1rem);
    border: 1px solid var(--tm-border-color);
    transition: all 0.2s ease;
}

.apikey-card:hover[b-6l1pmni07i] {
    border-color: var(--tm-color-primary-light);
}

.apikey-info[b-6l1pmni07i] {
    display: flex;
    align-items: center;
    gap: var(--tm-spacing-3, 0.75rem);
}

.apikey-icon[b-6l1pmni07i] {
    width: 40px;
    height: 40px;
    border-radius: var(--tm-radius-md, 0.5rem);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-color-warning, #f59e0b);
}

.apikey-details[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-1, 0.25rem);
}

.apikey-name[b-6l1pmni07i] {
    font-weight: var(--tm-font-weight-medium, 500);
    font-family: var(--tm-font-mono, monospace);
}

.apikey-meta[b-6l1pmni07i] {
    display: flex;
    gap: var(--tm-spacing-2, 0.5rem);
}

/* Loading state */
.loading-state[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-4, 1rem);
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-row[b-6l1pmni07i] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-container[b-6l1pmni07i] {
        padding: var(--tm-spacing-4, 1rem);
    }

    .library-header-content[b-6l1pmni07i] {
        flex-direction: column;
        gap: var(--tm-spacing-4, 1rem);
    }

    .library-title-section[b-6l1pmni07i] {
        flex-direction: column;
        align-items: flex-start;
    }

    .library-name[b-6l1pmni07i] {
        font-size: var(--tm-font-size-2xl, 1.5rem);
    }

    .stats-row[b-6l1pmni07i] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tab-toolbar[b-6l1pmni07i] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-6l1pmni07i] .search-input {
        min-width: 100%;
    }

    .items-grid[b-6l1pmni07i],
    .examples-grid[b-6l1pmni07i] {
        grid-template-columns: 1fr;
    }

    .form-row.two-columns[b-6l1pmni07i] {
        grid-template-columns: 1fr;
    }

    .item-actions[b-6l1pmni07i],
    .example-actions[b-6l1pmni07i] {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .stats-row[b-6l1pmni07i] {
        grid-template-columns: 1fr;
    }

    .library-icon-wrapper[b-6l1pmni07i] {
        width: 48px;
        height: 48px;
    }

    [b-6l1pmni07i] .library-icon-wrapper .tm-icon {
        width: 24px;
        height: 24px;
    }
}

/* Bind Key Dialog */
.bind-key-form[b-6l1pmni07i] {
    display: flex;
    flex-direction: column;
    gap: var(--tm-spacing-4, 1rem);
    padding: var(--tm-spacing-2, 0.5rem) 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .library-header[b-6l1pmni07i] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), var(--tm-bg-surface));
    }

    .item-card:hover[b-6l1pmni07i],
    .example-card:hover[b-6l1pmni07i] {
        box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.4);
    }
}
/* /Pages/Marketplace/MarketplacePage.razor.rz.scp.css */
/* MarketplacePage.razor.css - Dark Mode Support */

.page-container[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-wzojscyuoy] {
    color: var(--tm-text-primary, #0f172a);
}

.text-muted[b-wzojscyuoy] {
    color: var(--tm-text-secondary, #475569);
}

.marketplace-filters[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.filter-controls[b-wzojscyuoy] {
    background-color: transparent;
}

.loading-grid[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.marketplace-grid[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.marketplace-template-card[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.marketplace-template-card:hover[b-wzojscyuoy] {
    border-color: var(--tm-color-primary, #3b82f6);
}

.template-card-header[b-wzojscyuoy] {
    background-color: transparent;
}

.template-badges[b-wzojscyuoy] {
    background-color: transparent;
}

.template-name[b-wzojscyuoy] {
    color: var(--tm-text-primary, #0f172a);
}

.template-description[b-wzojscyuoy] {
    color: var(--tm-text-secondary, #475569);
}

.template-tags[b-wzojscyuoy] {
    background-color: transparent;
}

.template-stats[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.stat-item[b-wzojscyuoy] {
    color: var(--tm-text-secondary, #475569);
}

.stat-count[b-wzojscyuoy] {
    color: var(--tm-text-secondary, #475569);
}

.template-author[b-wzojscyuoy] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.author-name[b-wzojscyuoy] {
    color: var(--tm-text-primary, #0f172a);
}
/* /Pages/Marketplace/PublishTemplatePage.razor.rz.scp.css */
/* PublishTemplatePage.razor.css - Dark Mode Support */

.page-container[b-vinuwhtyr3] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-vinuwhtyr3] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-vinuwhtyr3] {
    color: var(--tm-text-primary, #0f172a);
}

.loading-state[b-vinuwhtyr3] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-secondary, #475569);
}

.loading-state p[b-vinuwhtyr3] {
    color: var(--tm-text-secondary, #475569);
}

.publish-form[b-vinuwhtyr3] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.publish-form[b-vinuwhtyr3]  h3 {
    color: var(--tm-text-primary, #0f172a);
}

.form-field[b-vinuwhtyr3] {
    background-color: transparent;
}

.form-field label[b-vinuwhtyr3] {
    color: var(--tm-text-primary, #0f172a);
}

.form-actions[b-vinuwhtyr3] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}
/* /Pages/Marketplace/TemplateDetailPage.razor.rz.scp.css */
/* TemplateDetailPage.razor.css - Dark Mode Support */

.page-container[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.loading-state[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-secondary, #475569);
}

.loading-state p[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}

.template-detail-header[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.header-content[b-z9zdtbxtj0] {
    background-color: transparent;
}

.header-badges[b-z9zdtbxtj0] {
    background-color: transparent;
}

.template-detail-header h1[b-z9zdtbxtj0] {
    color: var(--tm-text-primary, #0f172a);
}

.template-description[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}

.template-tags[b-z9zdtbxtj0] {
    background-color: transparent;
}

.header-actions[b-z9zdtbxtj0] {
    background-color: transparent;
}

.template-detail-grid[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.detail-main[b-z9zdtbxtj0] {
    background-color: transparent;
}

.stats-row[b-z9zdtbxtj0] {
    background-color: transparent;
}

.reviews-summary[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.reviews-total[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}

.reviews-list[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.review-item[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.review-header[b-z9zdtbxtj0] {
    background-color: transparent;
}

.review-meta[b-z9zdtbxtj0] {
    background-color: transparent;
}

.review-author[b-z9zdtbxtj0] {
    color: var(--tm-text-primary, #0f172a);
}

.review-date[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}

.review-title[b-z9zdtbxtj0] {
    color: var(--tm-text-primary, #0f172a);
}

.review-content[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}

.empty-reviews[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}

.review-form[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.review-form label[b-z9zdtbxtj0] {
    color: var(--tm-text-primary, #0f172a);
}

.form-field[b-z9zdtbxtj0] {
    background-color: transparent;
}

.form-actions[b-z9zdtbxtj0] {
    background-color: transparent;
}

.detail-sidebar[b-z9zdtbxtj0] {
    background-color: transparent;
}

.author-info[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.author-meta[b-z9zdtbxtj0] {
    background-color: transparent;
}

.author-name[b-z9zdtbxtj0] {
    color: var(--tm-text-primary, #0f172a);
}

.author-badges[b-z9zdtbxtj0] {
    background-color: transparent;
}

.detail-info-list[b-z9zdtbxtj0] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.detail-info-item[b-z9zdtbxtj0] {
    background-color: transparent;
    color: var(--tm-text-primary, #0f172a);
}

.info-label[b-z9zdtbxtj0] {
    color: var(--tm-text-secondary, #475569);
}
/* /Pages/NotFound.razor.rz.scp.css */
/* NotFound.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

/* NotFound page - styled as centered error page */
:host[b-38g3fm6phy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

h3[b-38g3fm6phy] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 1rem;
}

p[b-38g3fm6phy] {
    font-size: 1rem;
    color: var(--tm-text-secondary, #64748b);
    margin: 0 0 2rem;
    max-width: 400px;
    line-height: 1.6;
}

/* Alternative styling if wrapped in a container */
[b-38g3fm6phy] .not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

[b-38g3fm6phy] .not-found-container h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
    margin: 0 0 1rem;
}

[b-38g3fm6phy] .not-found-container p {
    font-size: 1.125rem;
    color: var(--tm-text-secondary, #64748b);
    margin: 0 0 2rem;
}

[b-38g3fm6phy] .not-found-icon {
    font-size: 4rem;
    color: var(--tm-color-danger, #ef4444);
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

[b-38g3fm6phy] .not-found-code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--tm-border-color, #e2e8f0);
    line-height: 1;
    margin-bottom: 1rem;
}

[b-38g3fm6phy] .back-home-btn {
    margin-top: 1rem;
    background-color: var(--tm-color-primary, #3b82f6);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--tm-radius-md, 0.375rem);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s;
}

[b-38g3fm6phy] .back-home-btn:hover {
    background-color: #2563eb;
}
/* /Pages/Organizations/EnvironmentsConfigPage.razor.rz.scp.css */
/* EnvironmentsConfigPage.razor.css - Dark Mode Support */

/* Page container and header */
[b-iqha69uewl] .tm-header {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-iqha69uewl] .tm-header h1 {
    color: var(--tm-text-primary, #0f172a);
}

/* Environments pipeline */
.environments-pipeline[b-iqha69uewl] {
    background-color: transparent;
}

/* Environment cards */
.env-card[b-iqha69uewl] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    border-top: 3px solid var(--tm-color-primary, #3b82f6);
}

.env-card:hover[b-iqha69uewl] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-color-primary, #3b82f6);
}

/* Environment header */
.env-header[b-iqha69uewl] {
    background-color: transparent;
}

.env-name[b-iqha69uewl] {
    background-color: transparent;
}

.env-name h3[b-iqha69uewl] {
    color: var(--tm-text-primary, #0f172a);
}

.env-name[b-iqha69uewl]  .tm-icon {
    color: var(--tm-color-primary, #3b82f6);
}

/* Environment badges */
[b-iqha69uewl] .tm-badge {
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Environment actions */
.env-actions[b-iqha69uewl] {
    background-color: transparent;
}

.env-actions[b-iqha69uewl]  .tm-toolbar-button {
    color: var(--tm-text-secondary, #64748b);
    background-color: transparent;
}

.env-actions[b-iqha69uewl]  .tm-toolbar-button:hover {
    color: var(--tm-text-primary, #0f172a);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

/* Environment details */
.env-details[b-iqha69uewl] {
    background-color: transparent;
}

.env-slug[b-iqha69uewl] {
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.env-description[b-iqha69uewl] {
    color: var(--tm-text-secondary, #64748b);
}

/* Pipeline arrow */
.pipeline-arrow[b-iqha69uewl] {
    color: var(--tm-text-secondary, #64748b);
    background-color: transparent;
}

.pipeline-arrow[b-iqha69uewl]  .tm-icon {
    color: var(--tm-text-secondary, #64748b);
}

/* Loading state */
[b-iqha69uewl] .tm-spinner {
    color: var(--tm-color-primary, #3b82f6);
}

/* Empty state */
[b-iqha69uewl] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

/* Dialog styles */
[b-iqha69uewl] .tm-dialog {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

[b-iqha69uewl] .tm-dialog .dialog-header {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-iqha69uewl] .tm-dialog .dialog-header h3 {
    color: var(--tm-text-primary, #0f172a);
}

[b-iqha69uewl] .tm-dialog .dialog-body {
    background-color: var(--tm-bg-surface, #ffffff);
}

[b-iqha69uewl] .tm-dialog .dialog-footer {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Form fields in dialog */
.form-field[b-iqha69uewl] {
    background-color: transparent;
}

.form-field label[b-iqha69uewl] {
    color: var(--tm-text-primary, #0f172a);
}

.form-field[b-iqha69uewl]  .tm-text-input,
.form-field[b-iqha69uewl]  .tm-text-area {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.form-field[b-iqha69uewl]  .tm-text-input:focus,
.form-field[b-iqha69uewl]  .tm-text-area:focus {
    border-color: var(--tm-color-primary, #3b82f6);
}

/* Checkbox styling */
.form-field[b-iqha69uewl]  .tm-checkbox {
    color: var(--tm-text-primary, #0f172a);
}

.form-field[b-iqha69uewl]  .tm-checkbox input {
    accent-color: var(--tm-color-primary, #3b82f6);
}

/* Dialog actions */
.dialog-actions[b-iqha69uewl] {
    background-color: transparent;
}
/* /Pages/Organizations/OrganizationDetailPage.razor.rz.scp.css */
/* OrganizationDetailPage.razor.css - Dark Mode Support */

/* Page container */
.page-container[b-lonw78okai] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Page header */
.page-header[b-lonw78okai] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.header-left h1[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

.page-subtitle[b-lonw78okai] {
    color: var(--tm-text-secondary, #64748b);
}

/* Loading state */
.loading-state[b-lonw78okai] {
    background-color: transparent;
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-lonw78okai] {
    background-color: transparent;
    color: var(--tm-text-secondary, #64748b);
}

.empty-state p[b-lonw78okai] {
    color: var(--tm-text-secondary, #64748b);
}

/* Detail grid */
.detail-grid[b-lonw78okai] {
    background-color: transparent;
}

.detail-item[b-lonw78okai] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.detail-label[b-lonw78okai] {
    color: var(--tm-text-secondary, #64748b);
}

.detail-item a[b-lonw78okai] {
    color: var(--tm-color-primary, #3b82f6);
}

/* Sections */
.section[b-lonw78okai] {
    background-color: transparent;
    border-color: var(--tm-border-color, #e2e8f0);
}

.section-header[b-lonw78okai] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.section-header h2[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

/* Members list */
.members-list[b-lonw78okai] {
    background-color: transparent;
}

.member-row[b-lonw78okai] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.member-row:hover[b-lonw78okai] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.member-info[b-lonw78okai] {
    background-color: transparent;
}

.member-avatar[b-lonw78okai] {
    background-color: var(--tm-color-primary, #3b82f6);
    color: var(--tm-bg-surface, #ffffff);
}

.member-name[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

.member-email[b-lonw78okai] {
    color: var(--tm-text-secondary, #64748b);
}

.member-actions[b-lonw78okai] {
    background-color: transparent;
}

/* Role badges */
[b-lonw78okai] .tm-badge {
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Invitations list */
.invitations-list[b-lonw78okai] {
    background-color: transparent;
}

.invitation-row[b-lonw78okai] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.invitation-row:hover[b-lonw78okai] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.invitation-info[b-lonw78okai] {
    background-color: transparent;
}

.invitation-email[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

/* Teams grid */
.teams-grid[b-lonw78okai] {
    background-color: transparent;
}

.team-card[b-lonw78okai] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.team-card:hover[b-lonw78okai] {
    border-color: var(--tm-color-primary, #3b82f6);
    background-color: var(--tm-bg-surface, #ffffff);
}

.team-info[b-lonw78okai] {
    background-color: transparent;
}

.team-info h4[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

.team-info p[b-lonw78okai] {
    color: var(--tm-text-secondary, #64748b);
}

.team-stats[b-lonw78okai] {
    background-color: transparent;
    color: var(--tm-text-secondary, #64748b);
}

/* Modal styles */
.modal-overlay[b-lonw78okai] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content[b-lonw78okai] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.modal-sm[b-lonw78okai] {
    max-width: 400px;
}

.modal-header[b-lonw78okai] {
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.modal-header h3[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-body[b-lonw78okai] {
    background-color: transparent;
}

.modal-body p[b-lonw78okai] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-footer[b-lonw78okai] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Pages/Organizations/OrganizationMembersPage.razor.rz.scp.css */
/* OrganizationMembersPage.razor.css - Dark Mode Support */

/* Page container */
.page-container[b-4ptizu5btg] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Page header */
.page-header[b-4ptizu5btg] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.page-header-left h1[b-4ptizu5btg] {
    color: var(--tm-text-primary, #0f172a);
}

/* Loading state */
.loading-state[b-4ptizu5btg] {
    background-color: transparent;
}

[b-4ptizu5btg] .tm-skeleton {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

/* Empty state */
[b-4ptizu5btg] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

[b-4ptizu5btg] .tm-empty-state .empty-title {
    color: var(--tm-text-primary, #0f172a);
}

/* Members table */
.members-table[b-4ptizu5btg] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.members-table thead[b-4ptizu5btg] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.members-table thead th[b-4ptizu5btg] {
    color: var(--tm-text-secondary, #64748b);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.members-table tbody[b-4ptizu5btg] {
    background-color: transparent;
}

.members-table tbody tr[b-4ptizu5btg] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.members-table tbody tr:hover[b-4ptizu5btg] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.members-table tbody td[b-4ptizu5btg] {
    color: var(--tm-text-primary, #0f172a);
}

/* Member row styling */
.member-row[b-4ptizu5btg] {
    background-color: transparent;
}

.member-name[b-4ptizu5btg] {
    color: var(--tm-text-primary, #0f172a);
}

.member-name span[b-4ptizu5btg] {
    color: var(--tm-text-primary, #0f172a);
}

/* Role badges */
[b-4ptizu5btg] .tm-badge {
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Member actions */
.member-actions[b-4ptizu5btg] {
    background-color: transparent;
}

.remove-member-btn[b-4ptizu5btg] {
    color: var(--tm-color-danger, #ef4444);
}

/* Modal styles */
.modal-overlay[b-4ptizu5btg] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-overlay.confirm-dialog[b-4ptizu5btg] {
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-container[b-4ptizu5btg] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.modal-body[b-4ptizu5btg] {
    background-color: transparent;
}

.modal-body p[b-4ptizu5btg] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-footer[b-4ptizu5btg] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Pages/Organizations/OrganizationSettingsPage.razor.rz.scp.css */
/* OrganizationSettingsPage.razor.css - Dark Mode Support */

/* Page container */
.page-container[b-wtwlm7zich] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Page header */
.page-header[b-wtwlm7zich] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.header-left h1[b-wtwlm7zich] {
    color: var(--tm-text-primary, #0f172a);
}

/* Loading state */
.loading-state[b-wtwlm7zich] {
    background-color: transparent;
    color: var(--tm-text-secondary, #64748b);
}

.loading-state p[b-wtwlm7zich] {
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-wtwlm7zich] {
    background-color: transparent;
    color: var(--tm-text-secondary, #64748b);
}

.empty-state p[b-wtwlm7zich] {
    color: var(--tm-text-secondary, #64748b);
}

/* Settings sections */
.settings-section[b-wtwlm7zich] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-section h2[b-wtwlm7zich] {
    color: var(--tm-text-primary, #0f172a);
}

.section-description[b-wtwlm7zich] {
    color: var(--tm-text-secondary, #64748b);
}

/* Form fields */
[b-wtwlm7zich] .tm-form-field {
    background-color: transparent;
}

[b-wtwlm7zich] .tm-form-field label {
    color: var(--tm-text-primary, #0f172a);
}

.field-help[b-wtwlm7zich] {
    color: var(--tm-text-secondary, #64748b);
}

/* Text inputs */
[b-wtwlm7zich] .tm-text-input,
[b-wtwlm7zich] .tm-text-area {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

[b-wtwlm7zich] .tm-text-input:focus,
[b-wtwlm7zich] .tm-text-area:focus {
    border-color: var(--tm-color-primary, #3b82f6);
}

[b-wtwlm7zich] .tm-text-input::placeholder,
[b-wtwlm7zich] .tm-text-area::placeholder {
    color: var(--tm-text-secondary, #64748b);
}

/* Checkbox labels */
.checkbox-label[b-wtwlm7zich] {
    color: var(--tm-text-primary, #0f172a);
}

.checkbox-label input[type="checkbox"][b-wtwlm7zich] {
    accent-color: var(--tm-color-primary, #3b82f6);
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Form actions */
.form-actions[b-wtwlm7zich] {
    background-color: transparent;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Pages/Organizations/OrganizationsPage.razor.rz.scp.css */
/* OrganizationsPage.razor.css - Dark Mode Support */

/* Page container */
.page-container[b-1tub28ok7r] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

/* Page header */
.page-header[b-1tub28ok7r] {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.page-header h1[b-1tub28ok7r] {
    color: var(--tm-text-primary, #0f172a);
}

.page-subtitle[b-1tub28ok7r] {
    color: var(--tm-text-secondary, #64748b);
}

/* Invitations section */
.invitations-section[b-1tub28ok7r] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.invitations-section h2[b-1tub28ok7r] {
    color: var(--tm-text-primary, #0f172a);
}

.invitation-card[b-1tub28ok7r] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.invitation-org[b-1tub28ok7r] {
    color: var(--tm-text-primary, #0f172a);
}

.invitation-meta[b-1tub28ok7r] {
    color: var(--tm-text-secondary, #64748b);
}

.invitation-message[b-1tub28ok7r] {
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

/* Loading state */
.loading-state[b-1tub28ok7r] {
    background-color: transparent;
    color: var(--tm-text-secondary, #64748b);
}

/* Organizations grid */
.organizations-grid[b-1tub28ok7r] {
    background-color: transparent;
}

/* Organization cards */
.org-card[b-1tub28ok7r] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.org-card:hover[b-1tub28ok7r] {
    border-color: var(--tm-color-primary, #3b82f6);
    background-color: var(--tm-bg-surface, #ffffff);
}

.org-card-header[b-1tub28ok7r] {
    background-color: transparent;
}

.org-avatar[b-1tub28ok7r] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-color-primary, #3b82f6);
    border-color: var(--tm-border-color, #e2e8f0);
}

.org-name[b-1tub28ok7r] {
    color: var(--tm-text-primary, #0f172a);
}

.org-description[b-1tub28ok7r] {
    color: var(--tm-text-secondary, #64748b);
}

.org-card-stats[b-1tub28ok7r] {
    background-color: transparent;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.org-stat[b-1tub28ok7r] {
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
[b-1tub28ok7r] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

[b-1tub28ok7r] .tm-empty-state .empty-title {
    color: var(--tm-text-primary, #0f172a);
}

/* Modal styles */
.modal-overlay[b-1tub28ok7r] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content[b-1tub28ok7r] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.modal-header[b-1tub28ok7r] {
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.modal-header h3[b-1tub28ok7r] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-body[b-1tub28ok7r] {
    background-color: transparent;
}

.modal-footer[b-1tub28ok7r] {
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}
/* /Pages/Organizations/PromotionRequestsPage.razor.rz.scp.css */
/* PromotionRequestsPage.razor.css - Dark Mode Support */

/* Page header */
[b-ucpbgy25ii] .tm-header {
    background-color: transparent;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

[b-ucpbgy25ii] .tm-header h1 {
    color: var(--tm-text-primary, #0f172a);
}

/* Loading state */
[b-ucpbgy25ii] .tm-spinner {
    color: var(--tm-color-primary, #3b82f6);
}

/* Empty state */
[b-ucpbgy25ii] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-text-secondary, #64748b);
}

/* Promotion table */
.promotion-table[b-ucpbgy25ii] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.promotion-table thead[b-ucpbgy25ii] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.promotion-table thead th[b-ucpbgy25ii] {
    color: var(--tm-text-secondary, #64748b);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.promotion-table tbody[b-ucpbgy25ii] {
    background-color: transparent;
}

.promotion-table tbody tr[b-ucpbgy25ii] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.promotion-table tbody tr:hover[b-ucpbgy25ii] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.promotion-table tbody td[b-ucpbgy25ii] {
    color: var(--tm-text-primary, #0f172a);
}

/* Action buttons */
.action-buttons[b-ucpbgy25ii] {
    background-color: transparent;
}

.action-buttons[b-ucpbgy25ii]  .tm-button {
    border-color: var(--tm-border-color, #e2e8f0);
}

/* Timeline/Flow visualization for promotion requests */
.promotion-flow[b-ucpbgy25ii] {
    background-color: transparent;
}

.environment-indicator[b-ucpbgy25ii] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.source-environment[b-ucpbgy25ii] {
    color: var(--tm-color-primary, #3b82f6);
}

.target-environment[b-ucpbgy25ii] {
    color: var(--tm-color-success, #22c55e);
}

.arrow-indicator[b-ucpbgy25ii] {
    color: var(--tm-text-secondary, #64748b);
}

/* Version badge styling */
.version-badge[b-ucpbgy25ii] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

/* Request metadata */
.request-meta[b-ucpbgy25ii] {
    color: var(--tm-text-secondary, #64748b);
}

.request-user[b-ucpbgy25ii] {
    color: var(--tm-text-primary, #0f172a);
}

/* Resource type styling */
.resource-type[b-ucpbgy25ii] {
    color: var(--tm-text-primary, #0f172a);
}

/* Date styling */
.request-date[b-ucpbgy25ii] {
    color: var(--tm-text-secondary, #64748b);
}
/* /Pages/Reports/ReportsPage.razor.rz.scp.css */
/* ReportsPage.razor.css - Dark Mode Support */

.page-container[b-a2a5uj0oru] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-a2a5uj0oru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-a2a5uj0oru] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.header-actions[b-a2a5uj0oru] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Report types grid */
.reports-grid[b-a2a5uj0oru] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.report-card[b-a2a5uj0oru] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.report-card:hover[b-a2a5uj0oru] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--tm-color-primary, #3b82f6);
}

.report-icon[b-a2a5uj0oru] {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-color-primary, #3b82f6);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.report-card h3[b-a2a5uj0oru] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.report-description[b-a2a5uj0oru] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.report-meta[b-a2a5uj0oru] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--tm-text-muted, #94a3b8);
}

.report-meta span[b-a2a5uj0oru] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Report configuration panel */
.report-config[b-a2a5uj0oru] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.config-header h3[b-a2a5uj0oru] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.config-form[b-a2a5uj0oru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.config-field[b-a2a5uj0oru] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-field label[b-a2a5uj0oru] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tm-text-secondary, #64748b);
}

.config-field input[b-a2a5uj0oru],
.config-field select[b-a2a5uj0oru] {
    padding: 0.5rem 0.75rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.config-field input:focus[b-a2a5uj0oru],
.config-field select:focus[b-a2a5uj0oru] {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Generated report display */
.report-output[b-a2a5uj0oru] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    overflow: hidden;
}

.report-toolbar[b-a2a5uj0oru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.report-toolbar h4[b-a2a5uj0oru] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.toolbar-actions[b-a2a5uj0oru] {
    display: flex;
    gap: 0.5rem;
}

.report-content[b-a2a5uj0oru] {
    padding: 1.5rem;
    min-height: 300px;
}

/* Report table */
.report-table-wrapper[b-a2a5uj0oru] {
    overflow-x: auto;
}

.report-table[b-a2a5uj0oru] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table thead th[b-a2a5uj0oru] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    white-space: nowrap;
}

.report-table tbody td[b-a2a5uj0oru] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.report-table tbody tr:hover[b-a2a5uj0oru] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.report-table tbody tr:last-child td[b-a2a5uj0oru] {
    border-bottom: none;
}

/* Charts in reports */
.chart-wrapper[b-a2a5uj0oru] {
    height: 300px;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-text-muted, #94a3b8);
}

/* Loading state */
.loading-state[b-a2a5uj0oru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-a2a5uj0oru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--tm-text-secondary, #64748b);
}

.empty-state-icon[b-a2a5uj0oru] {
    font-size: 3rem;
    color: var(--tm-text-muted, #94a3b8);
    margin-bottom: 1rem;
}

.empty-state-title[b-a2a5uj0oru] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

.empty-state-text[b-a2a5uj0oru] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Scheduled reports section */
.scheduled-section[b-a2a5uj0oru] {
    margin-top: 2rem;
}

.scheduled-section h2[b-a2a5uj0oru] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 1rem;
}

.scheduled-list[b-a2a5uj0oru] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scheduled-item[b-a2a5uj0oru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
}

.scheduled-info h4[b-a2a5uj0oru] {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.scheduled-info p[b-a2a5uj0oru] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

@media (max-width: 768px) {
    .page-container[b-a2a5uj0oru] {
        padding: 1rem;
    }
    
    .page-header[b-a2a5uj0oru] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-actions[b-a2a5uj0oru] {
        flex-direction: column;
    }
    
    .reports-grid[b-a2a5uj0oru] {
        grid-template-columns: 1fr;
    }
    
    .config-form[b-a2a5uj0oru] {
        grid-template-columns: 1fr;
    }
    
    .report-toolbar[b-a2a5uj0oru] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .toolbar-actions[b-a2a5uj0oru] {
        justify-content: flex-end;
    }
}
/* /Pages/Settings/AISettingsPage.razor.rz.scp.css */
/* AISettingsPage.razor.css - Dark Mode Support */

.settings-page[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.settings-header[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.settings-header h1[b-z3wgwyvtbj] {
    color: var(--tm-text-primary, #0f172a);
}

.settings-card[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.security-notice[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-color: var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.security-notice strong[b-z3wgwyvtbj] {
    color: var(--tm-text-primary, #0f172a);
}

.security-notice p[b-z3wgwyvtbj] {
    color: var(--tm-text-secondary, #475569);
}

.security-notice small[b-z3wgwyvtbj] {
    color: var(--tm-text-secondary, #64748b);
}

.form-actions[b-z3wgwyvtbj] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.status-card[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.status-card h3[b-z3wgwyvtbj] {
    color: var(--tm-text-primary, #0f172a);
}

.status-item[b-z3wgwyvtbj] {
    color: var(--tm-text-primary, #0f172a);
}

.models-list h4[b-z3wgwyvtbj] {
    color: var(--tm-text-secondary, #475569);
}

.models-badges[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.warning-card[b-z3wgwyvtbj] {
    background-color: var(--tm-bg-surface-secondary, #fffbeb);
    border-color: var(--tm-border-color, #fcd34d);
}

.warning-content[b-z3wgwyvtbj] {
    color: var(--tm-text-primary, #92400e);
}

.warning-content p[b-z3wgwyvtbj] {
    color: var(--tm-text-secondary, #a16207);
}
/* /Pages/Settings/AppearanceSettingsPage.razor.rz.scp.css */
/* AppearanceSettingsPage.razor.css - Dark Mode Support */

.page-container[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.page-header[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-wdubysgd6c] {
    color: var(--tm-text-primary, #0f172a);
}

.settings-section[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.settings-card[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.form-field[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.form-field label[b-wdubysgd6c] {
    color: var(--tm-text-secondary, #475569);
}

.theme-toggle-container[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.density-options[b-wdubysgd6c] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}
/* /Pages/Settings/GlobalSettingsPage.razor.rz.scp.css */
/* GlobalSettingsPage.razor.css - Dark Mode Support */

.page-container[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.page-header[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-gtdchdp6t5] {
    color: var(--tm-text-primary, #0f172a);
}

.loading-state[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-secondary, #475569);
}

.settings-card[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.card-section[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.card-section h3[b-gtdchdp6t5] {
    color: var(--tm-text-primary, #0f172a);
}

.section-description[b-gtdchdp6t5] {
    color: var(--tm-text-secondary, #475569);
}

.form-row[b-gtdchdp6t5] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.form-col[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.char-count[b-gtdchdp6t5] {
    color: var(--tm-text-secondary, #64748b);
}

.form-actions[b-gtdchdp6t5] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.alert-success[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface-secondary, #f0fdf4);
    border-color: var(--tm-border-color, #86efac);
    color: var(--tm-text-primary, #166534);
}

.alert-danger[b-gtdchdp6t5] {
    background-color: var(--tm-bg-surface-secondary, #fef2f2);
    border-color: var(--tm-border-color, #fca5a5);
    color: var(--tm-text-primary, #dc2626);
}
/* /Pages/Settings/GlobalVariablesPage.razor.rz.scp.css */
/* GlobalVariablesPage.razor.css - Dark Mode Support */

.page-container[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.page-header[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-12ug2nketn] {
    color: var(--tm-text-primary, #0f172a);
}

.page-header .text-muted[b-12ug2nketn] {
    color: var(--tm-text-secondary, #475569);
}

.loading-state[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-secondary, #475569);
}

.variables-list[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.variable-card[b-12ug2nketn] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.variable-header[b-12ug2nketn] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.variable-info[b-12ug2nketn] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.variable-name[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
    border-color: var(--tm-border-color, #cbd5e1);
}

.variable-actions[b-12ug2nketn] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.variable-description[b-12ug2nketn] {
    color: var(--tm-text-secondary, #475569);
}

.variable-default[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.variable-default .label[b-12ug2nketn] {
    color: var(--tm-text-secondary, #475569);
}

.variable-default .value[b-12ug2nketn] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-overlay[b-12ug2nketn] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-container[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-border-color, #e2e8f0);
}

.modal-header[b-12ug2nketn] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.modal-header h3[b-12ug2nketn] {
    color: var(--tm-text-primary, #0f172a);
}

.modal-close[b-12ug2nketn] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    color: var(--tm-text-secondary, #475569);
    border-color: var(--tm-border-color, #e2e8f0);
}

.modal-body[b-12ug2nketn] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.modal-footer[b-12ug2nketn] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.field-hint[b-12ug2nketn] {
    color: var(--tm-text-secondary, #64748b);
}
/* /Pages/Settings/NotificationsSettingsPage.razor.rz.scp.css */
/* NotificationsSettingsPage.razor.css - Dark Mode Support */

.page-container[b-r43lk37txm] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.page-header[b-r43lk37txm] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-r43lk37txm] {
    color: var(--tm-text-primary, #0f172a);
}

.settings-section[b-r43lk37txm] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.settings-card[b-r43lk37txm] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-card h3[b-r43lk37txm] {
    color: var(--tm-text-primary, #0f172a);
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-toggle-row[b-r43lk37txm] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-toggle-row span[b-r43lk37txm] {
    color: var(--tm-text-primary, #0f172a);
}

.toggle-info[b-r43lk37txm] {
    color: var(--tm-text-primary, #0f172a);
}

.toggle-info span[b-r43lk37txm] {
    color: var(--tm-text-primary, #0f172a);
}
/* /Pages/Settings/PrivacySettingsPage.razor.rz.scp.css */
/* PrivacySettingsPage.razor.css - Dark Mode Support */

.page-container[b-drac0yl60z] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.page-header[b-drac0yl60z] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header h1[b-drac0yl60z] {
    color: var(--tm-text-primary, #0f172a);
}

.settings-section[b-drac0yl60z] {
    background-color: var(--tm-bg-surface, #ffffff);
}

.settings-card[b-drac0yl60z] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.form-field[b-drac0yl60z] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.form-field label[b-drac0yl60z] {
    color: var(--tm-text-secondary, #475569);
}

.danger-zone[b-drac0yl60z] {
    background-color: var(--tm-bg-surface-secondary, #fef2f2);
    border-color: var(--tm-border-color, #fca5a5);
}

.danger-zone h3[b-drac0yl60z] {
    color: var(--tm-text-primary, #dc2626);
}

.danger-warning[b-drac0yl60z] {
    color: var(--tm-text-secondary, #991b1b);
}
/* /Pages/Settings/SettingsLayout.razor.rz.scp.css */
/* SettingsLayout.razor.css - Dark Mode Support */

.settings-layout[b-7kh6haoskn] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
}

.settings-menu[b-7kh6haoskn] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-menu h2[b-7kh6haoskn] {
    color: var(--tm-text-primary, #0f172a);
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-menu ul[b-7kh6haoskn] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
}

.settings-menu li[b-7kh6haoskn] {
    border-color: var(--tm-border-color, #e2e8f0);
}

.settings-menu li a[b-7kh6haoskn] {
    color: var(--tm-text-secondary, #475569);
    background-color: transparent;
}

.settings-menu li a:hover[b-7kh6haoskn] {
    background-color: var(--tm-bg-surface, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.settings-menu li.active a[b-7kh6haoskn] {
    background-color: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    border-color: var(--tm-border-color, #3b82f6);
}

.settings-content[b-7kh6haoskn] {
    background-color: var(--tm-bg-surface, #ffffff);
}
/* /Pages/Tags/TagsPage.razor.rz.scp.css */
/* TagsPage.razor.css - Dark Mode Support */

.page-container[b-n4juws0pzy] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-n4juws0pzy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-n4juws0pzy] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.header-actions[b-n4juws0pzy] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Search and filters */
.search-box[b-n4juws0pzy] {
    min-width: 300px;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    color: var(--tm-text-primary, #0f172a);
}

.search-box[b-n4juws0pzy]::placeholder {
    color: var(--tm-text-muted, #94a3b8);
}

/* Tags cloud/grid */
.tags-container[b-n4juws0pzy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.tag-card[b-n4juws0pzy] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.tag-card:hover[b-n4juws0pzy] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: var(--tm-color-primary, #3b82f6);
}

.tag-header[b-n4juws0pzy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tag-icon[b-n4juws0pzy] {
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    color: var(--tm-color-primary, #3b82f6);
    font-size: 1.25rem;
}

.tag-info[b-n4juws0pzy] {
    flex: 1;
    min-width: 0;
}

.tag-name[b-n4juws0pzy] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--tm-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-count[b-n4juws0pzy] {
    font-size: 0.75rem;
    color: var(--tm-text-secondary, #64748b);
}

.tag-description[b-n4juws0pzy] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.tag-meta[b-n4juws0pzy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.tag-usage[b-n4juws0pzy] {
    font-size: 0.75rem;
    color: var(--tm-text-muted, #94a3b8);
}

.tag-actions[b-n4juws0pzy] {
    display: flex;
    gap: 0.5rem;
}

/* Color variations for tags */
.tag-color-blue .tag-icon[b-n4juws0pzy] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.tag-color-green .tag-icon[b-n4juws0pzy] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.tag-color-purple .tag-icon[b-n4juws0pzy] {
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.tag-color-orange .tag-icon[b-n4juws0pzy] {
    background-color: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.tag-color-red .tag-icon[b-n4juws0pzy] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Tag cloud view */
.tags-cloud[b-n4juws0pzy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.cloud-tag[b-n4juws0pzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cloud-tag:hover[b-n4juws0pzy] {
    background-color: var(--tm-color-primary, #3b82f6);
    border-color: var(--tm-color-primary, #3b82f6);
    color: white;
}

.cloud-tag .count[b-n4juws0pzy] {
    font-size: 0.75rem;
    color: var(--tm-text-muted, #94a3b8);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}

.cloud-tag:hover .count[b-n4juws0pzy] {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Loading state */
.loading-state[b-n4juws0pzy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: var(--tm-text-secondary, #64748b);
}

/* Empty state */
.empty-state[b-n4juws0pzy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--tm-text-secondary, #64748b);
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: 0.75rem;
    border: 1px dashed var(--tm-border-color, #e2e8f0);
}

.empty-state-icon[b-n4juws0pzy] {
    font-size: 3rem;
    color: var(--tm-text-muted, #94a3b8);
    margin-bottom: 1rem;
}

.empty-state-title[b-n4juws0pzy] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.5rem;
}

.empty-state-text[b-n4juws0pzy] {
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #64748b);
}

@media (max-width: 768px) {
    .page-container[b-n4juws0pzy] {
        padding: 1rem;
    }
    
    .page-header[b-n4juws0pzy] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-actions[b-n4juws0pzy] {
        flex-direction: column;
    }
    
    .search-box[b-n4juws0pzy] {
        min-width: auto;
        width: 100%;
    }
    
    .tags-container[b-n4juws0pzy] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Teams/TeamDetailPage.razor.rz.scp.css */
/* Dark mode styles for TeamDetailPage */

@media (prefers-color-scheme: dark) {
    [b-1m4mnnvma2] .page-container {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .team-header {
        background-color: var(--tm-bg-surface-secondary);
        border-bottom-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .team-avatar {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .team-avatar-placeholder {
        background-color: var(--tm-color-primary);
        color: var(--tm-bg-surface);
    }

    [b-1m4mnnvma2] .team-name {
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .team-description {
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .team-stats {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .stat-value {
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .stat-label {
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .content-grid {
        background-color: var(--tm-bg-surface);
    }

    [b-1m4mnnvma2] .section-card {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .section-header {
        border-bottom-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .section-title {
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .members-list {
        background-color: var(--tm-bg-surface);
    }

    [b-1m4mnnvma2] .member-item {
        border-bottom-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .member-item:hover {
        background-color: var(--tm-bg-surface-secondary);
    }

    [b-1m4mnnvma2] .member-avatar {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .member-avatar-placeholder {
        background-color: var(--tm-color-primary);
        color: var(--tm-bg-surface);
    }

    [b-1m4mnnvma2] .member-name {
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .member-email {
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .role-badge {
        border-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .role-badge.owner {
        background-color: rgba(var(--tm-color-primary-rgb), 0.2);
        color: var(--tm-color-primary);
    }

    [b-1m4mnnvma2] .role-badge.admin {
        background-color: rgba(255, 152, 0, 0.2);
        color: #ff9800;
    }

    [b-1m4mnnvma2] .role-badge.member {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .recent-activity {
        background-color: var(--tm-bg-surface);
    }

    [b-1m4mnnvma2] .activity-item {
        border-bottom-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .activity-icon {
        background-color: var(--tm-bg-surface-secondary);
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .activity-text {
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .activity-time {
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .empty-state {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-secondary);
    }

    [b-1m4mnnvma2] .quick-actions {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .action-item {
        border-bottom-color: var(--tm-border-color);
    }

    [b-1m4mnnvma2] .action-item:hover {
        background-color: var(--tm-bg-surface);
    }

    [b-1m4mnnvma2] .action-text {
        color: var(--tm-text-primary);
    }

    [b-1m4mnnvma2] .action-description {
        color: var(--tm-text-secondary);
    }
}
/* /Pages/Teams/TeamMembersPage.razor.rz.scp.css */
/* Dark mode styles for TeamMembersPage */

@media (prefers-color-scheme: dark) {
    [b-jsetsc9ve2] .page-container {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .page-header {
        border-bottom-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .page-title {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .page-description {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .members-card {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .card-header {
        border-bottom-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .card-title {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .search-box {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .search-box:focus {
        border-color: var(--tm-color-primary);
    }

    [b-jsetsc9ve2] .search-box::placeholder {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .members-table {
        background-color: var(--tm-bg-surface);
    }

    [b-jsetsc9ve2] .table-header {
        background-color: var(--tm-bg-surface-secondary);
        border-bottom-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .table-header-cell {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .table-row {
        border-bottom-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .table-row:hover {
        background-color: var(--tm-bg-surface-secondary);
    }

    [b-jsetsc9ve2] .member-cell {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .member-avatar {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .member-avatar-placeholder {
        background-color: var(--tm-color-primary);
        color: var(--tm-bg-surface);
    }

    [b-jsetsc9ve2] .member-info {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .member-name {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .member-email {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .role-cell {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .role-badge {
        border-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .role-badge.owner {
        background-color: rgba(var(--tm-color-primary-rgb), 0.2);
        color: var(--tm-color-primary);
    }

    [b-jsetsc9ve2] .role-badge.admin {
        background-color: rgba(255, 152, 0, 0.2);
        color: #ff9800;
    }

    [b-jsetsc9ve2] .role-badge.member {
        background-color: var(--tm-bg-surface-secondary);
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .role-select {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .joined-date {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .actions-cell {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .pending-invitations {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .invitation-item {
        border-bottom-color: var(--tm-border-color);
    }

    [b-jsetsc9ve2] .invitation-email {
        color: var(--tm-text-primary);
    }

    [b-jsetsc9ve2] .invitation-status {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .empty-members {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .breadcrumb {
        color: var(--tm-text-secondary);
    }

    [b-jsetsc9ve2] .breadcrumb a {
        color: var(--tm-color-primary);
    }

    [b-jsetsc9ve2] .breadcrumb-current {
        color: var(--tm-text-primary);
    }
}
/* /Pages/Teams/TeamSettingsPage.razor.rz.scp.css */
/* Dark mode styles for TeamSettingsPage */

@media (prefers-color-scheme: dark) {
    [b-58vidl39yf] .page-container {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .page-header {
        border-bottom-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .page-title {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .page-description {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .settings-layout {
        background-color: var(--tm-bg-surface);
    }

    [b-58vidl39yf] .settings-nav {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .nav-item {
        color: var(--tm-text-secondary);
        border-left-color: transparent;
    }

    [b-58vidl39yf] .nav-item:hover {
        background-color: var(--tm-bg-surface);
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .nav-item.active {
        background-color: rgba(var(--tm-color-primary-rgb), 0.1);
        color: var(--tm-color-primary);
        border-left-color: var(--tm-color-primary);
    }

    [b-58vidl39yf] .settings-content {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .settings-section {
        border-bottom-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .section-title {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .section-description {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .form-group label {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .form-control {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .form-control:focus {
        border-color: var(--tm-color-primary);
        box-shadow: 0 0 0 2px rgba(var(--tm-color-primary-rgb), 0.2);
    }

    [b-58vidl39yf] .form-control::placeholder {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .form-textarea {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .avatar-upload {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .avatar-preview {
        background-color: var(--tm-bg-surface-secondary);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .avatar-placeholder {
        background-color: var(--tm-color-primary);
        color: var(--tm-bg-surface);
    }

    [b-58vidl39yf] .upload-hint {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .visibility-options {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .visibility-option {
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .visibility-option:hover {
        border-color: var(--tm-color-primary);
    }

    [b-58vidl39yf] .visibility-option.selected {
        border-color: var(--tm-color-primary);
        background-color: rgba(var(--tm-color-primary-rgb), 0.1);
    }

    [b-58vidl39yf] .visibility-option-title {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .visibility-option-description {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .danger-zone {
        background-color: rgba(244, 67, 54, 0.1);
        border-color: #f44336;
    }

    [b-58vidl39yf] .danger-zone-title {
        color: #f44336;
    }

    [b-58vidl39yf] .danger-zone-description {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .validation-message {
        color: #f44336;
    }

    [b-58vidl39yf] .form-actions {
        border-top-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .breadcrumb {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .breadcrumb a {
        color: var(--tm-color-primary);
    }

    [b-58vidl39yf] .breadcrumb-current {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .notification-preferences {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .preference-item {
        border-bottom-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .preference-label {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .preference-description {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .integration-settings {
        background-color: var(--tm-bg-surface);
        border-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .integration-item {
        border-bottom-color: var(--tm-border-color);
    }

    [b-58vidl39yf] .integration-name {
        color: var(--tm-text-primary);
    }

    [b-58vidl39yf] .integration-status {
        color: var(--tm-text-secondary);
    }

    [b-58vidl39yf] .integration-status.connected {
        color: #4caf50;
    }
}
/* /Pages/Templates/CreateEditTemplatePage.razor.rz.scp.css */
/* CreateEditTemplatePage.razor.css - Dark Mode Support */

.page-header[b-h2qtkrswj3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-h2qtkrswj3] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.template-form[b-h2qtkrswj3] {
    max-width: 900px;
}

.form-section[b-h2qtkrswj3] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section :deep(.tm-form-field)[b-h2qtkrswj3] {
    margin-bottom: 1rem;
}

.form-section :deep(.tm-form-field:last-child)[b-h2qtkrswj3] {
    margin-bottom: 0;
}

.field-hint[b-h2qtkrswj3] {
    display: block;
    font-size: 0.75rem;
    color: var(--tm-text-muted, #64748b);
    margin-top: 0.25rem;
}

/* Variables Input Section */
.variables-input[b-h2qtkrswj3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.variable-tag-input[b-h2qtkrswj3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 0.875rem;
    color: var(--tm-color-primary, #3b82f6);
    width: fit-content;
}

.variable-tag-input code[b-h2qtkrswj3] {
    color: var(--tm-color-primary, #3b82f6);
    font-weight: 500;
}

.variable-add[b-h2qtkrswj3] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.variable-add :deep(.tm-text-input)[b-h2qtkrswj3] {
    flex: 1;
}

/* Prompt Template Editor */
:deep(.tm-text-area)[b-h2qtkrswj3] {
    font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    color: var(--tm-text-primary, #0f172a);
}

:deep(.tm-text-area:focus)[b-h2qtkrswj3] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-color-primary, #3b82f6);
}

/* Validation Summary */
:deep(.validation-summary)[b-h2qtkrswj3] {
    background-color: var(--tm-color-danger-light, #fef2f2);
    border: 1px solid var(--tm-color-danger, #ef4444);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--tm-color-danger, #dc2626);
}

:deep(.validation-summary ul)[b-h2qtkrswj3] {
    margin: 0;
    padding-left: 1.5rem;
}

:deep(.validation-message)[b-h2qtkrswj3] {
    color: var(--tm-color-danger, #dc2626);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Form Actions */
.form-actions[b-h2qtkrswj3] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Variable Editor Integration */
:deep(.template-variable-editor)[b-h2qtkrswj3] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border-radius: 0.5rem;
    padding: 1rem;
}

@media (max-width: 768px) {
    .page-header[b-h2qtkrswj3] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .form-actions[b-h2qtkrswj3] {
        flex-direction: column-reverse;
    }
    
    .variable-add[b-h2qtkrswj3] {
        flex-direction: column;
    }
}
/* /Pages/Templates/ExecuteTemplatePage.razor.rz.scp.css */
/* ExecuteTemplatePage.razor.css - Dark Mode Support */

.page-header[b-m8gzcwszz1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-m8gzcwszz1] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.loading-state[b-m8gzcwszz1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: var(--tm-text-muted, #64748b);
    background-color: var(--tm-bg-surface, #ffffff);
    border-radius: 0.75rem;
}

.execute-layout[b-m8gzcwszz1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
}

/* Template Info Section */
.template-info[b-m8gzcwszz1] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.template-info h2[b-m8gzcwszz1] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.template-description[b-m8gzcwszz1] {
    color: var(--tm-text-secondary, #475569);
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

/* Section Styling */
.section[b-m8gzcwszz1] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.section h3[b-m8gzcwszz1] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

/* Variables Form */
.variables-form[b-m8gzcwszz1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.variable-input-group[b-m8gzcwszz1] {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.variable-input-group:last-child[b-m8gzcwszz1] {
    padding-bottom: 0;
    border-bottom: none;
}

.variable-input-group :deep(.tm-form-field)[b-m8gzcwszz1] {
    margin-bottom: 0;
}

.field-hint[b-m8gzcwszz1] {
    display: block;
    font-size: 0.75rem;
    color: var(--tm-text-muted, #64748b);
    margin-top: 0.25rem;
}

.required-hint[b-m8gzcwszz1] {
    color: var(--tm-color-danger, #ef4444);
}

/* Boolean Input */
.boolean-input[b-m8gzcwszz1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--tm-text-secondary, #475569);
}

.boolean-input input[type="checkbox"][b-m8gzcwszz1] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--tm-color-primary, #3b82f6);
}

/* Preview Box */
.preview-box[b-m8gzcwszz1] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.preview-box pre[b-m8gzcwszz1] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tm-text-primary, #0f172a);
}

/* Execute Actions */
.execute-actions[b-m8gzcwszz1] {
    display: flex;
    justify-content: center;
}

/* Result Section */
.result-section[b-m8gzcwszz1] {
    border-color: var(--tm-color-success, #10b981);
    border-width: 2px;
}

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

.result-header h3[b-m8gzcwszz1] {
    margin: 0;
    color: var(--tm-color-success, #059669);
}

.result-actions[b-m8gzcwszz1] {
    display: flex;
    gap: 0.5rem;
}

.result-box[b-m8gzcwszz1] {
    background-color: var(--tm-color-success-light, #f0fdf4);
    border: 1px solid var(--tm-color-success-border, #bbf7d0);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.result-box pre[b-m8gzcwszz1] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tm-color-success-dark, #166534);
}

/* Form Fields */
:deep(.tm-text-area)[b-m8gzcwszz1] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    color: var(--tm-text-primary, #0f172a);
}

:deep(.tm-text-input)[b-m8gzcwszz1] {
    background-color: var(--tm-bg-surface-secondary, #f8fafc);
    color: var(--tm-text-primary, #0f172a);
}

@media (max-width: 768px) {
    .page-header[b-m8gzcwszz1] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .result-header[b-m8gzcwszz1] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .result-actions[b-m8gzcwszz1] {
        justify-content: flex-end;
    }
}
/* /Pages/Templates/TemplatesPage.razor.rz.scp.css */
/* TemplatesPage.razor.css - Dark Mode Support */

.page-header[b-m5ssi6j20m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-m5ssi6j20m] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.tabs[b-m5ssi6j20m] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--tm-border-color, #e2e8f0);
}

.tab[b-m5ssi6j20m] {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--tm-text-muted, #64748b);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.tab:hover[b-m5ssi6j20m] {
    color: var(--tm-text-secondary, #475569);
}

.tab.active[b-m5ssi6j20m] {
    color: var(--tm-color-primary, #3b82f6);
    border-bottom-color: var(--tm-color-primary, #3b82f6);
}

.category-filter[b-m5ssi6j20m] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.category-badge[b-m5ssi6j20m] {
    padding: 0.375rem 0.75rem;
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tm-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-badge:hover[b-m5ssi6j20m] {
    background-color: var(--tm-bg-surface, #ffffff);
    border-color: var(--tm-color-primary, #3b82f6);
    color: var(--tm-color-primary, #3b82f6);
}

.category-badge.active[b-m5ssi6j20m] {
    background-color: var(--tm-color-primary, #3b82f6);
    border-color: var(--tm-color-primary, #3b82f6);
    color: white;
}

.loading-state[b-m5ssi6j20m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
    color: var(--tm-text-muted, #64748b);
    background-color: var(--tm-bg-surface, #ffffff);
}

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

.template-card[b-m5ssi6j20m] {
    background-color: var(--tm-bg-surface, #ffffff);
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.template-card:hover[b-m5ssi6j20m] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.template-header[b-m5ssi6j20m] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.template-card h3[b-m5ssi6j20m] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.template-description[b-m5ssi6j20m] {
    color: var(--tm-text-secondary, #475569);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.template-variables[b-m5ssi6j20m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--tm-text-muted, #64748b);
    margin-bottom: 1rem;
}

.variable-tag[b-m5ssi6j20m] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 0.75rem;
    color: var(--tm-color-primary, #3b82f6);
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.template-footer[b-m5ssi6j20m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

.usage-count[b-m5ssi6j20m] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--tm-text-muted, #64748b);
}

.template-actions[b-m5ssi6j20m] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .page-header[b-m5ssi6j20m] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .templates-grid[b-m5ssi6j20m] {
        grid-template-columns: 1fr;
    }
    
    .template-footer[b-m5ssi6j20m] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .template-actions[b-m5ssi6j20m] {
        justify-content: flex-end;
    }
}
/* /Pages/Trash/TrashPage.razor.rz.scp.css */
/* TrashPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-06rfgh250g] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-06rfgh250g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-header h1[b-06rfgh250g] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

.page-header .text-muted[b-06rfgh250g] {
    color: var(--tm-text-secondary, #64748b);
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

[b-06rfgh250g] .empty-trash-btn {
    background-color: var(--tm-color-danger, #ef4444);
    border-color: var(--tm-color-danger, #ef4444);
}

[b-06rfgh250g] .empty-trash-btn:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* Loading State */
.loading-state[b-06rfgh250g] {
    padding: 2rem;
}

/* Trash Table */
.trash-table[b-06rfgh250g] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    overflow: hidden;
    background-color: var(--tm-bg-surface, #ffffff);
}

.trash-table thead th[b-06rfgh250g] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.trash-table tbody td[b-06rfgh250g] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.trash-table tbody tr:last-child td[b-06rfgh250g] {
    border-bottom: none;
}

.trash-table tbody tr:hover[b-06rfgh250g] {
    background: var(--tm-bg-surface-secondary, #f1f5f9);
}

/* Trash Item */
.trash-item[b-06rfgh250g] {
    transition: background-color 0.15s;
}

.trash-item:hover[b-06rfgh250g] {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
}

.item-name[b-06rfgh250g] {
    font-weight: 500;
    color: var(--tm-text-primary, #0f172a);
}

.item-actions[b-06rfgh250g] {
    display: flex;
    gap: 0.5rem;
}

/* Restore Button */
[b-06rfgh250g] .restore-btn {
    background-color: var(--tm-color-success, #22c55e);
    border-color: var(--tm-color-success, #22c55e);
}

[b-06rfgh250g] .restore-btn:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}

/* Delete Permanent Button */
[b-06rfgh250g] .delete-permanent-btn {
    background-color: var(--tm-color-danger, #ef4444);
    border-color: var(--tm-color-danger, #ef4444);
}

[b-06rfgh250g] .delete-permanent-btn:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* Type Badge Colors */
[b-06rfgh250g] .badge-app {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

[b-06rfgh250g] .badge-template {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* Deleted Item Styling */
trash-item td[b-06rfgh250g] {
    color: var(--tm-text-secondary, #64748b);
}

/* Confirm Dialog */
.confirm-dialog-overlay[b-06rfgh250g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirm-dialog[b-06rfgh250g] {
    background: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-radius-lg, 0.5rem);
    max-width: 400px;
    width: 90%;
    padding: 1.5rem;
    box-shadow: var(--tm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.confirm-dialog h3[b-06rfgh250g] {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.confirm-dialog p[b-06rfgh250g] {
    margin: 0 0 1.5rem;
    color: var(--tm-text-secondary, #64748b);
    font-size: 0.875rem;
    line-height: 1.5;
}

.dialog-actions[b-06rfgh250g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Empty State */
[b-06rfgh250g] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: 3rem;
}

@media (max-width: 768px) {
    .page-header[b-06rfgh250g] {
        flex-direction: column;
        gap: 1rem;
    }
    
    [b-06rfgh250g] .empty-trash-btn {
        width: 100%;
    }
    
    .trash-table[b-06rfgh250g] {
        display: block;
        overflow-x: auto;
    }
    
    .item-actions[b-06rfgh250g] {
        flex-direction: column;
    }
}
/* /Pages/Webhooks/WebhooksPage.razor.rz.scp.css */
/* WebhooksPage.razor.css - Dark Mode Support with Tempo.Blazor Design Tokens */

.page-container[b-mnqrviebmz] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--tm-bg-surface, #ffffff);
}

.page-header[b-mnqrviebmz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-mnqrviebmz] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tm-text-primary, #0f172a);
}

[b-mnqrviebmz] .create-webhook-btn {
    background-color: var(--tm-color-primary, #3b82f6);
    border-color: var(--tm-color-primary, #3b82f6);
}

/* Loading State */
.loading-state[b-mnqrviebmz] {
    padding: 2rem;
}

/* Webhooks Table */
.webhooks-table[b-mnqrviebmz] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-lg, 0.5rem);
    overflow: hidden;
    background-color: var(--tm-bg-surface, #ffffff);
}

.webhooks-table thead th[b-mnqrviebmz] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tm-text-secondary, #64748b);
    background: var(--tm-bg-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
}

.webhooks-table tbody td[b-mnqrviebmz] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--tm-border-color, #e2e8f0);
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--tm-text-primary, #0f172a);
}

.webhooks-table tbody tr:last-child td[b-mnqrviebmz] {
    border-bottom: none;
}

.webhooks-table tbody tr:hover[b-mnqrviebmz] {
    background: var(--tm-bg-surface-secondary, #f1f5f9);
}

/* Webhook Row */
.webhook-row[b-mnqrviebmz] {
    transition: background-color 0.15s;
}

.webhook-url[b-mnqrviebmz] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--tm-text-primary, #0f172a);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webhook-actions[b-mnqrviebmz] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

/* Test Button */
[b-mnqrviebmz] .test-webhook-btn {
    color: var(--tm-color-primary, #3b82f6);
}

[b-mnqrviebmz] .test-webhook-btn:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

/* Delete Button */
[b-mnqrviebmz] .delete-webhook-btn {
    color: var(--tm-color-danger, #ef4444);
}

[b-mnqrviebmz] .delete-webhook-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Create Webhook Form Overlay */
.create-webhook-overlay[b-mnqrviebmz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.create-webhook-form[b-mnqrviebmz] {
    background: var(--tm-bg-surface, #ffffff);
    border-radius: var(--tm-radius-lg, 0.5rem);
    max-width: 500px;
    width: 90%;
    padding: 1.5rem;
    box-shadow: var(--tm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border: 1px solid var(--tm-border-color, #e2e8f0);
}

.create-webhook-form h3[b-mnqrviebmz] {
    margin: 0 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
}

.form-field[b-mnqrviebmz] {
    margin-bottom: 1rem;
}

.form-field label[b-mnqrviebmz] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tm-text-primary, #0f172a);
    margin-bottom: 0.375rem;
}

.form-field[b-mnqrviebmz]  input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--tm-border-color, #e2e8f0);
    border-radius: var(--tm-radius-md, 0.375rem);
    background: var(--tm-bg-surface, #ffffff);
    color: var(--tm-text-primary, #0f172a);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field[b-mnqrviebmz]  input:focus {
    outline: none;
    border-color: var(--tm-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-field[b-mnqrviebmz]  input::placeholder {
    color: var(--tm-text-secondary, #64748b);
}

.form-actions[b-mnqrviebmz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tm-border-color, #e2e8f0);
}

/* Status Badges */
.status-active[b-mnqrviebmz] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-inactive[b-mnqrviebmz] {
    background-color: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

/* Empty State */
[b-mnqrviebmz] .tm-empty-state {
    background-color: var(--tm-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tm-radius-lg, 0.5rem);
    padding: 3rem;
}

/* Events Badges */
.webhooks-table tbody td .tm-badge[b-mnqrviebmz] {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .page-header[b-mnqrviebmz] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .webhooks-table[b-mnqrviebmz] {
        display: block;
        overflow-x: auto;
    }
    
    .webhook-actions[b-mnqrviebmz] {
        flex-direction: column;
    }
}