/* /Components/Audio/AudioCard.razor.rz.scp.css */
/* =============================================
   AUDIO CARD COMPONENT
   ============================================= */

.audio-card[b-gsyifioc1j] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.audio-card:hover[b-gsyifioc1j] {
    border-color: var(--zinc-300);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .audio-card:hover[b-gsyifioc1j] {
    border-color: var(--zinc-700);
}

.audio-card-selected[b-gsyifioc1j] {
    border-color: var(--primary);
    background-color: var(--primary-50);
}

[data-theme="dark"] .audio-card-selected[b-gsyifioc1j] {
    background-color: rgba(139, 92, 246, 0.1);
}

.audio-card-playing[b-gsyifioc1j] {
    border-color: var(--primary);
}

/* Checkbox */
.audio-card-checkbox[b-gsyifioc1j] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
}

.checkbox[b-gsyifioc1j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--background);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.checkbox:hover[b-gsyifioc1j] {
    border-color: var(--primary);
}

.checkbox-checked[b-gsyifioc1j] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Icon/Play button */
.audio-card-icon[b-gsyifioc1j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    cursor: pointer;
}

.audio-card-icon-bg[b-gsyifioc1j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background-color: var(--muted);
    border-radius: var(--radius-lg);
    color: var(--muted-foreground);
    transition: all var(--transition-fast);
}

.audio-card:hover .audio-card-icon-bg[b-gsyifioc1j] {
    background-color: var(--primary);
    color: white;
}

.audio-card-playing .audio-card-icon-bg[b-gsyifioc1j] {
    background-color: var(--primary);
    color: white;
}

.audio-card-play-label[b-gsyifioc1j] {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.audio-card:hover .audio-card-play-label[b-gsyifioc1j] {
    opacity: 1;
}

/* Info */
.audio-card-info[b-gsyifioc1j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-1);
}

.audio-card-name[b-gsyifioc1j] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.audio-card-meta[b-gsyifioc1j] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.audio-card-format[b-gsyifioc1j] {
    padding: 2px 6px;
    background-color: var(--muted);
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
}

.audio-card-duration[b-gsyifioc1j] {
    font-feature-settings: "tnum";
}

/* Tags */
.audio-card-tags[b-gsyifioc1j] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.audio-card-tags-more[b-gsyifioc1j] {
    padding: 2px 6px;
    font-size: 11px;
    color: var(--muted-foreground);
    background-color: var(--muted);
    border-radius: var(--radius-full);
}

/* Actions */
.audio-card-actions[b-gsyifioc1j] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.audio-card:hover .audio-card-actions[b-gsyifioc1j] {
    opacity: 1;
}

.audio-card-action[b-gsyifioc1j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background-color: var(--background);
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.audio-card-action:hover[b-gsyifioc1j] {
    background-color: var(--accent);
    color: var(--foreground);
}

.audio-card-action-danger:hover[b-gsyifioc1j] {
    background-color: var(--error-100);
    color: var(--error-600);
}

[data-theme="dark"] .audio-card-action-danger:hover[b-gsyifioc1j] {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-500);
}

/* Date */
.audio-card-date[b-gsyifioc1j] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    text-align: center;
}
/* /Components/Audio/AudioFilters.razor.rz.scp.css */
/* =============================================
   AUDIO FILTERS COMPONENT
   ============================================= */

.audio-filters[b-4pbgbvh3x0] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Search input */
.filter-search[b-4pbgbvh3x0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    height: 40px;
    padding: 0 var(--space-3);
    background-color: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-search:focus-within[b-4pbgbvh3x0] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.filter-search svg[b-4pbgbvh3x0] {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.filter-search-input[b-4pbgbvh3x0] {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--foreground);
    outline: none;
}

.filter-search-input[b-4pbgbvh3x0]::placeholder {
    color: var(--muted-foreground);
}

.filter-search-clear[b-4pbgbvh3x0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-search-clear:hover[b-4pbgbvh3x0] {
    background-color: var(--muted);
    color: var(--foreground);
}

/* Tags filter */
.filter-tags[b-4pbgbvh3x0] {
    min-width: 200px;
    max-width: 280px;
}

/* Sort dropdown */
.filter-sort[b-4pbgbvh3x0] {
    flex-shrink: 0;
}

.filter-sort-select[b-4pbgbvh3x0] {
    height: 40px;
    padding: 0 var(--space-8) 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-sort-select:focus[b-4pbgbvh3x0] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.filter-sort-select:hover[b-4pbgbvh3x0] {
    border-color: var(--zinc-400);
}

/* Clear all button */
.filter-clear-all[b-4pbgbvh3x0] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--muted-foreground);
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-clear-all:hover[b-4pbgbvh3x0] {
    color: var(--error-600);
    border-color: var(--error-300);
    background-color: var(--error-50);
}

[data-theme="dark"] .filter-clear-all:hover[b-4pbgbvh3x0] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--error-800);
}

/* Responsive */
@media (max-width: 768px) {
    .audio-filters[b-4pbgbvh3x0] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-search[b-4pbgbvh3x0] {
        max-width: none;
    }

    .filter-tags[b-4pbgbvh3x0] {
        max-width: none;
    }

    .filter-sort[b-4pbgbvh3x0] {
        width: 100%;
    }

    .filter-sort-select[b-4pbgbvh3x0] {
        width: 100%;
    }
}
/* /Components/Audio/FolderModal.razor.rz.scp.css */
/* =============================================
   FOLDER MODAL COMPONENT
   ============================================= */

.custom-modal-overlay[b-rfpusa22z2] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    padding: var(--space-4);
}

.custom-modal[b-rfpusa22z2] {
    width: 100%;
    max-width: 420px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: modal-enter-b-rfpusa22z2 0.2s ease-out;
}

@keyframes modal-enter-b-rfpusa22z2 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-modal-header[b-rfpusa22z2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.custom-modal-title[b-rfpusa22z2] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--foreground);
    margin: 0;
}

.custom-modal-close[b-rfpusa22z2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.custom-modal-close:hover[b-rfpusa22z2] {
    background-color: var(--muted);
    color: var(--foreground);
}

.custom-modal-close:disabled[b-rfpusa22z2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-modal-body[b-rfpusa22z2] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.custom-modal-footer[b-rfpusa22z2] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

/* Form fields */
.form-field[b-rfpusa22z2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label[b-rfpusa22z2] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
}

.form-input[b-rfpusa22z2] {
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus[b-rfpusa22z2] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-input:disabled[b-rfpusa22z2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-input-error[b-rfpusa22z2] {
    border-color: var(--error-500);
}

.form-input-error:focus[b-rfpusa22z2] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-error[b-rfpusa22z2] {
    font-size: var(--text-xs);
    color: var(--error-500);
}

/* Buttons */
.btn-primary[b-rfpusa22z2],
.btn-secondary[b-rfpusa22z2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary[b-rfpusa22z2] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-primary:hover:not(:disabled)[b-rfpusa22z2] {
    opacity: 0.9;
}

.btn-primary:disabled[b-rfpusa22z2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-rfpusa22z2] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:hover:not(:disabled)[b-rfpusa22z2] {
    opacity: 0.8;
}

.btn-secondary:disabled[b-rfpusa22z2] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner */
.spinner-small[b-rfpusa22z2] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-rfpusa22z2 0.6s linear infinite;
}

@keyframes spin-b-rfpusa22z2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Audio/FolderTree.razor.rz.scp.css */
/* =============================================
   FOLDER TREE COMPONENT
   ============================================= */

.folder-tree[b-94g3jbj83x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
}

.folder-item[b-94g3jbj83x] {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    user-select: none;
}

.folder-item:hover[b-94g3jbj83x] {
    background-color: var(--accent);
}

.folder-item-selected[b-94g3jbj83x] {
    background-color: var(--primary-100);
    color: var(--primary-700);
}

[data-theme="dark"] .folder-item-selected[b-94g3jbj83x] {
    background-color: var(--primary-900);
    color: var(--primary-200);
}

.folder-item-content[b-94g3jbj83x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.folder-icon[b-94g3jbj83x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.folder-item-selected .folder-icon[b-94g3jbj83x] {
    color: var(--primary-600);
}

[data-theme="dark"] .folder-item-selected .folder-icon[b-94g3jbj83x] {
    color: var(--primary-400);
}

.folder-name[b-94g3jbj83x] {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-count[b-94g3jbj83x] {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background-color: var(--muted);
    color: var(--muted-foreground);
    border-radius: var(--radius-full);
}

.folder-item-selected .folder-count[b-94g3jbj83x] {
    background-color: var(--primary-200);
    color: var(--primary-700);
}

[data-theme="dark"] .folder-item-selected .folder-count[b-94g3jbj83x] {
    background-color: var(--primary-800);
    color: var(--primary-200);
}

.folder-actions[b-94g3jbj83x] {
    display: none;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}

.folder-item:hover .folder-actions[b-94g3jbj83x] {
    display: flex;
}

.folder-action-btn[b-94g3jbj83x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.folder-action-btn:hover[b-94g3jbj83x] {
    background-color: var(--muted);
    color: var(--foreground);
}

.folder-action-delete:hover[b-94g3jbj83x] {
    background-color: var(--error-100);
    color: var(--error-600);
}

[data-theme="dark"] .folder-action-delete:hover[b-94g3jbj83x] {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-500);
}

/* Toggle button */
.folder-toggle[b-94g3jbj83x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.folder-toggle:hover[b-94g3jbj83x] {
    background-color: var(--muted);
}

.folder-toggle-expanded[b-94g3jbj83x] {
    transform: rotate(90deg);
}

.folder-toggle-spacer[b-94g3jbj83x] {
    width: 20px;
    flex-shrink: 0;
}

/* Tree node with level indentation */
.folder-node[b-94g3jbj83x] {
    padding-left: calc(var(--level) * var(--space-4));
}

.folder-children[b-94g3jbj83x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Add folder button */
.folder-add-btn[b-94g3jbj83x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.folder-add-btn:hover[b-94g3jbj83x] {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--primary-50);
}

[data-theme="dark"] .folder-add-btn:hover[b-94g3jbj83x] {
    background-color: rgba(139, 92, 246, 0.1);
}
/* /Components/Audio/FolderTreeNode.razor.rz.scp.css */
/* FolderTreeNode uses the same styles as FolderTree */
/* Styles are inherited from parent component */
/* /Components/Audio/TagBadge.razor.rz.scp.css */
/* =============================================
   TAG BADGE COMPONENT
   ============================================= */

.tag-badge[b-i9i1rtb2p5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    background-color: var(--tag-bg);
    color: var(--tag-color);
    border-radius: var(--radius-full);
    font-weight: var(--font-medium);
    white-space: nowrap;
    user-select: none;
}

/* Sizes */
.tag-badge-sm[b-i9i1rtb2p5] {
    font-size: 11px;
    padding: 2px 8px;
}

.tag-badge-md[b-i9i1rtb2p5] {
    font-size: var(--text-xs);
    padding: 4px 10px;
}

.tag-badge-lg[b-i9i1rtb2p5] {
    font-size: var(--text-sm);
    padding: 6px 12px;
}

/* Dot indicator */
.tag-dot[b-i9i1rtb2p5] {
    width: 6px;
    height: 6px;
    background-color: var(--tag-color);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.tag-badge-md .tag-dot[b-i9i1rtb2p5] {
    width: 7px;
    height: 7px;
}

.tag-badge-lg .tag-dot[b-i9i1rtb2p5] {
    width: 8px;
    height: 8px;
}

/* Name */
.tag-name[b-i9i1rtb2p5] {
    line-height: 1.2;
}

/* Remove button */
.tag-remove[b-i9i1rtb2p5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: 2px;
    margin-right: -4px;
    border: none;
    background: transparent;
    color: var(--tag-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.tag-remove:hover[b-i9i1rtb2p5] {
    opacity: 1;
    background-color: var(--tag-color);
    color: white;
}

.tag-badge-md .tag-remove[b-i9i1rtb2p5] {
    width: 16px;
    height: 16px;
}

.tag-badge-lg .tag-remove[b-i9i1rtb2p5] {
    width: 18px;
    height: 18px;
}
/* /Components/Audio/TagModal.razor.rz.scp.css */
/* =============================================
   TAG MODAL COMPONENT
   ============================================= */

.custom-modal-overlay[b-shaistgf3s] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    padding: var(--space-4);
}

.custom-modal[b-shaistgf3s] {
    width: 100%;
    max-width: 420px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: modal-enter-b-shaistgf3s 0.2s ease-out;
}

@keyframes modal-enter-b-shaistgf3s {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-modal-header[b-shaistgf3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.custom-modal-title[b-shaistgf3s] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--foreground);
    margin: 0;
}

.custom-modal-close[b-shaistgf3s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.custom-modal-close:hover[b-shaistgf3s] {
    background-color: var(--muted);
    color: var(--foreground);
}

.custom-modal-close:disabled[b-shaistgf3s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-modal-body[b-shaistgf3s] {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.custom-modal-footer[b-shaistgf3s] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

/* Form fields */
.form-field[b-shaistgf3s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label[b-shaistgf3s] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
}

.form-input[b-shaistgf3s] {
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus[b-shaistgf3s] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-input:disabled[b-shaistgf3s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-input-error[b-shaistgf3s] {
    border-color: var(--error-500);
}

.form-input-error:focus[b-shaistgf3s] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-error[b-shaistgf3s] {
    font-size: var(--text-xs);
    color: var(--error-500);
}

/* Color picker */
.color-picker[b-shaistgf3s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.color-option[b-shaistgf3s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid transparent;
    background-color: var(--color);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: white;
    transition: all var(--transition-fast);
}

.color-option:hover[b-shaistgf3s] {
    transform: scale(1.1);
}

.color-option:disabled[b-shaistgf3s] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.color-option-selected[b-shaistgf3s] {
    border-color: var(--foreground);
    box-shadow: 0 0 0 2px var(--background);
}

/* Tag preview */
.tag-preview[b-shaistgf3s] {
    padding: var(--space-3);
    background-color: var(--muted);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
}

/* Buttons */
.btn-primary[b-shaistgf3s],
.btn-secondary[b-shaistgf3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary[b-shaistgf3s] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-primary:hover:not(:disabled)[b-shaistgf3s] {
    opacity: 0.9;
}

.btn-primary:disabled[b-shaistgf3s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-shaistgf3s] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:hover:not(:disabled)[b-shaistgf3s] {
    opacity: 0.8;
}

.btn-secondary:disabled[b-shaistgf3s] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner */
.spinner-small[b-shaistgf3s] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-shaistgf3s 0.6s linear infinite;
}

@keyframes spin-b-shaistgf3s {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Audio/TagSelector.razor.rz.scp.css */
/* =============================================
   TAG SELECTOR COMPONENT
   ============================================= */

.tag-selector[b-dgvypexmxb] {
    position: relative;
    width: 100%;
}

/* Input area */
.tag-selector-input[b-dgvypexmxb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tag-selector-input:hover[b-dgvypexmxb] {
    border-color: var(--zinc-400);
}

.tag-selector-open .tag-selector-input[b-dgvypexmxb] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.tag-selector-tags[b-dgvypexmxb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    flex: 1;
}

.tag-selector-placeholder[b-dgvypexmxb] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    flex: 1;
}

.tag-selector-arrow[b-dgvypexmxb] {
    display: flex;
    align-items: center;
    color: var(--muted-foreground);
    transition: transform var(--transition-fast);
}

.tag-selector-open .tag-selector-arrow[b-dgvypexmxb] {
    transform: rotate(180deg);
}

/* Dropdown */
.tag-selector-dropdown[b-dgvypexmxb] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    max-height: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Search */
.tag-selector-search[b-dgvypexmxb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.tag-selector-search svg[b-dgvypexmxb] {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.tag-selector-search-input[b-dgvypexmxb] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--foreground);
    outline: none;
}

.tag-selector-search-input[b-dgvypexmxb]::placeholder {
    color: var(--muted-foreground);
}

/* Options */
.tag-selector-options[b-dgvypexmxb] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1);
}

.tag-selector-option[b-dgvypexmxb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.tag-selector-option:hover[b-dgvypexmxb] {
    background-color: var(--accent);
}

.tag-selector-option-selected[b-dgvypexmxb] {
    background-color: var(--primary-50);
}

[data-theme="dark"] .tag-selector-option-selected[b-dgvypexmxb] {
    background-color: rgba(139, 92, 246, 0.1);
}

.tag-selector-option-checkbox[b-dgvypexmxb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--background);
    flex-shrink: 0;
}

.tag-selector-option-selected .tag-selector-option-checkbox[b-dgvypexmxb] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.tag-selector-option-count[b-dgvypexmxb] {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

/* Empty state */
.tag-selector-empty[b-dgvypexmxb] {
    padding: var(--space-4);
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Create new option */
.tag-selector-create[b-dgvypexmxb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.tag-selector-create:hover[b-dgvypexmxb] {
    background-color: var(--primary-50);
}

[data-theme="dark"] .tag-selector-create:hover[b-dgvypexmxb] {
    background-color: rgba(139, 92, 246, 0.1);
}
/* /Components/ConfirmModal.razor.rz.scp.css */
/* =============================================
   CONFIRM MODAL COMPONENT - shadcn/ui style
   ============================================= */

.confirm-modal-overlay[b-4tvumpz99k] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop, 1040);
    padding: var(--space-4, 1rem);
}

.confirm-modal[b-4tvumpz99k] {
    width: 100%;
    max-width: 400px;
    background-color: var(--card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    animation: confirm-modal-enter-b-4tvumpz99k 0.2s ease-out;
}

@keyframes confirm-modal-enter-b-4tvumpz99k {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Header */
.confirm-modal-header[b-4tvumpz99k] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-5, 1.25rem);
    padding-bottom: 0;
}

.confirm-modal-icon[b-4tvumpz99k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-full, 50%);
}

.confirm-modal-icon svg[b-4tvumpz99k] {
    width: 20px;
    height: 20px;
}

/* Icon type colors */
.confirm-modal-icon.icon-danger[b-4tvumpz99k] {
    background-color: var(--error-50, #fef2f2);
    color: var(--error-500, #ef4444);
}

.confirm-modal-icon.icon-warning[b-4tvumpz99k] {
    background-color: #fffbeb;
    color: #f59e0b;
}

.confirm-modal-icon.icon-success[b-4tvumpz99k] {
    background-color: #f0fdf4;
    color: #22c55e;
}

.confirm-modal-icon.icon-info[b-4tvumpz99k] {
    background-color: #eff6ff;
    color: #3b82f6;
}

.confirm-modal-title[b-4tvumpz99k] {
    flex: 1;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    color: var(--foreground, #111827);
    margin: 0;
    padding-top: var(--space-2, 0.5rem);
}

.confirm-modal-close[b-4tvumpz99k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground, #6b7280);
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
}

.confirm-modal-close:hover[b-4tvumpz99k] {
    background-color: var(--muted, #f3f4f6);
    color: var(--foreground, #111827);
}

.confirm-modal-close:disabled[b-4tvumpz99k] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Body */
.confirm-modal-body[b-4tvumpz99k] {
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    padding-left: calc(var(--space-5, 1.25rem) + 40px + var(--space-3, 0.75rem));
}

.confirm-modal-message[b-4tvumpz99k] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--muted-foreground, #6b7280);
    line-height: 1.5;
    margin: 0;
}

/* Footer */
.confirm-modal-footer[b-4tvumpz99k] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-top: 1px solid var(--border, #e5e7eb);
}

/* Buttons */
.btn-secondary[b-4tvumpz99k],
.btn-confirm[b-4tvumpz99k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    height: 36px;
    padding: 0 var(--space-4, 1rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    border: none;
    border-radius: var(--radius-md, 0.375rem);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
}

.btn-secondary[b-4tvumpz99k] {
    background-color: var(--secondary, #f3f4f6);
    color: var(--secondary-foreground, #374151);
}

.btn-secondary:hover:not(:disabled)[b-4tvumpz99k] {
    background-color: var(--muted, #e5e7eb);
}

.btn-secondary:disabled[b-4tvumpz99k] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Danger button */
.btn-confirm.btn-danger[b-4tvumpz99k] {
    background-color: var(--error-500, #ef4444);
    color: white;
}

.btn-confirm.btn-danger:hover:not(:disabled)[b-4tvumpz99k] {
    background-color: var(--error-600, #dc2626);
}

/* Warning button */
.btn-confirm.btn-warning[b-4tvumpz99k] {
    background-color: #f59e0b;
    color: white;
}

.btn-confirm.btn-warning:hover:not(:disabled)[b-4tvumpz99k] {
    background-color: #d97706;
}

/* Success button */
.btn-confirm.btn-success[b-4tvumpz99k] {
    background-color: #22c55e;
    color: white;
}

.btn-confirm.btn-success:hover:not(:disabled)[b-4tvumpz99k] {
    background-color: #16a34a;
}

/* Primary button (default) */
.btn-confirm.btn-primary[b-4tvumpz99k] {
    background-color: var(--primary, #8b5cf6);
    color: var(--primary-foreground, white);
}

.btn-confirm.btn-primary:hover:not(:disabled)[b-4tvumpz99k] {
    opacity: 0.9;
}

.btn-confirm:disabled[b-4tvumpz99k] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner */
.spinner-small[b-4tvumpz99k] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-4tvumpz99k 0.6s linear infinite;
}

@keyframes spin-b-4tvumpz99k {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 480px) {
    .confirm-modal[b-4tvumpz99k] {
        margin: var(--space-4, 1rem);
        max-width: calc(100% - 2rem);
    }

    .confirm-modal-header[b-4tvumpz99k] {
        flex-wrap: wrap;
    }

    .confirm-modal-body[b-4tvumpz99k] {
        padding-left: var(--space-5, 1.25rem);
    }

    .confirm-modal-footer[b-4tvumpz99k] {
        flex-direction: column-reverse;
    }

    .btn-secondary[b-4tvumpz99k],
    .btn-confirm[b-4tvumpz99k] {
        width: 100%;
    }
}
/* /Components/Layout/EmptyState.razor.rz.scp.css */
/* =============================================
   EMPTY STATE COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-empty-state[b-pip6ayf7eg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    gap: var(--space-4);
}

.ui-empty-state-icon[b-pip6ayf7eg] {
    font-size: 4rem;
    line-height: 1;
    opacity: 0.4;
}

.ui-empty-state-content[b-pip6ayf7eg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 400px;
}

.ui-empty-state-title[b-pip6ayf7eg] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--foreground);
    margin: 0;
}

.ui-empty-state-description[b-pip6ayf7eg] {
    font-size: var(--text-sm);
    color: var(--foreground-muted);
    margin: 0;
    line-height: var(--leading-relaxed);
}

.ui-empty-state-actions[b-pip6ayf7eg] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
/* /Components/Layout/LoadingState.razor.rz.scp.css */
/* =============================================
   LOADING STATE COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-loading-state[b-7wfjwe0gxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
}

.ui-loading-state-fullscreen[b-7wfjwe0gxj] {
    position: fixed;
    inset: 0;
    background-color: var(--background);
    z-index: var(--z-modal);
}

.ui-loading-spinner[b-7wfjwe0gxj] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin-b-7wfjwe0gxj 0.8s linear infinite;
}

.ui-loading-message[b-7wfjwe0gxj] {
    font-size: var(--text-sm);
    color: var(--foreground-muted);
    margin: 0;
}

@keyframes spin-b-7wfjwe0gxj {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Layout/PageHeader.razor.rz.scp.css */
/* =============================================
   PAGE HEADER COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-page-header[b-g3zifhvzhd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.ui-page-header-content[b-g3zifhvzhd] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.ui-page-header-icon[b-g3zifhvzhd] {
    font-size: var(--text-3xl);
    line-height: 1;
}

.ui-page-header-text[b-g3zifhvzhd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ui-page-header-title[b-g3zifhvzhd] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--foreground);
    margin: 0;
    line-height: var(--leading-tight);
}

.ui-page-header-subtitle[b-g3zifhvzhd] {
    font-size: var(--text-base);
    color: var(--foreground-muted);
    margin: 0;
    line-height: var(--leading-normal);
}

.ui-page-header-actions[b-g3zifhvzhd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .ui-page-header[b-g3zifhvzhd] {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-page-header-title[b-g3zifhvzhd] {
        font-size: var(--text-xl);
    }

    .ui-page-header-subtitle[b-g3zifhvzhd] {
        font-size: var(--text-sm);
    }

    .ui-page-header-actions[b-g3zifhvzhd] {
        width: 100%;
        justify-content: stretch;
    }

    .ui-page-header-actions > *[b-g3zifhvzhd] {
        flex: 1;
    }
}
/* /Components/PatientCard.razor.rz.scp.css */
/* Patient Card */
.patient-card[b-r88puz7rdv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.patient-card:hover[b-r88puz7rdv] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.patient-card.status-inactive[b-r88puz7rdv] {
    opacity: 0.8;
}

.patient-card.status-archived[b-r88puz7rdv] {
    opacity: 0.6;
}

/* Patient Avatar */
.patient-avatar[b-r88puz7rdv] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.status-inactive .patient-avatar[b-r88puz7rdv] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.status-archived .patient-avatar[b-r88puz7rdv] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

/* Patient Info */
.patient-info[b-r88puz7rdv] {
    flex: 1;
    min-width: 0;
}

.patient-name[b-r88puz7rdv] {
    display: block;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-meta[b-r88puz7rdv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-r88puz7rdv] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.meta-icon[b-r88puz7rdv] {
    font-size: 0.8rem;
}

/* Patient Stats */
.patient-stats[b-r88puz7rdv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.stat-item[b-r88puz7rdv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-label[b-r88puz7rdv] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-r88puz7rdv] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Accuracy Badge */
.accuracy-badge[b-r88puz7rdv] {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.accuracy-badge.high[b-r88puz7rdv] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.accuracy-badge.medium[b-r88puz7rdv] {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
}

.accuracy-badge.low[b-r88puz7rdv] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Status Badge */
.status-badge[b-r88puz7rdv] {
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active[b-r88puz7rdv] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.status-badge.inactive[b-r88puz7rdv] {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
}

.status-badge.archived[b-r88puz7rdv] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
    .patient-card[b-r88puz7rdv] {
        flex-wrap: wrap;
    }

    .patient-info[b-r88puz7rdv] {
        flex: 1 1 calc(100% - 4rem);
        order: 1;
    }

    .patient-avatar[b-r88puz7rdv] {
        order: 0;
    }

    .patient-stats[b-r88puz7rdv] {
        order: 2;
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 480px) {
    .patient-card[b-r88puz7rdv] {
        padding: 0.875rem 1rem;
    }

    .patient-avatar[b-r88puz7rdv] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.85rem;
    }

    .patient-name[b-r88puz7rdv] {
        font-size: 0.95rem;
    }

    .patient-meta[b-r88puz7rdv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .stat-item[b-r88puz7rdv] {
        display: none;
    }
}
/* /Components/PatientForm.razor.rz.scp.css */
/* =============================================
   PATIENT FORM - shadcn/ui Style
   ============================================= */

/* Patient Form Container */
.patient-form[b-bf5xb7rb1j] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form Sections */
.form-section[b-bf5xb7rb1j] {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0 0 20px 0;
}

.form-section:last-of-type[b-bf5xb7rb1j] {
    border-bottom: none;
}

.section-title[b-bf5xb7rb1j] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin: 0 0 16px 0;
}

/* =============================================
   ACCORDION - shadcn/ui Style
   ============================================= */

.accordion-item[b-bf5xb7rb1j] {
    border-bottom: 1px solid var(--border);
}

.accordion-item:last-of-type[b-bf5xb7rb1j] {
    border-bottom: none;
}

/* Accordion Trigger */
.accordion-trigger[b-bf5xb7rb1j] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    transition: all 0.2s ease;
}

.accordion-trigger:hover .accordion-trigger-text[b-bf5xb7rb1j] {
    text-decoration: underline;
}

.accordion-trigger:focus-visible[b-bf5xb7rb1j] {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
    border-radius: 4px;
}

.accordion-trigger-text[b-bf5xb7rb1j] {
    flex: 1;
}

/* Accordion Chevron */
.accordion-chevron[b-bf5xb7rb1j] {
    flex-shrink: 0;
    color: var(--muted-foreground);
    transition: transform 0.2s ease;
}

.accordion-item[data-state="open"] .accordion-chevron[b-bf5xb7rb1j] {
    transform: rotate(180deg);
}

/* Accordion Content - Animated with CSS Grid */
.accordion-content[b-bf5xb7rb1j] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease-out;
}

.accordion-content[data-state="open"][b-bf5xb7rb1j] {
    grid-template-rows: 1fr;
}

.accordion-content-inner[b-bf5xb7rb1j] {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-content[data-state="open"] .accordion-content-inner[b-bf5xb7rb1j] {
    padding-bottom: 16px;
}

/* Form Rows */
.form-row[b-bf5xb7rb1j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row.two-cols[b-bf5xb7rb1j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-row.three-cols[b-bf5xb7rb1j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Form Groups */
.form-group[b-bf5xb7rb1j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-bf5xb7rb1j] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

/* Form Controls */
.form-control[b-bf5xb7rb1j] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 8px);
    color: var(--foreground);
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus[b-bf5xb7rb1j] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

.form-control[b-bf5xb7rb1j]::placeholder {
    color: var(--muted-foreground);
}

.form-control:disabled[b-bf5xb7rb1j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-control.textarea[b-bf5xb7rb1j] {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

/* Select */
.form-control option[b-bf5xb7rb1j] {
    background-color: var(--card);
    color: var(--foreground);
}

/* Alerts */
.alert[b-bf5xb7rb1j] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.alert-icon[b-bf5xb7rb1j] {
    flex-shrink: 0;
}

.alert-danger[b-bf5xb7rb1j] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--error-500);
}

/* Form Actions */
.form-actions[b-bf5xb7rb1j] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* Buttons */
.btn[b-bf5xb7rb1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn:disabled[b-bf5xb7rb1j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-bf5xb7rb1j] {
    background-color: var(--primary);
    border: none;
    color: var(--primary-foreground);
}

.btn-primary:hover:not(:disabled)[b-bf5xb7rb1j] {
    background-color: var(--secondary);
}

.btn-secondary[b-bf5xb7rb1j] {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
}

.btn-secondary:hover:not(:disabled)[b-bf5xb7rb1j] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

/* Spinner */
.spinner-sm[b-bf5xb7rb1j] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--muted-foreground);
    border-top-color: var(--background);
    border-radius: 50%;
    animation: spin-b-bf5xb7rb1j 0.6s linear infinite;
}

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

/* Validation Messages */
[b-bf5xb7rb1j] .validation-message {
    color: var(--error-500);
    font-size: 12px;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 900px) {
    .form-row.three-cols[b-bf5xb7rb1j] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-row.two-cols[b-bf5xb7rb1j],
    .form-row.three-cols[b-bf5xb7rb1j] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .form-actions[b-bf5xb7rb1j] {
        flex-direction: column;
    }

    .form-actions .btn[b-bf5xb7rb1j] {
        width: 100%;
    }
}
/* /Components/UI/Alert.razor.rz.scp.css */
/* =============================================
   ALERT COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-alert[b-c58orrwlt1] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid;
    animation: slideUp-b-c58orrwlt1 var(--transition-base) ease-out;
}

/* ===== ICON ===== */
.ui-alert-icon[b-c58orrwlt1] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.ui-alert-icon svg[b-c58orrwlt1] {
    width: 20px;
    height: 20px;
}

/* ===== CONTENT ===== */
.ui-alert-content[b-c58orrwlt1] {
    flex: 1;
    min-width: 0;
}

.ui-alert-title[b-c58orrwlt1] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--leading-tight);
}

.ui-alert-description[b-c58orrwlt1] {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.ui-alert-description:only-child[b-c58orrwlt1] {
    margin: 0;
}

/* ===== CLOSE BUTTON ===== */
.ui-alert-close[b-c58orrwlt1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.ui-alert-close:hover[b-c58orrwlt1] {
    opacity: 1;
}

.ui-alert-close:focus-visible[b-c58orrwlt1] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===== VARIANTS ===== */

/* Info */
.ui-alert-info[b-c58orrwlt1] {
    background-color: var(--info-50);
    border-color: var(--info-200);
    color: var(--info-700);
}

[data-theme="dark"] .ui-alert-info[b-c58orrwlt1] {
    background-color: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--info-500);
}

/* Success */
.ui-alert-success[b-c58orrwlt1] {
    background-color: var(--success-50);
    border-color: var(--success-200);
    color: var(--success-700);
}

[data-theme="dark"] .ui-alert-success[b-c58orrwlt1] {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success-500);
}

/* Warning */
.ui-alert-warning[b-c58orrwlt1] {
    background-color: var(--warning-50);
    border-color: var(--warning-200);
    color: var(--warning-700);
}

[data-theme="dark"] .ui-alert-warning[b-c58orrwlt1] {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--warning-500);
}

/* Error */
.ui-alert-error[b-c58orrwlt1] {
    background-color: var(--error-50);
    border-color: var(--error-200);
    color: var(--error-700);
}

[data-theme="dark"] .ui-alert-error[b-c58orrwlt1] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error-500);
}

/* ===== ANIMATION ===== */
@keyframes slideUp-b-c58orrwlt1 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/UI/Badge.razor.rz.scp.css */
/* =============================================
   BADGE COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-badge[b-usmogk7i7y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

/* ===== SIZES ===== */
.ui-badge-sm[b-usmogk7i7y] {
    height: 20px;
    padding: 0 var(--space-2);
    font-size: 11px;
}

.ui-badge-md[b-usmogk7i7y] {
    height: 24px;
    padding: 0 var(--space-2-5);
    font-size: var(--text-xs);
}

.ui-badge-lg[b-usmogk7i7y] {
    height: 28px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

/* ===== VARIANTS ===== */

/* Default */
.ui-badge-default[b-usmogk7i7y] {
    background-color: var(--muted);
    color: var(--foreground);
}

/* Primary */
.ui-badge-primary[b-usmogk7i7y] {
    background-color: var(--primary-100);
    color: var(--primary-700);
}

[data-theme="dark"] .ui-badge-primary[b-usmogk7i7y] {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--primary-400);
}

/* Success */
.ui-badge-success[b-usmogk7i7y] {
    background-color: var(--success-100);
    color: var(--success-700);
}

[data-theme="dark"] .ui-badge-success[b-usmogk7i7y] {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--success-500);
}

/* Warning */
.ui-badge-warning[b-usmogk7i7y] {
    background-color: var(--warning-100);
    color: var(--warning-700);
}

[data-theme="dark"] .ui-badge-warning[b-usmogk7i7y] {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--warning-500);
}

/* Error */
.ui-badge-error[b-usmogk7i7y] {
    background-color: var(--error-100);
    color: var(--error-700);
}

[data-theme="dark"] .ui-badge-error[b-usmogk7i7y] {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-500);
}

/* Info */
.ui-badge-info[b-usmogk7i7y] {
    background-color: var(--info-100);
    color: var(--info-700);
}

[data-theme="dark"] .ui-badge-info[b-usmogk7i7y] {
    background-color: rgba(6, 182, 212, 0.2);
    color: var(--info-500);
}

/* Outline */
.ui-badge-outline[b-usmogk7i7y] {
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}

/* ===== ICON ===== */
.ui-badge-icon[b-usmogk7i7y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}
/* /Components/UI/BillingAlert.razor.rz.scp.css */
/* ===== ALERTS ===== */
.alert[b-mgxso8hrgf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.alert svg[b-mgxso8hrgf] {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-content[b-mgxso8hrgf] {
    flex: 1;
}

.alert-content strong[b-mgxso8hrgf] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-content p[b-mgxso8hrgf] {
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.alert-warning[b-mgxso8hrgf] {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.alert-warning svg[b-mgxso8hrgf] {
    color: var(--warning-500, #eab308);
}

.alert-warning .alert-content strong[b-mgxso8hrgf] {
    color: var(--warning-700, #a16207);
}

.alert-warning .alert-content p[b-mgxso8hrgf] {
    color: var(--muted-foreground);
}

[b-mgxso8hrgf] [data-theme="dark"] .alert-warning {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

[b-mgxso8hrgf] [data-theme="dark"] .alert-warning .alert-content strong {
    color: #fcd34d;
}

.alert-danger[b-mgxso8hrgf] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-danger svg[b-mgxso8hrgf] {
    color: var(--error-500);
}

.alert-danger .alert-content strong[b-mgxso8hrgf] {
    color: var(--error-700, #b91c1c);
}

.alert-danger .alert-content p[b-mgxso8hrgf] {
    color: var(--muted-foreground);
}

[b-mgxso8hrgf] [data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

[b-mgxso8hrgf] [data-theme="dark"] .alert-danger .alert-content strong {
    color: #fca5a5;
}

.alert-muted[b-mgxso8hrgf] {
    background-color: var(--accent);
    border: 1px solid var(--border);
}

.alert-muted svg[b-mgxso8hrgf] {
    color: var(--muted-foreground);
}

.alert-muted .alert-content strong[b-mgxso8hrgf] {
    color: var(--foreground);
}

.alert-muted .alert-content p[b-mgxso8hrgf] {
    color: var(--muted-foreground);
}

/* ===== TRIAL ALERT ===== */
.alert-trial[b-mgxso8hrgf] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    margin-bottom: 24px;
}

[b-mgxso8hrgf] [data-theme="dark"] .alert-trial {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.alert-trial-icon[b-mgxso8hrgf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.alert-trial-icon svg[b-mgxso8hrgf] {
    color: white;
}

.alert-trial-content[b-mgxso8hrgf] {
    flex: 1;
}

.alert-trial-content strong[b-mgxso8hrgf] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 4px;
}

.alert-trial-content p[b-mgxso8hrgf] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

.btn-trial-cta[b-mgxso8hrgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.btn-trial-cta:hover[b-mgxso8hrgf] {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ===== BUTTONS ===== */
.btn-outline[b-mgxso8hrgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-outline:hover:not(:disabled)[b-mgxso8hrgf] {
    background-color: var(--accent);
}

.btn-small[b-mgxso8hrgf] {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .alert[b-mgxso8hrgf] {
        flex-direction: column;
        gap: 12px;
    }

    .alert .btn-outline[b-mgxso8hrgf] {
        width: 100%;
    }

    .alert-trial[b-mgxso8hrgf] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .alert-trial-content strong[b-mgxso8hrgf] {
        font-size: 15px;
    }

    .btn-trial-cta[b-mgxso8hrgf] {
        width: 100%;
    }
}
/* /Components/UI/Button.razor.rz.scp.css */
/* =============================================
   BUTTON COMPONENT - shadcn/ui style
   ============================================= */

.ui-btn[b-5iqiyu7sko] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.ui-btn:focus-visible[b-5iqiyu7sko] {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ===== SIZES ===== */
.ui-btn-sm[b-5iqiyu7sko] {
    height: 36px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

.ui-btn-md[b-5iqiyu7sko] {
    height: 40px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
}

.ui-btn-lg[b-5iqiyu7sko] {
    height: 44px;
    padding: 0 var(--space-8);
    font-size: var(--text-sm);
}

/* ===== VARIANTS ===== */

/* Primary (Default) - Dark button */
.ui-btn-primary[b-5iqiyu7sko] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.ui-btn-primary:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--primary);
    opacity: 0.9;
}

/* Secondary */
.ui-btn-secondary[b-5iqiyu7sko] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.ui-btn-secondary:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--secondary);
    opacity: 0.8;
}

/* Outline */
.ui-btn-outline[b-5iqiyu7sko] {
    background-color: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
}

.ui-btn-outline:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Ghost */
.ui-btn-ghost[b-5iqiyu7sko] {
    background-color: transparent;
    color: var(--foreground);
}

.ui-btn-ghost:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Destructive */
.ui-btn-destructive[b-5iqiyu7sko] {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
}

.ui-btn-destructive:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--destructive);
    opacity: 0.9;
}

/* Success */
.ui-btn-success[b-5iqiyu7sko] {
    background-color: var(--success-600);
    color: #ffffff;
}

.ui-btn-success:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--success-700);
}

/* Warning */
.ui-btn-warning[b-5iqiyu7sko] {
    background-color: var(--warning-500);
    color: var(--zinc-900);
}

.ui-btn-warning:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    background-color: var(--warning-600);
}

/* Link */
.ui-btn-link[b-5iqiyu7sko] {
    background-color: transparent;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ui-btn-link:hover:not(.ui-btn-disabled):not(.ui-btn-loading)[b-5iqiyu7sko] {
    text-decoration: underline;
}

/* ===== STATES ===== */

/* Disabled */
.ui-btn-disabled[b-5iqiyu7sko] {
    pointer-events: none;
    opacity: 0.5;
}

/* Loading */
.ui-btn-loading[b-5iqiyu7sko] {
    cursor: wait;
    pointer-events: none;
}

.ui-btn-spinner[b-5iqiyu7sko] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-5iqiyu7sko 0.6s linear infinite;
}

.ui-btn-text-loading[b-5iqiyu7sko] {
    opacity: 0.7;
}

/* Full Width */
.ui-btn-full[b-5iqiyu7sko] {
    width: 100%;
}

/* Icon */
.ui-btn-icon[b-5iqiyu7sko] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

/* Icon Only Button */
.ui-btn-icon-only[b-5iqiyu7sko] {
    width: 40px;
    padding: 0;
}

.ui-btn-icon-only.ui-btn-sm[b-5iqiyu7sko] {
    width: 36px;
}

.ui-btn-icon-only.ui-btn-lg[b-5iqiyu7sko] {
    width: 44px;
}

/* ===== ANIMATIONS ===== */
@keyframes spin-b-5iqiyu7sko {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Components/UI/Card.razor.rz.scp.css */
/* =============================================
   CARD COMPONENT - shadcn/ui style
   ============================================= */

.ui-card[b-rwu73eyto9] {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ui-card-hoverable:hover[b-rwu73eyto9] {
    box-shadow: var(--shadow);
}

.ui-card-no-border[b-rwu73eyto9] {
    border: none;
    box-shadow: none;
}

/* ===== CARD HEADER ===== */
[b-rwu73eyto9] .ui-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: var(--space-6);
}

/* ===== CARD TITLE ===== */
[b-rwu73eyto9] .ui-card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--card-foreground);
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0;
}

/* ===== CARD DESCRIPTION ===== */
[b-rwu73eyto9] .ui-card-description {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: var(--leading-normal);
    margin: 0;
}

/* ===== CARD CONTENT ===== */
[b-rwu73eyto9] .ui-card-content {
    padding: var(--space-6);
    padding-top: 0;
}

[b-rwu73eyto9] .ui-card-content:first-child {
    padding-top: var(--space-6);
}

/* ===== CARD FOOTER ===== */
[b-rwu73eyto9] .ui-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    padding-top: 0;
}

/* Footer variations */
[b-rwu73eyto9] .ui-card-footer-end {
    justify-content: flex-end;
}

[b-rwu73eyto9] .ui-card-footer-between {
    justify-content: space-between;
}
/* /Components/UI/DatePicker.razor.rz.scp.css */
/* =============================================
   DATE PICKER - shadcn/ui Style with Theme Support
   ============================================= */

.date-picker[b-hugscomvic] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.date-picker.disabled[b-hugscomvic] {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== TRIGGER BUTTON ===== */
.date-picker-trigger[b-hugscomvic] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 8px);
    font-size: 14px;
    color: var(--foreground);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.date-picker-trigger:hover:not(:disabled)[b-hugscomvic] {
    border-color: var(--ring);
}

.date-picker-trigger:focus[b-hugscomvic] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

.date-picker-trigger.open[b-hugscomvic] {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

.date-picker-trigger.placeholder .date-text[b-hugscomvic] {
    color: var(--muted-foreground);
}

.date-picker-trigger:disabled[b-hugscomvic] {
    cursor: not-allowed;
    opacity: 0.5;
}

.calendar-icon[b-hugscomvic] {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.date-text[b-hugscomvic] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== BACKDROP ===== */
.date-picker-backdrop[b-hugscomvic] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dropdown, 999);
}

/* ===== POPOVER ===== */
.date-picker-popover[b-hugscomvic] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-popover, 1000);
    min-width: 280px;
    background-color: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
    padding: 12px;
    animation: fadeIn-b-hugscomvic 0.15s ease-out;
}

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

/* ===== HEADER WITH SELECTS ===== */
.date-picker-header[b-hugscomvic] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.date-picker-select[b-hugscomvic] {
    flex: 1;
    height: 36px;
    padding: 0 28px 0 8px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    cursor: pointer;
    transition: border-color 0.15s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.date-picker-select:hover[b-hugscomvic] {
    border-color: var(--ring);
}

.date-picker-select:focus[b-hugscomvic] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

.date-picker-select option[b-hugscomvic] {
    background-color: var(--popover);
    color: var(--foreground);
}

.month-select[b-hugscomvic] {
    flex: 1.5;
}

.year-select[b-hugscomvic] {
    flex: 1;
}

/* ===== CALENDAR ===== */
.date-picker-calendar[b-hugscomvic] {
    user-select: none;
}

.calendar-weekdays[b-hugscomvic] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 4px;
}

.calendar-weekdays span[b-hugscomvic] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.calendar-days[b-hugscomvic] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day[b-hugscomvic] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.calendar-day:hover:not(.selected):not(.disabled):not(.empty)[b-hugscomvic] {
    background-color: var(--accent);
}

.calendar-day.empty[b-hugscomvic] {
    cursor: default;
}

.calendar-day.today:not(.selected)[b-hugscomvic] {
    background-color: var(--accent);
    font-weight: 600;
}

.calendar-day.selected[b-hugscomvic] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 500;
}

.calendar-day.disabled[b-hugscomvic] {
    color: var(--muted-foreground);
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== FOOTER ===== */
.date-picker-footer[b-hugscomvic] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.date-picker-clear[b-hugscomvic] {
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.date-picker-clear:hover[b-hugscomvic] {
    color: var(--foreground);
    background-color: var(--accent);
}
/* /Components/UI/Input.razor.rz.scp.css */
/* =============================================
   INPUT COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-input-wrapper[b-b9143nd5v4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.ui-input-full[b-b9143nd5v4] {
    width: 100%;
}

/* ===== LABEL ===== */
.ui-input-label[b-b9143nd5v4] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    line-height: var(--leading-none);
}

.ui-input-required[b-b9143nd5v4] {
    color: var(--error-500);
    margin-left: var(--space-0-5);
}

/* ===== INPUT CONTAINER ===== */
.ui-input-container[b-b9143nd5v4] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* ===== INPUT FIELD ===== */
.ui-input[b-b9143nd5v4] {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: var(--input);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.ui-input[b-b9143nd5v4]::placeholder {
    color: var(--input-placeholder);
}

.ui-input:focus[b-b9143nd5v4] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ===== SIZES ===== */
.ui-input-sm[b-b9143nd5v4] {
    height: 32px;
    padding: 0 var(--space-3);
}

.ui-input-md[b-b9143nd5v4] {
    height: 40px;
    padding: 0 var(--space-3);
}

.ui-input-lg[b-b9143nd5v4] {
    height: 48px;
    padding: 0 var(--space-4);
    font-size: var(--text-base);
}

/* ===== WITH ICONS ===== */
.ui-input-icon[b-b9143nd5v4] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--input-placeholder);
    pointer-events: none;
}

.ui-input-icon-left[b-b9143nd5v4] {
    left: var(--space-3);
}

.ui-input-icon-right[b-b9143nd5v4] {
    right: var(--space-3);
}

.ui-input-container:has(.ui-input-icon-left) .ui-input[b-b9143nd5v4] {
    padding-left: var(--space-10);
}

.ui-input-container:has(.ui-input-icon-right) .ui-input[b-b9143nd5v4] {
    padding-right: var(--space-10);
}

/* ===== ERROR STATE ===== */
.ui-input-error .ui-input[b-b9143nd5v4] {
    border-color: var(--error-500);
}

.ui-input-error .ui-input:focus[b-b9143nd5v4] {
    border-color: var(--error-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ui-input-error-text[b-b9143nd5v4] {
    font-size: var(--text-sm);
    color: var(--error-600);
    margin: 0;
}

/* ===== DISABLED STATE ===== */
.ui-input-disabled .ui-input[b-b9143nd5v4] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--muted);
}

/* ===== HINT TEXT ===== */
.ui-input-hint[b-b9143nd5v4] {
    font-size: var(--text-sm);
    color: var(--foreground-muted);
    margin: 0;
}
/* /Components/UI/Skeleton.razor.rz.scp.css */
/* =============================================
   SKELETON COMPONENT - IntegraÁudio Design System
   ============================================= */

.ui-skeleton[b-9lztmarr8n] {
    background: linear-gradient(
        90deg,
        var(--muted) 25%,
        var(--border) 50%,
        var(--muted) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-9lztmarr8n 1.5s ease-in-out infinite;
}

/* ===== VARIANTS ===== */

/* Default - Rectangle */
.ui-skeleton-default[b-9lztmarr8n] {
    width: 100%;
    height: 20px;
    border-radius: var(--radius-md);
}

/* Text - Single line of text */
.ui-skeleton-text[b-9lztmarr8n] {
    width: 100%;
    height: 16px;
    border-radius: var(--radius-sm);
}

/* Circle - Avatar placeholder */
.ui-skeleton-circle[b-9lztmarr8n] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

/* Card - Card placeholder */
.ui-skeleton-card[b-9lztmarr8n] {
    width: 100%;
    height: 120px;
    border-radius: var(--radius-xl);
}

/* Button - Button placeholder */
.ui-skeleton-button[b-9lztmarr8n] {
    width: 100px;
    height: 40px;
    border-radius: var(--radius-lg);
}

/* ===== ANIMATION ===== */
@keyframes skeleton-shimmer-b-9lztmarr8n {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== SKELETON GROUP ===== */
.ui-skeleton-group[b-9lztmarr8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ui-skeleton-row[b-9lztmarr8n] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
/* /Components/UI/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-tvk4kqsrlo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}

.theme-toggle:hover[b-tvk4kqsrlo] {
    background-color: var(--accent);
    color: var(--foreground);
}

.theme-toggle:focus-visible[b-tvk4kqsrlo] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.theme-icon[b-tvk4kqsrlo] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
/* =============================================
   EMPTY LAYOUT - IntegraÁudio Design System
   Layout mínimo para páginas públicas
   ============================================= */

.empty-layout[b-ntrffgoabs] {
    min-height: 100vh;
    background-color: var(--background);
    transition: background-color var(--transition-base);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* =============================================
   ADMIN LAYOUT - shadcn/ui Sidebar Style
   ============================================= */

/* CSS Variables for sidebar */
.admin-layout[b-gc1q6j7t0n] {
    --sidebar-width: 256px;
    --sidebar-width-collapsed: 64px;
    display: flex;
    min-height: 100vh;
    background-color: var(--background);
}

/* ===== SIDEBAR ===== */
.sidebar[b-gc1q6j7t0n] {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--sidebar-background, var(--background));
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.2s ease-in-out;
}

/* Collapsed State - Desktop */
[data-sidebar-state="collapsed"] .sidebar[b-gc1q6j7t0n] {
    width: var(--sidebar-width-collapsed);
}

[data-sidebar-state="collapsed"] .brand-text[b-gc1q6j7t0n],
[data-sidebar-state="collapsed"] .nav-text[b-gc1q6j7t0n],
[data-sidebar-state="collapsed"] .nav-section-title[b-gc1q6j7t0n],
[data-sidebar-state="collapsed"] .user-details[b-gc1q6j7t0n],
[data-sidebar-state="collapsed"] .logout-text[b-gc1q6j7t0n] {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.1s ease-in-out;
}

[data-sidebar-state="collapsed"] .sidebar-header[b-gc1q6j7t0n] {
    padding: 0;
    justify-content: center;
}

[data-sidebar-state="collapsed"] .sidebar-brand[b-gc1q6j7t0n] {
    justify-content: center;
    gap: 0;
}

[data-sidebar-state="collapsed"][b-gc1q6j7t0n]  .nav-item,
[data-sidebar-state="collapsed"][b-gc1q6j7t0n]  a.nav-item {
    justify-content: center;
    padding: 10px;
    margin: 0 auto 2px auto;
    width: 44px;
    gap: 0 !important;
}

[data-sidebar-state="collapsed"] .sidebar-nav[b-gc1q6j7t0n] {
    padding: 16px 0;
    overflow-x: visible;
    overflow-y: auto;
}

[data-sidebar-state="collapsed"] .nav-section[b-gc1q6j7t0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-sidebar-state="collapsed"] .sidebar-footer[b-gc1q6j7t0n] {
    padding: 12px;
    justify-content: center;
}

[data-sidebar-state="collapsed"] .user-info[b-gc1q6j7t0n] {
    justify-content: center;
}

[data-sidebar-state="collapsed"] .btn-logout[b-gc1q6j7t0n] {
    padding: 0;
    width: 36px;
    border: none;
}

/* ===== SIDEBAR HEADER ===== */
.sidebar-header[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    padding: 16px 16px;
    border-bottom: 1px solid var(--border);
    height: 65px;
    box-sizing: border-box;
}

.sidebar-brand[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
    overflow: hidden;
}

.sidebar-brand:hover[b-gc1q6j7t0n] {
    text-decoration: none;
}

.brand-icon[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
    flex-shrink: 0;
}

.brand-text[b-gc1q6j7t0n] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.025em;
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
}

/* ===== SIDEBAR NAV ===== */
.sidebar-nav[b-gc1q6j7t0n] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
}

.nav-section[b-gc1q6j7t0n] {
    margin-bottom: 20px;
}

.nav-section:last-child[b-gc1q6j7t0n] {
    margin-bottom: 0;
}

.nav-section-title[b-gc1q6j7t0n] {
    display: block;
    padding: 0 12px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
}

[b-gc1q6j7t0n] .nav-item,
[b-gc1q6j7t0n] a.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

[b-gc1q6j7t0n] .nav-item:hover,
[b-gc1q6j7t0n] a.nav-item:hover {
    color: var(--foreground);
    background-color: var(--accent);
    text-decoration: none;
}

[b-gc1q6j7t0n] .nav-item.active,
[b-gc1q6j7t0n] a.nav-item.active {
    color: var(--foreground);
    background-color: var(--accent);
}

[b-gc1q6j7t0n] .nav-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.nav-text[b-gc1q6j7t0n] {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
}

/* ===== SIDEBAR FOOTER ===== */
.sidebar-footer[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.user-info[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.user-avatar[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--accent);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
    flex-shrink: 0;
}

.user-details[b-gc1q6j7t0n] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
}

.user-name[b-gc1q6j7t0n] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-gc1q6j7t0n] {
    font-size: 12px;
    color: var(--muted-foreground);
}

.btn-logout[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
}

.btn-logout:hover[b-gc1q6j7t0n] {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.logout-text[b-gc1q6j7t0n] {
    white-space: nowrap;
}

/* ===== MAIN WRAPPER ===== */
.main-wrapper[b-gc1q6j7t0n] {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease-in-out;
}

[data-sidebar-state="collapsed"] .main-wrapper[b-gc1q6j7t0n] {
    margin-left: var(--sidebar-width-collapsed);
}

/* ===== ADMIN HEADER ===== */
.admin-header[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px 0 12px;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    height: 65px;
    box-sizing: border-box;
}

/* Sidebar Toggle Button - shadcn style */
.sidebar-toggle[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.sidebar-toggle:hover[b-gc1q6j7t0n] {
    color: var(--foreground);
    background-color: var(--accent);
}

[b-gc1q6j7t0n] .sidebar-toggle svg,
.sidebar-toggle svg[b-gc1q6j7t0n] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

.desktop-toggle[b-gc1q6j7t0n] {
    display: flex;
}

.mobile-toggle[b-gc1q6j7t0n] {
    display: none;
}

.header-spacer[b-gc1q6j7t0n] {
    flex: 1;
}

.header-actions[b-gc1q6j7t0n] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== ADMIN MAIN ===== */
.admin-main[b-gc1q6j7t0n] {
    flex: 1;
    padding: 24px;
    background-color: var(--background);
}

/* ===== MOBILE OVERLAY ===== */
.sidebar-overlay[b-gc1q6j7t0n] {
    display: none;
}

/* ===== RESPONSIVE - TABLET (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    /* On tablet, sidebar collapses to icons by default but can be toggled */
    .admin-layout[b-gc1q6j7t0n] {
        --sidebar-width: 256px;
    }

    /* Start collapsed on tablet */
    .sidebar[b-gc1q6j7t0n] {
        width: var(--sidebar-width-collapsed);
    }

    .brand-text[b-gc1q6j7t0n],
    .nav-text[b-gc1q6j7t0n],
    .nav-section-title[b-gc1q6j7t0n],
    .user-details[b-gc1q6j7t0n],
    .logout-text[b-gc1q6j7t0n] {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sidebar-header[b-gc1q6j7t0n] {
        padding: 16px 8px;
    }

    .sidebar-brand[b-gc1q6j7t0n] {
        justify-content: center;
    }

    .nav-item[b-gc1q6j7t0n] {
        justify-content: center;
        padding: 10px 0;
    }

    .sidebar-nav[b-gc1q6j7t0n] {
        padding: 16px 8px;
    }

    .sidebar-footer[b-gc1q6j7t0n] {
        padding: 16px 8px;
        justify-content: center;
    }

    .user-info[b-gc1q6j7t0n] {
        justify-content: center;
    }

    .btn-logout[b-gc1q6j7t0n] {
        padding: 0;
        width: 36px;
        border: none;
    }

    /* When expanded on tablet */
    [data-sidebar-state="expanded"] .sidebar[b-gc1q6j7t0n] {
        width: var(--sidebar-width);
    }

    [data-sidebar-state="expanded"] .brand-text[b-gc1q6j7t0n],
    [data-sidebar-state="expanded"] .nav-text[b-gc1q6j7t0n],
    [data-sidebar-state="expanded"] .nav-section-title[b-gc1q6j7t0n],
    [data-sidebar-state="expanded"] .user-details[b-gc1q6j7t0n],
    [data-sidebar-state="expanded"] .logout-text[b-gc1q6j7t0n] {
        opacity: 1;
        width: auto;
    }

    [data-sidebar-state="expanded"] .sidebar-header[b-gc1q6j7t0n] {
        padding: 16px 16px;
    }

    [data-sidebar-state="expanded"] .sidebar-brand[b-gc1q6j7t0n] {
        justify-content: flex-start;
    }

    [data-sidebar-state="expanded"] .nav-item[b-gc1q6j7t0n] {
        justify-content: flex-start;
        padding: 10px 12px;
    }

    [data-sidebar-state="expanded"] .sidebar-nav[b-gc1q6j7t0n] {
        padding: 16px 12px;
    }

    [data-sidebar-state="expanded"] .sidebar-footer[b-gc1q6j7t0n] {
        padding: 16px;
        justify-content: space-between;
    }

    [data-sidebar-state="expanded"] .user-info[b-gc1q6j7t0n] {
        justify-content: flex-start;
    }

    [data-sidebar-state="expanded"] .btn-logout[b-gc1q6j7t0n] {
        padding: 0 12px;
        width: auto;
        border: 1px solid var(--border);
    }

    .main-wrapper[b-gc1q6j7t0n] {
        margin-left: var(--sidebar-width-collapsed);
    }

    [data-sidebar-state="expanded"] .main-wrapper[b-gc1q6j7t0n] {
        margin-left: var(--sidebar-width);
    }
}

/* ===== RESPONSIVE - MOBILE (<768px) ===== */
@media (max-width: 768px) {
    /* Mobile: sidebar is completely hidden, opens as drawer */
    .sidebar[b-gc1q6j7t0n] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        box-shadow: none;
    }

    /* Show sidebar when mobile menu is open */
    [data-mobile-open="true"] .sidebar[b-gc1q6j7t0n] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    /* Reset all collapsed styles on mobile - always show full content */
    .brand-text[b-gc1q6j7t0n],
    .nav-text[b-gc1q6j7t0n],
    .nav-section-title[b-gc1q6j7t0n],
    .user-details[b-gc1q6j7t0n],
    .logout-text[b-gc1q6j7t0n] {
        opacity: 1;
        width: auto;
        overflow: visible;
    }

    .sidebar-header[b-gc1q6j7t0n] {
        padding: 16px 16px;
    }

    .sidebar-brand[b-gc1q6j7t0n] {
        justify-content: flex-start;
    }

    [b-gc1q6j7t0n] .nav-item {
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .sidebar-nav[b-gc1q6j7t0n] {
        padding: 16px 12px;
    }

    .sidebar-footer[b-gc1q6j7t0n] {
        padding: 16px;
        justify-content: space-between;
    }

    .user-info[b-gc1q6j7t0n] {
        justify-content: flex-start;
    }

    .btn-logout[b-gc1q6j7t0n] {
        display: flex;
        padding: 0 12px;
        width: auto;
        border: 1px solid var(--border);
    }

    .main-wrapper[b-gc1q6j7t0n] {
        margin-left: 0;
    }

    [data-sidebar-state="collapsed"] .main-wrapper[b-gc1q6j7t0n],
    [data-sidebar-state="expanded"] .main-wrapper[b-gc1q6j7t0n] {
        margin-left: 0;
    }

    /* Toggle buttons visibility */
    .desktop-toggle[b-gc1q6j7t0n] {
        display: none;
    }

    .mobile-toggle[b-gc1q6j7t0n] {
        display: flex;
    }

    /* Mobile overlay */
    .sidebar-overlay[b-gc1q6j7t0n] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 90;
        animation: fadeIn-b-gc1q6j7t0n 0.2s ease-out;
    }

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

    .admin-header[b-gc1q6j7t0n] {
        padding: 12px 16px;
    }

    .admin-main[b-gc1q6j7t0n] {
        padding: 16px;
    }
}

/* ===== RESPONSIVE - SMALL MOBILE (<480px) ===== */
@media (max-width: 480px) {
    .sidebar[b-gc1q6j7t0n] {
        width: 100%;
    }

    .admin-main[b-gc1q6j7t0n] {
        padding: 12px;
    }
}

/* ===== TOOLTIPS for collapsed state ===== */
[data-sidebar-state="collapsed"][b-gc1q6j7t0n]  .nav-item {
    position: relative;
}

[data-sidebar-state="collapsed"][b-gc1q6j7t0n]  .nav-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 200;
    border: 1px solid var(--border);
}
/* /Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* =============================================
   FORGOT PASSWORD PAGE - shadcn/ui style
   Split-screen layout with theme support
   ============================================= */

/* ===== CONTAINER - Split Screen ===== */
.auth-container[b-p6e2pxz2jo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}

/* ===== LEFT PANEL - Dark Branding ===== */
.auth-panel-left[b-p6e2pxz2jo] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background-color: var(--card);
    color: var(--foreground);
}

.auth-brand[b-p6e2pxz2jo] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
}

.auth-brand:hover[b-p6e2pxz2jo] {
    text-decoration: none;
    color: var(--foreground);
}

.auth-logo[b-p6e2pxz2jo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
}

.auth-logo svg[b-p6e2pxz2jo] {
    width: 24px;
    height: 24px;
}

.auth-brand-name[b-p6e2pxz2jo] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.auth-testimonial[b-p6e2pxz2jo] {
    max-width: 480px;
}

.auth-testimonial blockquote[b-p6e2pxz2jo] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--foreground);
    margin: 0 0 24px 0;
    font-style: normal;
}

.auth-testimonial blockquote[b-p6e2pxz2jo]::before {
    content: '"';
}

.auth-testimonial blockquote[b-p6e2pxz2jo]::after {
    content: '"';
}

.auth-testimonial footer[b-p6e2pxz2jo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author[b-p6e2pxz2jo] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.testimonial-role[b-p6e2pxz2jo] {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== RIGHT PANEL - Form Area ===== */
.auth-panel-right[b-p6e2pxz2jo] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background-color: var(--background);
}

.auth-header-actions[b-p6e2pxz2jo] {
    position: absolute;
    top: 32px;
    right: 32px;
}

.auth-header-link[b-p6e2pxz2jo] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.15s;
}

.auth-header-link:hover[b-p6e2pxz2jo] {
    background-color: var(--accent);
}

/* ===== FORM CONTAINER ===== */
.auth-form-container[b-p6e2pxz2jo] {
    width: 100%;
    max-width: 380px;
}

.auth-form-header[b-p6e2pxz2jo] {
    margin-bottom: 32px;
    text-align: center;
}

.auth-title[b-p6e2pxz2jo] {
    font-size: 28px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

.auth-subtitle[b-p6e2pxz2jo] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

/* ===== FORM ===== */
.auth-form[b-p6e2pxz2jo] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== FIELD ===== */
.auth-field[b-p6e2pxz2jo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-label[b-p6e2pxz2jo] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.auth-input[b-p6e2pxz2jo] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    transition: all 0.15s;
}

.auth-input:hover:not(:disabled)[b-p6e2pxz2jo] {
    border-color: var(--muted-foreground);
}

.auth-input:focus[b-p6e2pxz2jo] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.auth-input:disabled[b-p6e2pxz2jo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-input[b-p6e2pxz2jo]::placeholder {
    color: var(--muted-foreground);
}

.auth-validation[b-p6e2pxz2jo] {
    font-size: 12px;
    color: #ef4444;
}

/* ===== ALERT ===== */
.auth-alert[b-p6e2pxz2jo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.auth-alert-error[b-p6e2pxz2jo] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.auth-alert svg[b-p6e2pxz2jo] {
    flex-shrink: 0;
}

/* ===== SUCCESS STATE ===== */
.auth-success-container[b-p6e2pxz2jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 24px 0;
}

.auth-success-icon[b-p6e2pxz2jo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    color: #22c55e;
}

.auth-success-title[b-p6e2pxz2jo] {
    font-size: 24px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.auth-success-message[b-p6e2pxz2jo] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
    max-width: 320px;
}

.auth-success-message strong[b-p6e2pxz2jo] {
    color: var(--foreground);
}

/* ===== BUTTONS ===== */
.auth-btn[b-p6e2pxz2jo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.auth-btn:disabled[b-p6e2pxz2jo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-primary[b-p6e2pxz2jo] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.auth-btn-primary:hover:not(:disabled)[b-p6e2pxz2jo] {
    opacity: 0.9;
}

.auth-spinner[b-p6e2pxz2jo] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-p6e2pxz2jo 0.6s linear infinite;
}

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

/* ===== FOOTER ===== */
.auth-footer[b-p6e2pxz2jo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 14px;
    color: var(--muted-foreground);
}

.auth-link[b-p6e2pxz2jo] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover[b-p6e2pxz2jo] {
    text-decoration: underline;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle-fixed[b-p6e2pxz2jo] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 100;
}

.theme-toggle-fixed:hover[b-p6e2pxz2jo] {
    background-color: var(--accent);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .auth-container[b-p6e2pxz2jo] {
        grid-template-columns: 1fr;
    }

    .auth-panel-left[b-p6e2pxz2jo] {
        display: none;
    }

    .auth-panel-right[b-p6e2pxz2jo] {
        padding: 24px;
    }

    .auth-header-actions[b-p6e2pxz2jo] {
        position: static;
        margin-bottom: 32px;
        align-self: flex-end;
    }

    .auth-form-container[b-p6e2pxz2jo] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .auth-panel-right[b-p6e2pxz2jo] {
        padding: 16px;
    }

    .auth-title[b-p6e2pxz2jo] {
        font-size: 24px;
    }

    .auth-header-actions[b-p6e2pxz2jo] {
        margin-bottom: 24px;
    }
}
/* /Pages/Billing/Cancel.razor.rz.scp.css */
/* =============================================
   BILLING RESULT PAGES - IntegraÁudio Design System
   ============================================= */

.result-container[b-el87r3780d] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: var(--space-8) var(--space-4);
}

/* Background decorativo para tema escuro */
[data-theme="dark"] .result-container[b-el87r3780d] {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        var(--background);
}

/* ===== CARD PRINCIPAL ===== */
.result-card[b-el87r3780d] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-12) var(--space-10);
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .result-card[b-el87r3780d] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.result-card.success[b-el87r3780d] {
    border-color: var(--success-300);
}

[data-theme="dark"] .result-card.success[b-el87r3780d] {
    border-color: rgba(34, 197, 94, 0.3);
}

.result-card.cancel[b-el87r3780d] {
    border-color: var(--warning-300);
}

[data-theme="dark"] .result-card.cancel[b-el87r3780d] {
    border-color: rgba(251, 191, 36, 0.3);
}

/* ===== ICON ===== */
.result-icon[b-el87r3780d] {
    font-size: 4rem;
    margin-bottom: var(--space-6);
}

/* ===== TITLE ===== */
.result-card h1[b-el87r3780d] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--foreground);
    margin: 0 0 var(--space-4) 0;
}

/* ===== MESSAGE ===== */
.result-message[b-el87r3780d] {
    color: var(--foreground-muted);
    font-size: var(--text-base);
    line-height: 1.6;
    margin: 0 0 var(--space-8) 0;
}

/* ===== ACTION BUTTONS ===== */
.result-actions[b-el87r3780d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.btn-primary[b-el87r3780d],
.btn-secondary[b-el87r3780d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-primary[b-el87r3780d] {
    background: var(--primary-600);
    color: white;
    border: none;
}

[data-theme="dark"] .btn-primary[b-el87r3780d] {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
}

.btn-primary:hover[b-el87r3780d] {
    background: var(--primary-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .btn-primary:hover[b-el87r3780d] {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-secondary[b-el87r3780d] {
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
}

[data-theme="dark"] .btn-secondary[b-el87r3780d] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover[b-el87r3780d] {
    background-color: var(--accent);
    border-color: var(--border);
}

[data-theme="dark"] .btn-secondary:hover[b-el87r3780d] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .result-card[b-el87r3780d] {
        padding: var(--space-8) var(--space-6);
    }

    .result-icon[b-el87r3780d] {
        font-size: 3rem;
    }

    .result-card h1[b-el87r3780d] {
        font-size: var(--text-xl);
    }
}
/* /Pages/Billing/Success.razor.rz.scp.css */
/* =============================================
   BILLING RESULT PAGES - IntegraÁudio Design System
   ============================================= */

.result-container[b-g625boqx9t] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: var(--space-8) var(--space-4);
}

/* Background decorativo para tema escuro */
[data-theme="dark"] .result-container[b-g625boqx9t] {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(34, 197, 94, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        var(--background);
}

/* ===== CARD PRINCIPAL ===== */
.result-card[b-g625boqx9t] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-12) var(--space-10);
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .result-card[b-g625boqx9t] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.result-card.success[b-g625boqx9t] {
    border-color: var(--success-300);
}

[data-theme="dark"] .result-card.success[b-g625boqx9t] {
    border-color: rgba(34, 197, 94, 0.3);
}

.result-card.cancel[b-g625boqx9t] {
    border-color: var(--warning-300);
}

[data-theme="dark"] .result-card.cancel[b-g625boqx9t] {
    border-color: rgba(251, 191, 36, 0.3);
}

/* ===== ICON ===== */
.result-icon[b-g625boqx9t] {
    font-size: 4rem;
    margin-bottom: var(--space-6);
}

/* ===== TITLE ===== */
.result-card h1[b-g625boqx9t] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--foreground);
    margin: 0 0 var(--space-4) 0;
}

/* ===== MESSAGE ===== */
.result-message[b-g625boqx9t] {
    color: var(--foreground-muted);
    font-size: var(--text-base);
    line-height: 1.6;
    margin: 0 0 var(--space-8) 0;
}

/* ===== ACTION BUTTONS ===== */
.result-actions[b-g625boqx9t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.btn-primary[b-g625boqx9t],
.btn-secondary[b-g625boqx9t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-primary[b-g625boqx9t] {
    background: var(--primary-600);
    color: white;
    border: none;
}

[data-theme="dark"] .btn-primary[b-g625boqx9t] {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
}

.btn-primary:hover[b-g625boqx9t] {
    background: var(--primary-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .btn-primary:hover[b-g625boqx9t] {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-secondary[b-g625boqx9t] {
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
}

[data-theme="dark"] .btn-secondary[b-g625boqx9t] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover[b-g625boqx9t] {
    background-color: var(--accent);
    border-color: var(--border);
}

[data-theme="dark"] .btn-secondary:hover[b-g625boqx9t] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .result-card[b-g625boqx9t] {
        padding: var(--space-8) var(--space-6);
    }

    .result-icon[b-g625boqx9t] {
        font-size: 3rem;
    }

    .result-card h1[b-g625boqx9t] {
        font-size: var(--text-xl);
    }
}
/* /Pages/Fono/Audios.razor.rz.scp.css */
/* =============================================
   AUDIOS PAGE - File Explorer Layout
   Consistent with Patients page style
   ============================================= */

/* ===== PAGE LAYOUT ===== */
.audios-page[b-lot8z76mat] {
    width: 100%;
}

/* ===== HEADER ===== */
.audios-header[b-lot8z76mat] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.audios-header-left[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.audios-title h1[b-lot8z76mat] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.audios-title p[b-lot8z76mat] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.audios-header-actions[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== BREADCRUMB ===== */
.audios-breadcrumb[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 24px;
}

.breadcrumb-item[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.breadcrumb-item:hover[b-lot8z76mat] {
    color: var(--foreground);
    background-color: var(--muted);
}

.breadcrumb-item.breadcrumb-current[b-lot8z76mat] {
    color: var(--foreground);
    font-weight: var(--font-medium);
    cursor: default;
}

.breadcrumb-item.breadcrumb-current:hover[b-lot8z76mat] {
    background-color: transparent;
}

.breadcrumb-separator[b-lot8z76mat] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* ===== TOOLBAR ===== */
.audios-toolbar[b-lot8z76mat] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 24px;
}

.toolbar-right[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.view-toggle[b-lot8z76mat] {
    display: flex;
    align-items: center;
    background-color: var(--muted);
    border-radius: var(--radius-md);
    padding: 2px;
}

.view-toggle-btn[b-lot8z76mat] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-toggle-btn:hover[b-lot8z76mat] {
    color: var(--foreground);
}

.view-toggle-btn.view-toggle-active[b-lot8z76mat] {
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
}

/* ===== BATCH ACTIONS ===== */
.batch-actions[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: 16px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-lg);
}

.batch-count[b-lot8z76mat] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.batch-buttons[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.batch-btn[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--primary-foreground);
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.batch-btn:hover[b-lot8z76mat] {
    background-color: rgba(255, 255, 255, 0.25);
}

.batch-btn.batch-btn-danger[b-lot8z76mat] {
    background-color: var(--error-500);
}

.batch-btn.batch-btn-danger:hover[b-lot8z76mat] {
    background-color: var(--error-600);
}

.batch-clear[b-lot8z76mat] {
    margin-left: auto;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.batch-clear:hover[b-lot8z76mat] {
    color: var(--primary-foreground);
}

/* ===== CONTENT AREA ===== */
.audios-content[b-lot8z76mat] {
    /* Content flows naturally */
}

/* ===== GRID VIEW ===== */
.audios-grid[b-lot8z76mat] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* ===== FOLDER CARD (Grid View) ===== */
.folder-card[b-lot8z76mat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 140px;
}

.folder-card:hover[b-lot8z76mat] {
    border-color: var(--primary);
    background-color: var(--accent);
}

.folder-card-icon[b-lot8z76mat] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: var(--radius-lg);
    color: var(--primary);
    transition: all var(--transition-fast);
}

.folder-card:hover .folder-card-icon[b-lot8z76mat] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.folder-card-name[b-lot8z76mat] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    text-align: center;
    word-break: break-word;
    line-height: 1.3;
}

.folder-card-count[b-lot8z76mat] {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

/* New Folder Card */
.folder-card-new[b-lot8z76mat] {
    border-style: dashed;
    background-color: transparent;
}

.folder-card-new:hover[b-lot8z76mat] {
    background-color: var(--accent);
    border-color: var(--primary);
}

.folder-card-new .folder-card-icon[b-lot8z76mat] {
    background-color: transparent;
    border: 2px dashed var(--border);
    color: var(--muted-foreground);
}

.folder-card-new:hover .folder-card-icon[b-lot8z76mat] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

/* ===== LIST VIEW ===== */
.audios-list[b-lot8z76mat] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ===== FOLDER ICON (List View) ===== */
.folder-icon[b-lot8z76mat] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-md);
    color: var(--primary);
    flex-shrink: 0;
}

.list-item-folder[b-lot8z76mat] {
    cursor: pointer;
}

.list-item-folder:hover .folder-icon[b-lot8z76mat] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.list-header[b-lot8z76mat] {
    display: grid;
    grid-template-columns: 40px 1fr 150px 80px 100px 100px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.list-header-checkbox[b-lot8z76mat] {
    display: flex;
    justify-content: center;
}

.list-item[b-lot8z76mat] {
    display: grid;
    grid-template-columns: 40px 1fr 150px 80px 100px 100px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-fast);
}

.list-item:last-child[b-lot8z76mat] {
    border-bottom: none;
}

.list-item:hover[b-lot8z76mat] {
    background-color: var(--accent);
}

.list-item.list-item-selected[b-lot8z76mat] {
    background-color: rgba(139, 92, 246, 0.08);
}

.list-item.list-item-playing[b-lot8z76mat] {
    background-color: rgba(139, 92, 246, 0.12);
}

.list-item-checkbox[b-lot8z76mat] {
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.list-item-name[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.audio-icon[b-lot8z76mat] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.audio-info[b-lot8z76mat] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.audio-filename[b-lot8z76mat] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-format[b-lot8z76mat] {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    text-transform: uppercase;
}

.list-item-tags[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.tags-more[b-lot8z76mat] {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    padding: 2px 6px;
    background-color: var(--muted);
    border-radius: var(--radius-full);
}

.list-item-duration[b-lot8z76mat] {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.list-item-date[b-lot8z76mat] {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.list-item-actions[b-lot8z76mat] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

/* ===== CHECKBOX ===== */
.checkbox[b-lot8z76mat] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--background);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.checkbox:hover[b-lot8z76mat] {
    border-color: var(--primary);
}

.checkbox.checkbox-checked[b-lot8z76mat] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

/* ===== ACTION BUTTONS ===== */
.action-btn[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn:hover:not(:disabled)[b-lot8z76mat] {
    background-color: var(--muted);
    color: var(--foreground);
}

.action-btn:disabled[b-lot8z76mat] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn.action-btn-active[b-lot8z76mat] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.action-btn.action-btn-active:hover:not(:disabled)[b-lot8z76mat] {
    opacity: 0.9;
}

.action-btn.action-btn-danger:hover:not(:disabled)[b-lot8z76mat] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-500);
}

/* ===== BUTTONS ===== */
.btn-primary[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.btn-primary:hover:not(:disabled)[b-lot8z76mat] {
    opacity: 0.9;
}

.btn-primary:disabled[b-lot8z76mat] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.btn-secondary:hover:not(:disabled)[b-lot8z76mat] {
    opacity: 0.8;
}

.btn-secondary:disabled[b-lot8z76mat] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-outline:hover:not(:disabled)[b-lot8z76mat] {
    background-color: var(--accent);
    border-color: var(--border);
}

.btn-outline:disabled[b-lot8z76mat] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-warning[b-lot8z76mat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-5);
    background-color: var(--warning-500, #f59e0b);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.btn-warning:hover:not(:disabled)[b-lot8z76mat] {
    opacity: 0.9;
    color: white;
}

/* ===== LOADING STATE ===== */
.loading-state[b-lot8z76mat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    gap: var(--space-4);
}

.loading-state p[b-lot8z76mat] {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-lot8z76mat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    gap: var(--space-3);
    text-align: center;
}

.empty-icon[b-lot8z76mat] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    opacity: 0.5;
}

.empty-state h3[b-lot8z76mat] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--foreground);
    margin: 0;
}

.empty-state p[b-lot8z76mat] {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0;
}

.empty-state .btn-primary[b-lot8z76mat],
.empty-state .btn-outline[b-lot8z76mat] {
    margin-top: var(--space-2);
}

/* ===== SPINNER ===== */
.spinner[b-lot8z76mat] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-lot8z76mat 0.6s linear infinite;
}

.spinner-small[b-lot8z76mat] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-lot8z76mat 0.6s linear infinite;
}

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

/* ===== AUDIO PLAYER BAR ===== */
.audio-player-bar[b-lot8z76mat] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--card);
    border-top: 1px solid var(--border);
    padding: var(--space-3) var(--space-6);
    z-index: var(--z-fixed);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .audio-player-bar[b-lot8z76mat] {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.player-content[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.player-info[b-lot8z76mat] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--foreground);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    min-width: 0;
    flex-shrink: 0;
}

.player-info svg[b-lot8z76mat] {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.player-info span[b-lot8z76mat] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.player-audio[b-lot8z76mat] {
    flex: 1;
    height: 40px;
    max-width: 600px;
}

.player-close[b-lot8z76mat] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.player-close:hover[b-lot8z76mat] {
    background-color: var(--muted);
    color: var(--foreground);
}

/* ===== DIALOG/MODAL ===== */
.dialog-overlay[b-lot8z76mat] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-4);
    animation: fadeIn-b-lot8z76mat 0.15s ease-out;
}

[data-theme="dark"] .dialog-overlay[b-lot8z76mat] {
    background-color: rgba(0, 0, 0, 0.7);
}

.dialog[b-lot8z76mat] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-lot8z76mat 0.2s ease-out;
}

.dialog.dialog-sm[b-lot8z76mat] {
    max-width: 400px;
}

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

@keyframes slideIn-b-lot8z76mat {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-header[b-lot8z76mat] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.dialog-title h3[b-lot8z76mat] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--foreground);
    margin: 0 0 4px 0;
}

.dialog-title p[b-lot8z76mat] {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0;
}

.dialog-close[b-lot8z76mat] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    color: var(--muted-foreground);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.dialog-close:hover:not(:disabled)[b-lot8z76mat] {
    background-color: var(--muted);
    color: var(--foreground);
}

.dialog-close:disabled[b-lot8z76mat] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-content[b-lot8z76mat] {
    padding: var(--space-5);
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dialog-footer[b-lot8z76mat] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

/* ===== FORM FIELDS ===== */
.form-field[b-lot8z76mat] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label[b-lot8z76mat] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
}

.form-input[b-lot8z76mat] {
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus[b-lot8z76mat] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-input:disabled[b-lot8z76mat] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== UPLOAD ZONE ===== */
.upload-zone[b-lot8z76mat] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: var(--space-8) var(--space-6);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--background);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.upload-zone:hover[b-lot8z76mat] {
    border-color: var(--ring);
    background-color: var(--accent);
}

.upload-zone.dragging[b-lot8z76mat] {
    border-color: var(--primary);
    border-style: solid;
    background-color: rgba(139, 92, 246, 0.05);
}

.upload-zone.uploading[b-lot8z76mat] {
    cursor: wait;
    pointer-events: none;
}

.upload-input[b-lot8z76mat],
[b-lot8z76mat] .upload-input,
.upload-zone input[type="file"][b-lot8z76mat] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.upload-input:disabled[b-lot8z76mat],
[b-lot8z76mat] .upload-input:disabled,
.upload-zone input[type="file"]:disabled[b-lot8z76mat] {
    cursor: not-allowed;
}

.upload-content[b-lot8z76mat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    pointer-events: none;
}

.upload-icon-wrapper[b-lot8z76mat] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: var(--radius-lg);
    color: var(--muted-foreground);
}

.upload-icon-active[b-lot8z76mat] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    animation: bounce-b-lot8z76mat 0.5s ease infinite;
}

@keyframes bounce-b-lot8z76mat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.upload-title[b-lot8z76mat] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    margin: 0;
}

.upload-subtitle[b-lot8z76mat] {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== ALERTS ===== */
.alert[b-lot8z76mat] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.alert svg[b-lot8z76mat] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-danger[b-lot8z76mat] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--error-500);
}

.alert-success[b-lot8z76mat] {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--success-500, #22c55e);
}

/* ===== TEXT UTILITIES ===== */
.text-muted[b-lot8z76mat] {
    color: var(--muted-foreground);
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .list-header[b-lot8z76mat],
    .list-item[b-lot8z76mat] {
        grid-template-columns: 40px 1fr 100px 80px;
    }

    .list-header-date[b-lot8z76mat],
    .list-item-date[b-lot8z76mat],
    .list-header-tags[b-lot8z76mat],
    .list-item-tags[b-lot8z76mat] {
        display: none;
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .audios-header[b-lot8z76mat] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        margin-bottom: 24px;
    }

    .audios-header-left[b-lot8z76mat] {
        justify-content: space-between;
    }

    .audios-header-actions[b-lot8z76mat] {
        justify-content: stretch;
    }

    .audios-header-actions .btn-primary[b-lot8z76mat],
    .audios-header-actions .btn-outline[b-lot8z76mat],
    .audios-header-actions .btn-warning[b-lot8z76mat] {
        flex: 1;
        justify-content: center;
    }

    .audios-breadcrumb[b-lot8z76mat] {
        margin-bottom: 16px;
    }

    .audios-toolbar[b-lot8z76mat] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        margin-bottom: 16px;
    }

    .toolbar-right[b-lot8z76mat] {
        justify-content: flex-end;
    }

    .batch-actions[b-lot8z76mat] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .batch-buttons[b-lot8z76mat] {
        flex-wrap: wrap;
    }

    .batch-clear[b-lot8z76mat] {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: var(--space-2);
    }

    .list-header[b-lot8z76mat],
    .list-item[b-lot8z76mat] {
        grid-template-columns: 40px 1fr 80px;
    }

    .list-header-duration[b-lot8z76mat],
    .list-item-duration[b-lot8z76mat] {
        display: none;
    }

    .player-content[b-lot8z76mat] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .player-info[b-lot8z76mat] {
        width: 100%;
        justify-content: space-between;
    }

    .player-info span[b-lot8z76mat] {
        max-width: none;
        flex: 1;
    }

    .player-audio[b-lot8z76mat] {
        width: 100%;
        max-width: none;
        order: 2;
    }

    .player-close[b-lot8z76mat] {
        position: absolute;
        right: var(--space-4);
        top: var(--space-3);
    }

    .audio-player-bar[b-lot8z76mat] {
        padding: var(--space-3) var(--space-4);
    }

    .dialog[b-lot8z76mat] {
        max-width: none;
        margin: 0;
    }

    .dialog-overlay[b-lot8z76mat] {
        padding: var(--space-4);
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .audios-title h1[b-lot8z76mat] {
        font-size: var(--text-lg);
    }

    .audios-title p[b-lot8z76mat] {
        display: none;
    }

    .audios-grid[b-lot8z76mat] {
        grid-template-columns: repeat(2, 1fr);
    }

    .folder-card[b-lot8z76mat] {
        min-height: 100px;
        padding: var(--space-3);
    }

    .folder-card-icon[b-lot8z76mat] {
        width: 36px;
        height: 36px;
    }

    .folder-card-name[b-lot8z76mat] {
        font-size: var(--text-xs);
    }

    .list-header[b-lot8z76mat],
    .list-item[b-lot8z76mat] {
        grid-template-columns: 40px 1fr 40px;
    }

    .list-header-actions[b-lot8z76mat],
    .list-item-actions[b-lot8z76mat] {
        grid-column: span 1;
    }

    .list-item-actions .action-btn:not(:first-child)[b-lot8z76mat] {
        display: none;
    }

    .upload-zone[b-lot8z76mat] {
        min-height: 160px;
        padding: var(--space-6) var(--space-4);
    }

    .upload-icon-wrapper[b-lot8z76mat] {
        width: 56px;
        height: 56px;
    }
}
/* /Pages/Fono/Billing.razor.rz.scp.css */
/* =============================================
   BILLING PAGE - shadcn/ui Style
   Consistent with Dashboard (Index)
   ============================================= */

.page-container[b-1f3qzrzc39] {
    width: 100%;
}

/* ===== PAGE HEADER ===== */
.page-header[b-1f3qzrzc39] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-1f3qzrzc39] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.page-header-content p[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.page-header-actions[b-1f3qzrzc39] {
    display: flex;
    gap: 12px;
}

/* ===== STATS GRID ===== */
.stats-grid[b-1f3qzrzc39] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-1f3qzrzc39] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.stat-card-warning[b-1f3qzrzc39] {
    background-color: rgba(234, 179, 8, 0.05);
    border-color: rgba(234, 179, 8, 0.2);
}

[data-theme="dark"] .stat-card-warning[b-1f3qzrzc39] {
    background-color: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
}

.stat-card-danger[b-1f3qzrzc39] {
    background-color: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .stat-card-danger[b-1f3qzrzc39] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-card-success[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .stat-card-success[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.stat-card-muted[b-1f3qzrzc39] {
    background-color: var(--accent);
    border-color: var(--border);
    opacity: 0.7;
}

.stat-header[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title[b-1f3qzrzc39] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.stat-icon[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.stat-icon-warning[b-1f3qzrzc39] {
    color: var(--warning-500, #eab308);
}

.stat-icon-danger[b-1f3qzrzc39] {
    color: var(--error-500);
}

.stat-icon-success[b-1f3qzrzc39] {
    color: var(--success-500, #22c55e);
}

.stat-value[b-1f3qzrzc39] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.stat-value-small[b-1f3qzrzc39] {
    font-size: 24px;
}

.stat-value-separator[b-1f3qzrzc39] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.stat-value-limit[b-1f3qzrzc39] {
    font-size: 20px;
    font-weight: 400;
    color: var(--muted-foreground);
}

.stat-loading[b-1f3qzrzc39] {
    color: var(--muted-foreground);
}

.stat-muted[b-1f3qzrzc39] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.stat-footer[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-limit[b-1f3qzrzc39] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.stat-warning[b-1f3qzrzc39] {
    color: var(--warning-600, #ca8a04);
}

[data-theme="dark"] .stat-warning[b-1f3qzrzc39] {
    color: #fcd34d;
}

/* ===== SECTIONS ===== */
.section[b-1f3qzrzc39] {
    margin-bottom: 32px;
}

.section-header[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h2[b-1f3qzrzc39] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.section-link[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--muted-foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.section-link:hover[b-1f3qzrzc39] {
    color: var(--foreground);
}

/* ===== CONTENT CARD ===== */
.content-card[b-1f3qzrzc39] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

/* ===== BUTTONS ===== */
.btn-outline[b-1f3qzrzc39] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-outline:hover:not(:disabled)[b-1f3qzrzc39] {
    background-color: var(--accent);
}

.btn-small[b-1f3qzrzc39] {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* ===== LOADING STATE ===== */
.loading-state[b-1f3qzrzc39] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
}

.loading-state p[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.spinner[b-1f3qzrzc39] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-1f3qzrzc39 0.8s linear infinite;
}

.spinner-small[b-1f3qzrzc39] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-1f3qzrzc39 0.6s linear infinite;
}

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

/* ===== ALERTS ===== */
.alert[b-1f3qzrzc39] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.alert svg[b-1f3qzrzc39] {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-content[b-1f3qzrzc39] {
    flex: 1;
}

.alert-content strong[b-1f3qzrzc39] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-content p[b-1f3qzrzc39] {
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.alert-warning[b-1f3qzrzc39] {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.alert-warning svg[b-1f3qzrzc39] {
    color: var(--warning-500, #eab308);
}

.alert-warning .alert-content strong[b-1f3qzrzc39] {
    color: var(--warning-700, #a16207);
}

.alert-warning .alert-content p[b-1f3qzrzc39] {
    color: var(--muted-foreground);
}

[data-theme="dark"] .alert-warning[b-1f3qzrzc39] {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

[data-theme="dark"] .alert-warning .alert-content strong[b-1f3qzrzc39] {
    color: #fcd34d;
}

.alert-danger[b-1f3qzrzc39] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-danger svg[b-1f3qzrzc39] {
    color: var(--error-500);
}

.alert-danger .alert-content strong[b-1f3qzrzc39] {
    color: var(--error-700, #b91c1c);
}

.alert-danger .alert-content p[b-1f3qzrzc39] {
    color: var(--muted-foreground);
}

[data-theme="dark"] .alert-danger[b-1f3qzrzc39] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .alert-danger .alert-content strong[b-1f3qzrzc39] {
    color: #fca5a5;
}

.alert-muted[b-1f3qzrzc39] {
    background-color: var(--accent);
    border: 1px solid var(--border);
}

.alert-muted svg[b-1f3qzrzc39] {
    color: var(--muted-foreground);
}

.alert-muted .alert-content strong[b-1f3qzrzc39] {
    color: var(--foreground);
}

.alert-muted .alert-content p[b-1f3qzrzc39] {
    color: var(--muted-foreground);
}

/* ===== TRIAL ALERT ===== */
.alert-trial[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    margin-bottom: 24px;
}

[data-theme="dark"] .alert-trial[b-1f3qzrzc39] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.alert-trial-icon[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.alert-trial-icon svg[b-1f3qzrzc39] {
    color: white;
}

.alert-trial-content[b-1f3qzrzc39] {
    flex: 1;
}

.alert-trial-content strong[b-1f3qzrzc39] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 4px;
}

.alert-trial-content p[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

.btn-trial-cta[b-1f3qzrzc39] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-trial-cta:hover[b-1f3qzrzc39] {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ===== CHOOSE PLAN CTA ===== */
.choose-plan-cta[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-top: 24px;
}

.choose-plan-content h3[b-1f3qzrzc39] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.choose-plan-content p[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    max-width: 500px;
}

.btn-primary[b-1f3qzrzc39] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-primary:hover[b-1f3qzrzc39] {
    opacity: 0.9;
}

/* ===== MODAL ===== */
.modal-overlay[b-1f3qzrzc39] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    animation: fadeIn-b-1f3qzrzc39 0.2s ease;
}

[data-theme="dark"] .modal-overlay[b-1f3qzrzc39] {
    background-color: rgba(0, 0, 0, 0.7);
}

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

.modal-container[b-1f3qzrzc39] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp-b-1f3qzrzc39 0.3s ease;
}

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

.modal-header[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background-color: var(--card);
    z-index: 1;
}

.modal-header h2[b-1f3qzrzc39] {
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.modal-close[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}

.modal-close:hover[b-1f3qzrzc39] {
    background-color: var(--accent);
    color: var(--foreground);
}

.modal-body[b-1f3qzrzc39] {
    padding: 32px;
}

/* ===== USAGE SECTION ===== */
.usage-grid[b-1f3qzrzc39] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.usage-item[b-1f3qzrzc39] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usage-info[b-1f3qzrzc39] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usage-label[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--foreground);
}

.usage-value[b-1f3qzrzc39] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.usage-bar[b-1f3qzrzc39] {
    height: 8px;
    background-color: var(--accent);
    border-radius: 9999px;
    overflow: hidden;
}

[data-theme="dark"] .usage-bar[b-1f3qzrzc39] {
    background-color: rgba(255, 255, 255, 0.1);
}

.usage-fill[b-1f3qzrzc39] {
    height: 100%;
    background-color: var(--primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.usage-fill.exceeded[b-1f3qzrzc39] {
    background-color: var(--error-500);
}

/* ===== BILLING TOGGLE ===== */
.billing-toggle-container[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.billing-toggle-label[b-1f3qzrzc39] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: color 0.2s;
}

.billing-toggle-label.active[b-1f3qzrzc39] {
    color: var(--foreground);
}

.billing-toggle[b-1f3qzrzc39] {
    position: relative;
    width: 48px;
    height: 26px;
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.billing-toggle:hover[b-1f3qzrzc39] {
    border-color: var(--primary);
}

.billing-toggle-switch[b-1f3qzrzc39] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--foreground);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.billing-toggle-switch.yearly[b-1f3qzrzc39] {
    transform: translateX(22px);
}

.billing-discount[b-1f3qzrzc39] {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 8px;
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-600, #16a34a);
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
}

[data-theme="dark"] .billing-discount[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.plan-monthly-equivalent[b-1f3qzrzc39] {
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: 4px;
}

/* ===== PLANS GRID ===== */
.plans-grid[b-1f3qzrzc39] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.plan-card[b-1f3qzrzc39] {
    position: relative;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.plan-card:hover[b-1f3qzrzc39] {
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .plan-card:hover[b-1f3qzrzc39] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.plan-card.current[b-1f3qzrzc39] {
    border-color: var(--success-500, #22c55e);
    background-color: rgba(34, 197, 94, 0.03);
}

[data-theme="dark"] .plan-card.current[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.08);
}

.plan-card.featured[b-1f3qzrzc39] {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0.01) 100%);
}

[data-theme="dark"] .plan-card.featured[b-1f3qzrzc39] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.03) 100%);
}

.plan-badge-featured[b-1f3qzrzc39] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    color: white;
    padding: 4px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.plan-card-header[b-1f3qzrzc39] {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.plan-card-icon[b-1f3qzrzc39] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background-color: var(--accent);
    border-radius: 12px;
    color: var(--muted-foreground);
}

.plan-card-icon.basic[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-500, #22c55e);
}

.plan-card-icon.pro[b-1f3qzrzc39] {
    background-color: rgba(234, 179, 8, 0.1);
    color: var(--warning-500, #eab308);
}

.plan-card-icon.clinic[b-1f3qzrzc39] {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

[data-theme="dark"] .plan-card-icon.basic[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .plan-card-icon.pro[b-1f3qzrzc39] {
    background-color: rgba(234, 179, 8, 0.15);
}

[data-theme="dark"] .plan-card-icon.clinic[b-1f3qzrzc39] {
    background-color: rgba(59, 130, 246, 0.15);
}

.plan-card-header h3[b-1f3qzrzc39] {
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 12px 0;
}

.plan-card-price[b-1f3qzrzc39] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.price-currency[b-1f3qzrzc39] {
    font-size: 16px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.price-value[b-1f3qzrzc39] {
    font-size: 40px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    line-height: 1;
}

.price-period[b-1f3qzrzc39] {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== PLAN FEATURES ===== */
.plan-features[b-1f3qzrzc39] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex: 1;
}

.plan-features li[b-1f3qzrzc39] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
}

.plan-features li:last-child[b-1f3qzrzc39] {
    border-bottom: none;
}

.plan-features li svg[b-1f3qzrzc39] {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.plan-features li strong[b-1f3qzrzc39] {
    font-weight: 600;
}

/* ===== PLAN CARD FOOTER ===== */
.plan-card-footer[b-1f3qzrzc39] {
    margin-top: auto;
}

.btn-current[b-1f3qzrzc39],
.btn-select[b-1f3qzrzc39] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.btn-current[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-600, #16a34a);
    cursor: default;
}

[data-theme="dark"] .btn-current[b-1f3qzrzc39] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.btn-select[b-1f3qzrzc39] {
    background-color: var(--accent);
    color: var(--foreground);
    border: 1px solid var(--border);
}

.btn-select:hover:not(:disabled)[b-1f3qzrzc39] {
    background-color: var(--muted);
    border-color: var(--foreground);
}

.btn-select.featured[b-1f3qzrzc39] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.btn-select.featured:hover:not(:disabled)[b-1f3qzrzc39] {
    opacity: 0.9;
}

.btn-select.upgrade[b-1f3qzrzc39] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.btn-select.upgrade:hover:not(:disabled)[b-1f3qzrzc39] {
    opacity: 0.9;
}

.btn-select:disabled[b-1f3qzrzc39] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== PLANS INFO ===== */
.plans-info[b-1f3qzrzc39] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    background-color: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
}

.plans-info svg[b-1f3qzrzc39] {
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 2px;
}

.plans-info p[b-1f3qzrzc39] {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

[data-theme="dark"] .plans-info[b-1f3qzrzc39] {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .stats-grid[b-1f3qzrzc39] {
        grid-template-columns: repeat(2, 1fr);
    }

    .plans-grid[b-1f3qzrzc39] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .plan-card.featured[b-1f3qzrzc39] {
        order: -1;
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-1f3qzrzc39] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-1f3qzrzc39] {
        width: 100%;
    }

    .page-header-actions .btn-outline[b-1f3qzrzc39] {
        flex: 1;
        justify-content: center;
    }

    .stat-card[b-1f3qzrzc39] {
        padding: 16px;
    }

    .stat-value[b-1f3qzrzc39] {
        font-size: 24px;
    }

    .stat-value-small[b-1f3qzrzc39] {
        font-size: 18px;
    }

    .alert[b-1f3qzrzc39] {
        flex-direction: column;
        gap: 12px;
    }

    .alert .btn-outline[b-1f3qzrzc39] {
        width: 100%;
    }

    .alert-trial[b-1f3qzrzc39] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .alert-trial-content strong[b-1f3qzrzc39] {
        font-size: 15px;
    }

    .btn-trial-cta[b-1f3qzrzc39] {
        width: 100%;
    }

    .choose-plan-cta[b-1f3qzrzc39] {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .choose-plan-content p[b-1f3qzrzc39] {
        max-width: none;
    }

    .btn-primary[b-1f3qzrzc39] {
        width: 100%;
    }

    .modal-overlay[b-1f3qzrzc39] {
        padding: 16px;
    }

    .modal-header[b-1f3qzrzc39] {
        padding: 20px 24px;
    }

    .modal-body[b-1f3qzrzc39] {
        padding: 24px;
    }

    .modal-container .plans-grid[b-1f3qzrzc39] {
        max-width: none;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .page-header-content h1[b-1f3qzrzc39] {
        font-size: 20px;
    }

    .stats-grid[b-1f3qzrzc39] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-1f3qzrzc39] {
        padding: 12px 16px;
    }

    .stat-value[b-1f3qzrzc39] {
        font-size: 20px;
    }

    .content-card[b-1f3qzrzc39] {
        padding: 16px;
    }

    .plan-card[b-1f3qzrzc39] {
        padding: 24px 16px;
    }

    .price-value[b-1f3qzrzc39] {
        font-size: 32px;
    }
}
/* /Pages/Fono/Index.razor.rz.scp.css */
/* =============================================
   DASHBOARD PAGE - shadcn/ui Style
   ============================================= */

.dashboard[b-g0xa0amruw] {
    width: 100%;
}

/* ===== ALERT BANNER ===== */
.alert-banner[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.alert-banner.alert-warning[b-g0xa0amruw] {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.alert-banner.alert-error[b-g0xa0amruw] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-icon[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-warning .alert-icon[b-g0xa0amruw] {
    color: #eab308;
}

.alert-error .alert-icon[b-g0xa0amruw] {
    color: #ef4444;
}

.alert-content[b-g0xa0amruw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert-title[b-g0xa0amruw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.alert-description[b-g0xa0amruw] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.alert-action[b-g0xa0amruw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.alert-action:hover[b-g0xa0amruw] {
    background-color: var(--secondary);
    text-decoration: none;
}

/* ===== PAGE HEADER ===== */
.page-header[b-g0xa0amruw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-g0xa0amruw] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.page-header-content p[b-g0xa0amruw] {
    font-size: 14px;
    color: var(--muted-foreground);
}

.page-header-actions[b-g0xa0amruw] {
    display: flex;
    gap: 12px;
}

.btn-primary[b-g0xa0amruw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s;
}

.btn-primary:hover[b-g0xa0amruw] {
    background-color: var(--secondary);
    text-decoration: none;
}

/* ===== STATS GRID ===== */
.stats-grid[b-g0xa0amruw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-g0xa0amruw] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.stat-header[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title[b-g0xa0amruw] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.stat-icon[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.stat-value[b-g0xa0amruw] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.stat-value.stat-plan[b-g0xa0amruw] {
    font-size: 24px;
}

.stat-loading[b-g0xa0amruw] {
    color: var(--zinc-600);
}

.stat-footer[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-limit[b-g0xa0amruw] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.stat-link[b-g0xa0amruw] {
    font-size: 13px;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stat-link:hover[b-g0xa0amruw] {
    color: var(--muted-foreground);
}

/* ===== SECTIONS ===== */
.section[b-g0xa0amruw] {
    margin-bottom: 32px;
}

.section-header[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title[b-g0xa0amruw] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 16px;
}

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

.section-link[b-g0xa0amruw] {
    font-size: 14px;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s;
}

.section-link:hover[b-g0xa0amruw] {
    color: var(--foreground);
}

/* ===== CARDS GRID ===== */
.cards-grid[b-g0xa0amruw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

.card-link[b-g0xa0amruw] {
    text-decoration: none;
    display: flex;
    height: 100%;
}

.card-link:hover[b-g0xa0amruw] {
    text-decoration: none;
}

.card[b-g0xa0amruw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s, background-color 0.15s;
    width: 100%;
    height: 100%;
}

.card:hover[b-g0xa0amruw] {
    border-color: var(--zinc-700);
    background-color: var(--accent);
}

.card-icon-box[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--accent);
    border-radius: 10px;
    color: var(--foreground);
    flex-shrink: 0;
}

.card-body[b-g0xa0amruw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.card-body h3[b-g0xa0amruw] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 4px;
}

.card-body p[b-g0xa0amruw] {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.card-arrow[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    color: var(--zinc-600);
    transition: color 0.15s, transform 0.15s;
    margin-top: auto;
}

.card:hover .card-arrow[b-g0xa0amruw] {
    color: var(--foreground);
    transform: translateX(4px);
}

/* ===== USAGE CARD ===== */
.usage-card[b-g0xa0amruw] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.usage-items[b-g0xa0amruw] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.usage-item[b-g0xa0amruw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usage-item-header[b-g0xa0amruw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.usage-item-label[b-g0xa0amruw] {
    font-size: 14px;
    color: var(--muted-foreground);
}

.usage-item-value[b-g0xa0amruw] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.usage-bar[b-g0xa0amruw] {
    height: 8px;
    background-color: var(--accent);
    border-radius: 4px;
    overflow: hidden;
}

.usage-bar-fill[b-g0xa0amruw] {
    height: 100%;
    background-color: var(--foreground);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.usage-bar-fill.exceeded[b-g0xa0amruw] {
    background-color: var(--error-500);
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .stats-grid[b-g0xa0amruw] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cards-grid[b-g0xa0amruw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-g0xa0amruw] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-g0xa0amruw] {
        width: 100%;
    }

    .page-header-actions .btn-primary[b-g0xa0amruw] {
        width: 100%;
    }

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

    .cards-grid[b-g0xa0amruw] {
        grid-template-columns: 1fr;
    }

    .alert-banner[b-g0xa0amruw] {
        flex-direction: column;
        text-align: center;
    }

    .alert-action[b-g0xa0amruw] {
        width: 100%;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .stats-grid[b-g0xa0amruw] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-g0xa0amruw] {
        padding: 20px;
    }

    .stat-value[b-g0xa0amruw] {
        font-size: 28px;
    }

    .page-header-content h1[b-g0xa0amruw] {
        font-size: 24px;
    }

    .card[b-g0xa0amruw] {
        padding: 20px;
    }

    .usage-card[b-g0xa0amruw] {
        padding: 20px;
    }
}
/* /Pages/Fono/Login.razor.rz.scp.css */
/* =============================================
   AUTH PAGES - shadcn/ui style
   Split-screen layout with theme support
   ============================================= */

/* ===== CONTAINER - Split Screen ===== */
.auth-container[b-d85gm461f3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}

/* ===== LEFT PANEL - Dark Branding ===== */
.auth-panel-left[b-d85gm461f3] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background-color: var(--card);
    color: var(--foreground);
}

.auth-brand[b-d85gm461f3] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
}

.auth-brand:hover[b-d85gm461f3] {
    text-decoration: none;
    color: var(--foreground);
}

.auth-logo[b-d85gm461f3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
}

.auth-logo svg[b-d85gm461f3] {
    width: 24px;
    height: 24px;
}

.auth-brand-name[b-d85gm461f3] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.auth-testimonial[b-d85gm461f3] {
    max-width: 480px;
}

.auth-testimonial blockquote[b-d85gm461f3] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--foreground);
    margin: 0 0 24px 0;
    font-style: normal;
}

.auth-testimonial blockquote[b-d85gm461f3]::before {
    content: '"';
}

.auth-testimonial blockquote[b-d85gm461f3]::after {
    content: '"';
}

.auth-testimonial footer[b-d85gm461f3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author[b-d85gm461f3] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.testimonial-role[b-d85gm461f3] {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== RIGHT PANEL - Form Area ===== */
.auth-panel-right[b-d85gm461f3] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--foreground);
}

.auth-header-actions[b-d85gm461f3] {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-header-link[b-d85gm461f3] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background-color 0.15s;
}

.auth-header-link:hover[b-d85gm461f3] {
    background-color: var(--accent);
    text-decoration: none;
}

/* ===== FORM CONTAINER ===== */
.auth-form-container[b-d85gm461f3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 48px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.auth-form-header[b-d85gm461f3] {
    text-align: center;
    margin-bottom: 40px;
}

.auth-title[b-d85gm461f3] {
    font-size: 28px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 12px 0;
    letter-spacing: -0.025em;
}

.auth-subtitle[b-d85gm461f3] {
    font-size: 16px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== FORM ===== */
.auth-form[b-d85gm461f3] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.auth-field[b-d85gm461f3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-label[b-d85gm461f3] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.auth-input[b-d85gm461f3] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    box-sizing: border-box;
}

[data-theme="dark"] .auth-input[b-d85gm461f3] {
    background-color: var(--zinc-800);
    border-color: var(--zinc-700);
}

.auth-input[b-d85gm461f3]::placeholder {
    color: var(--muted-foreground);
}

.auth-input:focus[b-d85gm461f3] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
}

[data-theme="dark"] .auth-input:focus[b-d85gm461f3] {
    background-color: var(--zinc-900);
}

.auth-input:disabled[b-d85gm461f3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== VALIDATION ===== */
[b-d85gm461f3] .validation-message {
    font-size: 13px;
    color: #ef4444;
    margin-top: 6px;
}

/* ===== ALERT ===== */
.auth-alert[b-d85gm461f3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
}

.auth-alert-error[b-d85gm461f3] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.auth-alert svg[b-d85gm461f3] {
    flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.auth-btn[b-d85gm461f3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
    margin-top: 16px;
}

.auth-btn:disabled[b-d85gm461f3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-btn-primary[b-d85gm461f3] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.auth-btn-primary:hover:not(:disabled)[b-d85gm461f3] {
    background-color: var(--secondary);
}

.auth-btn-outline[b-d85gm461f3] {
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    margin-top: 0;
}

.auth-btn-outline:hover:not(:disabled)[b-d85gm461f3] {
    background-color: var(--accent);
}

/* ===== SPINNER ===== */
.auth-spinner[b-d85gm461f3] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--muted-foreground);
    border-top-color: var(--background);
    border-radius: 50%;
    animation: spin-b-d85gm461f3 0.6s linear infinite;
}

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

/* ===== DIVIDER ===== */
.auth-divider[b-d85gm461f3] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 24px 0;
}

.auth-divider[b-d85gm461f3]::before,
.auth-divider[b-d85gm461f3]::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.auth-divider span[b-d85gm461f3] {
    font-size: 12px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ===== TERMS ===== */
.auth-terms[b-d85gm461f3] {
    font-size: 13px;
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 32px;
    line-height: 1.6;
}

.auth-terms a[b-d85gm461f3] {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-terms a:hover[b-d85gm461f3] {
    color: var(--muted-foreground);
}

/* ===== FOOTER ===== */
.auth-footer[b-d85gm461f3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 14px;
    color: var(--muted-foreground);
}

.auth-link[b-d85gm461f3] {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-link:hover[b-d85gm461f3] {
    color: var(--muted-foreground);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .auth-container[b-d85gm461f3] {
        grid-template-columns: 1fr;
    }

    .auth-panel-left[b-d85gm461f3] {
        display: none;
    }

    .auth-panel-right[b-d85gm461f3] {
        min-height: 100vh;
    }
}

@media (max-width: 480px) {
    .auth-header-actions[b-d85gm461f3] {
        top: 20px;
        right: 20px;
    }

    .auth-form-container[b-d85gm461f3] {
        padding: 32px 24px;
        padding-top: 80px;
    }

    .auth-title[b-d85gm461f3] {
        font-size: 24px;
    }

    .auth-subtitle[b-d85gm461f3] {
        font-size: 14px;
    }

    .theme-toggle-fixed[b-d85gm461f3] {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .theme-toggle-fixed svg[b-d85gm461f3] {
        width: 22px;
        height: 22px;
    }
}

/* ===== THEME TOGGLE - Fixed Bottom Right ===== */
.theme-toggle-fixed[b-d85gm461f3] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.theme-toggle-fixed:hover[b-d85gm461f3] {
    transform: scale(1.1);
    opacity: 0.8;
}

.theme-toggle-fixed svg[b-d85gm461f3] {
    width: 24px;
    height: 24px;
    stroke: var(--muted-foreground);
}

.theme-toggle-fixed:hover svg[b-d85gm461f3] {
    stroke: var(--foreground);
}
/* /Pages/Fono/PatientDetail.razor.rz.scp.css */
/* =============================================
   PATIENT DETAIL PAGE - shadcn/ui Style
   ============================================= */

.patient-detail-page[b-04i7yvt4kt] {
    width: 100%;
}

/* ===== LOADING & ERROR STATES ===== */
.loading-state[b-04i7yvt4kt],
.error-state[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
}

.loading-state .spinner[b-04i7yvt4kt] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--foreground);
    border-radius: 50%;
    animation: spin-b-04i7yvt4kt 0.6s linear infinite;
    margin-bottom: 16px;
}

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

.loading-state p[b-04i7yvt4kt],
.error-state p[b-04i7yvt4kt] {
    color: var(--muted-foreground);
    margin: 0;
    font-size: 14px;
}

.error-icon[b-04i7yvt4kt] {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-state h2[b-04i7yvt4kt] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.error-state p[b-04i7yvt4kt] {
    margin-bottom: 24px;
}

/* ===== PAGE HEADER ===== */
.page-header[b-04i7yvt4kt] {
    margin-bottom: 32px;
}

.back-link[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    transition: color 0.15s;
}

.back-link:hover[b-04i7yvt4kt] {
    color: var(--foreground);
}

.back-link svg[b-04i7yvt4kt] {
    flex-shrink: 0;
}

.header-row[b-04i7yvt4kt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.header-main[b-04i7yvt4kt] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.patient-avatar[b-04i7yvt4kt] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    flex-shrink: 0;
}

.header-info[b-04i7yvt4kt] {
    flex: 1;
    min-width: 0;
}

.header-title-row[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.header-info h1[b-04i7yvt4kt] {
    font-size: 24px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    letter-spacing: -0.025em;
}

.header-meta[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.meta-item[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-foreground);
    font-size: 14px;
}

.meta-item svg[b-04i7yvt4kt] {
    flex-shrink: 0;
    opacity: 0.7;
}

.status-badge[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active[b-04i7yvt4kt] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-badge.inactive[b-04i7yvt4kt] {
    background-color: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.status-badge.archived[b-04i7yvt4kt] {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.header-actions[b-04i7yvt4kt] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.btn[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled[b-04i7yvt4kt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-04i7yvt4kt] {
    background-color: var(--primary);
    border: none;
    color: var(--primary-foreground);
}

.btn-primary:hover:not(:disabled)[b-04i7yvt4kt] {
    opacity: 0.9;
}

.btn-outline[b-04i7yvt4kt] {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
}

.btn-outline:hover:not(:disabled)[b-04i7yvt4kt] {
    background-color: var(--accent);
}

.btn-outline-destructive[b-04i7yvt4kt] {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
}

.btn-outline-destructive:hover:not(:disabled)[b-04i7yvt4kt] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

/* ===== TABS - shadcn style ===== */
.tabs[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--muted);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 24px;
}

.tab[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tab svg[b-04i7yvt4kt] {
    flex-shrink: 0;
}

.tab:hover[b-04i7yvt4kt] {
    color: var(--foreground);
}

.tab.active[b-04i7yvt4kt] {
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.tab-badge[b-04i7yvt4kt] {
    background-color: var(--muted);
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.tab.active .tab-badge[b-04i7yvt4kt] {
    background-color: var(--muted);
}

/* ===== TAB CONTENT ===== */
.tab-content[b-04i7yvt4kt] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}

/* ===== ALERTS ===== */
.alert[b-04i7yvt4kt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
}

.alert-icon[b-04i7yvt4kt] {
    flex-shrink: 0;
}

.alert-success[b-04i7yvt4kt] {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

/* ===== EMPTY STATE - shadcn/ui Style ===== */
.empty-state[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-icon-wrapper[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--muted);
    border-radius: 50%;
    margin-bottom: 16px;
}

.empty-icon[b-04i7yvt4kt] {
    color: var(--muted-foreground);
}

.empty-title[b-04i7yvt4kt] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

.empty-description[b-04i7yvt4kt] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 24px 0;
    max-width: 360px;
    line-height: 1.5;
}

.empty-state .btn[b-04i7yvt4kt] {
    margin-top: 0;
}

/* ===== SESSIONS TAB ===== */

.sessions-header[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.sessions-count[b-04i7yvt4kt] {
    font-size: 14px;
    color: var(--muted-foreground);
}

.btn-sm[b-04i7yvt4kt] {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.sessions-list[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-item[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s;
}

.session-item:hover[b-04i7yvt4kt] {
    background-color: var(--accent);
    border-color: var(--primary);
}

.session-status-dot[b-04i7yvt4kt] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--muted-foreground);
}

.session-status-dot.active[b-04i7yvt4kt] {
    background-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.session-status-dot.ended[b-04i7yvt4kt] {
    background-color: var(--muted-foreground);
}

.session-info[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.session-title[b-04i7yvt4kt] {
    color: var(--foreground);
    font-weight: 500;
    font-size: 14px;
}

.session-meta-row[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.session-date[b-04i7yvt4kt] {
    color: var(--muted-foreground);
    font-size: 13px;
}

.session-results[b-04i7yvt4kt] {
    color: var(--muted-foreground);
    font-size: 13px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.session-accuracy[b-04i7yvt4kt] {
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.session-accuracy.high[b-04i7yvt4kt],
.high[b-04i7yvt4kt] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.session-accuracy.medium[b-04i7yvt4kt],
.medium[b-04i7yvt4kt] {
    background-color: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.session-accuracy.low[b-04i7yvt4kt],
.low[b-04i7yvt4kt] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.session-status-badge[b-04i7yvt4kt] {
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.session-status-badge.active[b-04i7yvt4kt] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.session-status-badge.ended[b-04i7yvt4kt] {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

/* ===== PROGRESS TAB ===== */

/* Progress Header */
.progress-header[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.progress-title[b-04i7yvt4kt] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    letter-spacing: -0.025em;
}

.btn-spinner-small[b-04i7yvt4kt] {
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-04i7yvt4kt 0.6s linear infinite;
}

/* Alert Error */
.alert-error[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.alert-close[b-04i7yvt4kt] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.alert-close:hover[b-04i7yvt4kt] {
    opacity: 1;
}

.quick-stats[b-04i7yvt4kt],
.quick-stats-grid[b-04i7yvt4kt] {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.stat-card[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 32px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 100px;
}

.stat-value[b-04i7yvt4kt] {
    font-size: 24px;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.025em;
}

.stat-label[b-04i7yvt4kt] {
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: 4px;
}

/* ===== STATISTICS FILTERS ===== */
.statistics-filters[b-04i7yvt4kt] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.statistics-filters .filter-group[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.statistics-filters .filter-label[b-04i7yvt4kt] {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.statistics-filters .filter-select[b-04i7yvt4kt] {
    height: 38px;
    padding: 0 12px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--foreground);
    cursor: pointer;
    transition: border-color 0.15s;
}

.statistics-filters .filter-select:hover[b-04i7yvt4kt] {
    border-color: var(--muted-foreground);
}

.statistics-filters .filter-select:focus[b-04i7yvt4kt] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.btn-clear-filters[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-clear-filters:hover[b-04i7yvt4kt] {
    background-color: var(--accent);
    color: var(--foreground);
    border-color: var(--muted-foreground);
}

/* ===== STATS OVERVIEW ===== */
.stats-overview[b-04i7yvt4kt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card-large[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.stat-icon[b-04i7yvt4kt] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.stat-icon.primary[b-04i7yvt4kt] {
    background-color: rgba(139, 92, 246, 0.1);
    color: var(--primary);
}

.stat-icon.success[b-04i7yvt4kt] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.stat-icon.warning[b-04i7yvt4kt] {
    background-color: rgba(251, 191, 36, 0.1);
    color: #d97706;
}

.stat-icon.danger[b-04i7yvt4kt] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.stat-icon.muted[b-04i7yvt4kt] {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.stat-content[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-card-large .stat-value[b-04i7yvt4kt] {
    font-size: 28px;
}

.stat-card-large .stat-label[b-04i7yvt4kt] {
    margin-top: 0;
    font-size: 13px;
}

/* ===== CHART SECTIONS ===== */
.chart-section[b-04i7yvt4kt] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.section-title[b-04i7yvt4kt] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 20px 0;
    letter-spacing: -0.025em;
}

/* ===== AREA CHART (shadcn/ui style) ===== */
.area-chart-container[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.area-chart-wrapper[b-04i7yvt4kt] {
    display: flex;
    gap: 12px;
    padding: 20px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.area-chart-y-axis[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted-foreground);
    padding: 4px 0;
    min-width: 36px;
    text-align: right;
}

.area-chart-main[b-04i7yvt4kt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.area-chart-svg-container[b-04i7yvt4kt] {
    position: relative;
    width: 100%;
    height: 180px;
}

.area-chart-svg[b-04i7yvt4kt] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid-line[b-04i7yvt4kt] {
    stroke: var(--border);
    stroke-width: 0.5;
    stroke-dasharray: 4 4;
}

.area-fill[b-04i7yvt4kt] {
    transition: opacity 0.2s ease;
}

.area-line[b-04i7yvt4kt] {
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Pontos como elementos HTML para não distorcer */
.area-points-overlay[b-04i7yvt4kt] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.area-point[b-04i7yvt4kt] {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--primary);
    border: 2px solid var(--card);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.area-point:hover[b-04i7yvt4kt] {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.area-chart-x-axis[b-04i7yvt4kt] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted-foreground);
    padding: 0 2px;
}

/* Legend below chart */
.area-chart-legend[b-04i7yvt4kt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.legend-item[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.15s ease;
}

.legend-item:hover[b-04i7yvt4kt] {
    border-color: var(--primary);
}

.legend-date[b-04i7yvt4kt] {
    font-size: 11px;
    color: var(--muted-foreground);
    font-weight: 500;
}

.legend-value[b-04i7yvt4kt] {
    font-size: 18px;
    font-weight: 700;
}

.legend-sessions[b-04i7yvt4kt] {
    font-size: 10px;
    color: var(--muted-foreground);
}

/* Dark mode adjustments */
[data-theme="dark"] .area-chart-wrapper[b-04i7yvt4kt] {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .legend-item[b-04i7yvt4kt] {
    background: rgba(255, 255, 255, 0.03);
}

/* ===== SOUND PERFORMANCE ===== */
.sound-performance-list[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sound-item[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sound-info[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.sound-name[b-04i7yvt4kt] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.sound-attempts[b-04i7yvt4kt] {
    font-size: 12px;
    color: var(--muted-foreground);
}

.sound-progress[b-04i7yvt4kt] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar[b-04i7yvt4kt] {
    flex: 1;
    height: 8px;
    background-color: var(--muted);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-04i7yvt4kt] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-fill.high[b-04i7yvt4kt] {
    background-color: #16a34a;
}

.progress-fill.medium[b-04i7yvt4kt] {
    background-color: #d97706;
}

.progress-fill.low[b-04i7yvt4kt] {
    background-color: #dc2626;
}

.progress-value[b-04i7yvt4kt] {
    font-size: 14px;
    font-weight: 600;
    min-width: 48px;
    text-align: right;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .header-row[b-04i7yvt4kt] {
        flex-direction: column;
        gap: 16px;
    }

    .header-actions[b-04i7yvt4kt] {
        width: 100%;
        flex-wrap: wrap;
    }

    .header-actions .btn[b-04i7yvt4kt] {
        flex: 1;
        min-width: 140px;
    }

    .tabs[b-04i7yvt4kt] {
        width: 100%;
    }

    .tab[b-04i7yvt4kt] {
        flex: 1;
        justify-content: center;
    }

    .quick-stats[b-04i7yvt4kt],
    .quick-stats-grid[b-04i7yvt4kt] {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-card[b-04i7yvt4kt] {
        min-width: auto;
    }

    .stats-overview[b-04i7yvt4kt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card-large[b-04i7yvt4kt] {
        padding: 16px;
    }

    .stat-icon[b-04i7yvt4kt] {
        width: 40px;
        height: 40px;
    }

    .stat-card-large .stat-value[b-04i7yvt4kt] {
        font-size: 22px;
    }

    .area-chart-wrapper[b-04i7yvt4kt] {
        padding: 12px;
    }

    .area-chart-svg-container[b-04i7yvt4kt] {
        height: 140px;
    }

    .area-chart-legend[b-04i7yvt4kt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .legend-item[b-04i7yvt4kt] {
        padding: 8px;
    }

    .legend-value[b-04i7yvt4kt] {
        font-size: 16px;
    }

    .area-point[b-04i7yvt4kt] {
        width: 8px;
        height: 8px;
    }

    .sound-item[b-04i7yvt4kt] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sound-info[b-04i7yvt4kt] {
        min-width: auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .session-item[b-04i7yvt4kt] {
        flex-wrap: wrap;
    }

    .session-info[b-04i7yvt4kt] {
        flex: 1 1 calc(100% - 40px);
    }

    .session-accuracy[b-04i7yvt4kt],
    .session-status-badge[b-04i7yvt4kt] {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .patient-avatar[b-04i7yvt4kt] {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .header-info h1[b-04i7yvt4kt] {
        font-size: 18px;
    }

    .header-title-row[b-04i7yvt4kt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tab-content[b-04i7yvt4kt] {
        padding: 16px;
    }

    .tab span:not(.tab-badge)[b-04i7yvt4kt] {
        display: none;
    }

    .tab svg[b-04i7yvt4kt] {
        display: block;
    }

    .tab[b-04i7yvt4kt] {
        padding: 10px 14px;
    }

    .stats-overview[b-04i7yvt4kt] {
        grid-template-columns: 1fr;
    }

    .stat-card-large[b-04i7yvt4kt] {
        gap: 12px;
    }

    .stat-icon[b-04i7yvt4kt] {
        width: 36px;
        height: 36px;
    }

    .stat-icon svg[b-04i7yvt4kt] {
        width: 18px;
        height: 18px;
    }

    .stat-card-large .stat-value[b-04i7yvt4kt] {
        font-size: 20px;
    }

    .area-chart-svg-container[b-04i7yvt4kt] {
        height: 120px;
    }

    .area-chart-legend[b-04i7yvt4kt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .area-chart-y-axis[b-04i7yvt4kt] {
        font-size: 10px;
        min-width: 28px;
    }

    .area-point[b-04i7yvt4kt] {
        width: 6px;
        height: 6px;
        border-width: 1px;
    }

    .sessions-header[b-04i7yvt4kt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sessions-header .btn[b-04i7yvt4kt] {
        width: 100%;
    }

    .session-item[b-04i7yvt4kt] {
        padding: 12px;
    }

    .session-meta-row[b-04i7yvt4kt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .session-results[b-04i7yvt4kt] {
        padding-left: 0;
        border-left: none;
    }

    .progress-header[b-04i7yvt4kt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .progress-header .btn[b-04i7yvt4kt] {
        width: 100%;
    }
}

/* ===== REPORT MODAL - shadcn/ui style ===== */
.report-modal-overlay[b-04i7yvt4kt] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    padding: 1rem;
}

.report-modal[b-04i7yvt4kt] {
    width: 100%;
    max-width: 400px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: report-modal-enter-b-04i7yvt4kt 0.2s ease-out;
}

@keyframes report-modal-enter-b-04i7yvt4kt {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.report-modal-header[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.report-modal-icon[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(139, 92, 246, 0.1);
    border-radius: 0.5rem;
    color: var(--primary);
    flex-shrink: 0;
}

.report-modal-title[b-04i7yvt4kt] {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    letter-spacing: -0.025em;
}

.report-modal-close[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}

.report-modal-close:hover:not(:disabled)[b-04i7yvt4kt] {
    background-color: var(--accent);
    color: var(--foreground);
}

.report-modal-close:disabled[b-04i7yvt4kt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.report-modal-body[b-04i7yvt4kt] {
    padding: 1.25rem 1.5rem;
}

.report-form-group[b-04i7yvt4kt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-form-label[b-04i7yvt4kt] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.report-form-textarea[b-04i7yvt4kt] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    resize: none;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.report-form-textarea:hover:not(:disabled)[b-04i7yvt4kt] {
    border-color: var(--muted-foreground);
}

.report-form-textarea:focus[b-04i7yvt4kt] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.report-form-textarea:disabled[b-04i7yvt4kt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.report-form-textarea[b-04i7yvt4kt]::placeholder {
    color: var(--muted-foreground);
}

.report-modal-footer[b-04i7yvt4kt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background-color: var(--muted);
    border-radius: 0 0 0.75rem 0.75rem;
}

.btn-secondary[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-secondary:hover:not(:disabled)[b-04i7yvt4kt] {
    background-color: var(--accent);
}

.btn-secondary:disabled[b-04i7yvt4kt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-confirm[b-04i7yvt4kt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    background-color: var(--primary);
    border: none;
    border-radius: 0.375rem;
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-confirm:hover:not(:disabled)[b-04i7yvt4kt] {
    opacity: 0.9;
}

.btn-confirm:disabled[b-04i7yvt4kt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small[b-04i7yvt4kt] {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-04i7yvt4kt 0.6s linear infinite;
}

/* Dark mode adjustments */
[data-theme="dark"] .report-modal-overlay[b-04i7yvt4kt] {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .report-modal[b-04i7yvt4kt] {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
    .report-modal[b-04i7yvt4kt] {
        max-width: calc(100% - 2rem);
    }

    .report-modal-header[b-04i7yvt4kt] {
        padding: 1rem;
    }

    .report-modal-body[b-04i7yvt4kt] {
        padding: 1rem;
    }

    .report-modal-footer[b-04i7yvt4kt] {
        padding: 1rem;
        flex-direction: column;
    }

    .report-modal-footer .btn-secondary[b-04i7yvt4kt],
    .report-modal-footer .btn-confirm[b-04i7yvt4kt] {
        width: 100%;
    }
}
/* /Pages/Fono/Patients.razor.rz.scp.css */
/* =============================================
   PATIENTS PAGE - shadcn/ui Style
   Consistent with Dashboard (Index)
   ============================================= */

.page-container[b-9xyxskjfa4] {
    width: 100%;
}

/* ===== PAGE HEADER ===== */
.page-header[b-9xyxskjfa4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-9xyxskjfa4] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.page-header-content p[b-9xyxskjfa4] {
    font-size: 14px;
    color: var(--muted-foreground);
}

.page-header-actions[b-9xyxskjfa4] {
    display: flex;
    gap: 12px;
}

/* ===== BUTTONS ===== */
.btn-primary[b-9xyxskjfa4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-primary:hover:not(:disabled)[b-9xyxskjfa4] {
    background-color: var(--secondary);
    text-decoration: none;
}

.btn-primary:disabled[b-9xyxskjfa4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline[b-9xyxskjfa4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-outline:hover:not(:disabled)[b-9xyxskjfa4] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

.btn-outline:disabled[b-9xyxskjfa4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== STATS GRID ===== */
.stats-grid[b-9xyxskjfa4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-9xyxskjfa4] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.stat-header[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title[b-9xyxskjfa4] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.stat-icon[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.stat-icon-success[b-9xyxskjfa4] {
    color: var(--success-500);
}

.stat-value[b-9xyxskjfa4] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.stat-value-separator[b-9xyxskjfa4] {
    color: var(--muted-foreground);
    font-weight: 400;
    margin: 0 2px;
}

.stat-value-limit[b-9xyxskjfa4] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.stat-loading[b-9xyxskjfa4] {
    color: var(--zinc-600);
}

.stat-footer[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-limit[b-9xyxskjfa4] {
    font-size: 13px;
    color: var(--muted-foreground);
}

/* ===== FILTERS SECTION ===== */
.filters-section[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-box[b-9xyxskjfa4] {
    position: relative;
    flex: 1;
    max-width: 400px;
    min-width: 200px;
}

.search-icon[b-9xyxskjfa4] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
}

.search-input[b-9xyxskjfa4] {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 42px;
    font-size: 14px;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input[b-9xyxskjfa4]::placeholder {
    color: var(--muted-foreground);
}

.search-input:focus[b-9xyxskjfa4] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px var(--ring);
}

.search-clear[b-9xyxskjfa4] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.search-clear:hover[b-9xyxskjfa4] {
    color: var(--foreground);
    background-color: var(--accent);
}

.filter-group[b-9xyxskjfa4] {
    display: flex;
    gap: 12px;
}

.filter-select[b-9xyxskjfa4] {
    height: 44px;
    padding: 0 36px 0 14px;
    font-size: 14px;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    transition: border-color 0.15s;
}

.filter-select:focus[b-9xyxskjfa4] {
    outline: none;
    border-color: var(--ring);
}

.filter-select option[b-9xyxskjfa4] {
    background-color: var(--card);
    color: var(--foreground);
}

/* ===== SECTION ===== */
.section[b-9xyxskjfa4] {
    margin-bottom: 32px;
}

/* ===== PATIENTS CARD ===== */
.patients-card[b-9xyxskjfa4] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* ===== PATIENTS LIST ===== */
.patients-list[b-9xyxskjfa4] {
    display: flex;
    flex-direction: column;
}

.patient-item[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s;
}

.patient-item:last-child[b-9xyxskjfa4] {
    border-bottom: none;
}

.patient-item:hover[b-9xyxskjfa4] {
    background-color: var(--accent);
}

.patient-avatar[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--accent);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    flex-shrink: 0;
}

.patient-info[b-9xyxskjfa4] {
    flex: 1;
    min-width: 0;
}

.patient-name[b-9xyxskjfa4] {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 6px 0;
}

.patient-meta[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.meta-item[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.meta-item svg[b-9xyxskjfa4] {
    flex-shrink: 0;
}

.patient-status[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
}

.patient-badge[b-9xyxskjfa4] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.badge-success[b-9xyxskjfa4] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-500);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-secondary[b-9xyxskjfa4] {
    background-color: var(--accent);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.badge-warning[b-9xyxskjfa4] {
    background-color: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.patient-arrow[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    color: var(--zinc-600);
    transition: color 0.15s, transform 0.15s;
}

.patient-item:hover .patient-arrow[b-9xyxskjfa4] {
    color: var(--foreground);
    transform: translateX(4px);
}

/* ===== LOADING STATE ===== */
.loading-state[b-9xyxskjfa4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--muted-foreground);
}

.loading-state .spinner[b-9xyxskjfa4] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--foreground);
    border-radius: 50%;
    animation: spin-b-9xyxskjfa4 0.8s linear infinite;
    margin-bottom: 16px;
}

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

.loading-state p[b-9xyxskjfa4] {
    font-size: 14px;
    margin: 0;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-9xyxskjfa4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.empty-icon[b-9xyxskjfa4] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state h3[b-9xyxskjfa4] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.empty-state p[b-9xyxskjfa4] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 24px 0;
}

/* ===== PAGINATION ===== */
.pagination[b-9xyxskjfa4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.pagination-btn[b-9xyxskjfa4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.pagination-btn:hover:not(:disabled)[b-9xyxskjfa4] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

.pagination-btn:disabled[b-9xyxskjfa4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-9xyxskjfa4] {
    font-size: 14px;
    color: var(--muted-foreground);
}

.results-info[b-9xyxskjfa4] {
    text-align: center;
    font-size: 14px;
    color: var(--muted-foreground);
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* ===== DIALOG (shadcn/ui style) ===== */
.dialog-overlay[b-9xyxskjfa4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    isolation: isolate;
    animation: overlayShow-b-9xyxskjfa4 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes overlayShow-b-9xyxskjfa4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog[b-9xyxskjfa4] {
    display: block !important;
    position: relative;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    animation: dialogShow-b-9xyxskjfa4 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog.dialog-lg[b-9xyxskjfa4] {
    max-width: 1000px;
    overflow-y: auto;
}

@keyframes dialogShow-b-9xyxskjfa4 {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-header[b-9xyxskjfa4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 0 24px;
}

.dialog-title h3[b-9xyxskjfa4] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.dialog-title p[b-9xyxskjfa4] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

.dialog-close[b-9xyxskjfa4] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.dialog-close:hover[b-9xyxskjfa4] {
    background-color: var(--accent);
    color: var(--foreground);
}

.dialog-close:disabled[b-9xyxskjfa4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-content[b-9xyxskjfa4] {
    padding: 20px 24px 24px 24px;
}

/* Deep styles for PatientForm inside dialog */
[b-9xyxskjfa4] .patient-form {
    gap: 20px;
}

[b-9xyxskjfa4] .form-actions {
    padding-top: 20px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

[b-9xyxskjfa4] .form-actions .btn {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 8px;
}

/* Form input styling for dark theme */
[b-9xyxskjfa4] .form-control,
[b-9xyxskjfa4] input.form-control {
    color: var(--foreground) !important;
    background-color: var(--background) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
}

[b-9xyxskjfa4] .form-control:focus,
[b-9xyxskjfa4] input.form-control:focus {
    outline: none;
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

[b-9xyxskjfa4] .form-control::placeholder {
    color: var(--muted-foreground);
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .stats-grid[b-9xyxskjfa4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-9xyxskjfa4] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-9xyxskjfa4] {
        width: 100%;
    }

    .page-header-actions .btn-primary[b-9xyxskjfa4] {
        width: 100%;
        justify-content: center;
    }

    .stats-grid[b-9xyxskjfa4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-section[b-9xyxskjfa4] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-9xyxskjfa4] {
        max-width: none;
    }

    .filter-group[b-9xyxskjfa4] {
        flex-direction: column;
    }

    .filter-select[b-9xyxskjfa4] {
        width: 100%;
    }

    .patient-item[b-9xyxskjfa4] {
        flex-wrap: wrap;
        padding: 16px;
    }

    .patient-status[b-9xyxskjfa4] {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .patient-arrow[b-9xyxskjfa4] {
        display: none;
    }

    .pagination[b-9xyxskjfa4] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .stats-grid[b-9xyxskjfa4] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-9xyxskjfa4] {
        padding: 20px;
    }

    .stat-value[b-9xyxskjfa4] {
        font-size: 28px;
    }

    .page-header-content h1[b-9xyxskjfa4] {
        font-size: 24px;
    }

    .patient-meta[b-9xyxskjfa4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .modal[b-9xyxskjfa4] {
        margin: 16px;
    }
}
/* /Pages/Fono/SessionControl.razor.rz.scp.css */
/* =============================================
   SESSION CONTROL PAGE - IntegraÁudio Design System
   ============================================= */

/* ===== PAGE CONTAINER ===== */
.page-container[b-v1m5r9phm3] {
    width: 100%;
}

/* ===== LOADING STATE ===== */
.loading-state[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    gap: 16px;
}

.loading-state p[b-v1m5r9phm3] {
    color: var(--muted-foreground);
    font-size: 14px;
}

.spinner[b-v1m5r9phm3] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--foreground);
    border-radius: 50%;
    animation: spin-b-v1m5r9phm3 0.8s linear infinite;
}

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

/* ===== EMPTY STATE ===== */
.empty-state[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
}

.empty-icon[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: var(--accent);
    border-radius: 50%;
    color: var(--muted-foreground);
    margin-bottom: 24px;
}

.empty-state h3[b-v1m5r9phm3] {
    font-size: 20px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 8px;
}

.empty-state p[b-v1m5r9phm3] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin-bottom: 24px;
    max-width: 400px;
}

.empty-state .btn-primary[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s;
}

.empty-state .btn-primary:hover[b-v1m5r9phm3] {
    background-color: var(--secondary);
    text-decoration: none;
}

/* ===== BACK LINK ===== */
.back-link[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.15s;
}

.back-link:hover[b-v1m5r9phm3] {
    color: var(--foreground);
    text-decoration: none;
}

/* ===== PAGE HEADER ===== */
.page-header[b-v1m5r9phm3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.page-header-content[b-v1m5r9phm3] {
    flex: 1;
    min-width: 0;
}

.session-title-row[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.session-title-row svg[b-v1m5r9phm3] {
    color: var(--primary);
    flex-shrink: 0;
}

.session-title-row h1[b-v1m5r9phm3],
.page-header-content h1[b-v1m5r9phm3] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin: 0;
}

.session-meta[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-actions[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn-outline[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-outline:hover:not(:disabled)[b-v1m5r9phm3] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

.btn-danger-outline[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background-color: transparent;
    border: 1px solid var(--error-500);
    border-radius: 8px;
    color: var(--error-500);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-danger-outline:hover:not(:disabled)[b-v1m5r9phm3] {
    background-color: rgba(239, 68, 68, 0.1);
}

.btn-danger-outline:disabled[b-v1m5r9phm3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-v1m5r9phm3] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-v1m5r9phm3 0.6s linear infinite;
}

/* ===== CONNECTION STATUS ===== */
.connection-status .status-dot[b-v1m5r9phm3] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.connection-status.connected .status-dot[b-v1m5r9phm3] {
    background-color: #22c55e;
}

.connection-status.disconnected .status-dot[b-v1m5r9phm3] {
    background-color: #ef4444;
}

/* ===== CONTENT GRID ===== */
.content-grid[b-v1m5r9phm3] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

.main-column[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.side-column[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== CARDS ===== */
.card[b-v1m5r9phm3] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.card-header[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background-color: rgba(var(--bs-body-color-rgb), 0.03);
}

.card-header h3[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.card-header h3 svg[b-v1m5r9phm3] {
    color: var(--muted-foreground);
}

.card-body[b-v1m5r9phm3] {
    padding: 24px;
}

.card-body.no-padding[b-v1m5r9phm3] {
    padding: 0;
}

/* ===== CONTROLS ===== */
.controls-row[b-v1m5r9phm3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
}

.audio-select-group[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-v1m5r9phm3] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.form-select[b-v1m5r9phm3] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    font-size: 14px;
}

.form-select:focus[b-v1m5r9phm3] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

/* ===== AUDIO DROPDOWN CUSTOMIZADO ===== */
.audio-dropdown-container[b-v1m5r9phm3] {
    position: relative;
    width: 100%;
}

button.audio-dropdown-trigger[b-v1m5r9phm3] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    padding-right: 36px;
    background-color: var(--background);
    background-image: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    transition: all 0.15s;
    box-shadow: none;
}

button.audio-dropdown-trigger:hover:not(:disabled)[b-v1m5r9phm3] {
    border-color: var(--muted-foreground);
}

button.audio-dropdown-trigger:focus[b-v1m5r9phm3] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

button.audio-dropdown-trigger.open[b-v1m5r9phm3] {
    border-color: var(--ring);
}

button.audio-dropdown-trigger:disabled[b-v1m5r9phm3] {
    opacity: 0.5;
    cursor: not-allowed;
}

button.audio-dropdown-trigger .dropdown-placeholder[b-v1m5r9phm3] {
    color: var(--muted-foreground);
}

button.audio-dropdown-trigger .dropdown-arrow[b-v1m5r9phm3] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    transition: transform 0.15s;
}

button.audio-dropdown-trigger.open .dropdown-arrow[b-v1m5r9phm3] {
    transform: translateY(-50%) rotate(180deg);
}

.selected-audio-info[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.selected-audio-info svg[b-v1m5r9phm3] {
    flex-shrink: 0;
    color: var(--primary);
}

.selected-audio-info .audio-name[b-v1m5r9phm3] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audio-folder-badge[b-v1m5r9phm3] {
    flex-shrink: 0;
    padding: 2px 8px;
    background-color: var(--accent);
    border-radius: 4px;
    font-size: 11px;
    color: var(--muted-foreground);
}

.audio-dropdown-menu[b-v1m5r9phm3] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.folder-header[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border);
}

.folder-header:first-child[b-v1m5r9phm3] {
    border-top: none;
    border-radius: 8px 8px 0 0;
}

.folder-header svg[b-v1m5r9phm3] {
    color: var(--primary);
}

.audio-dropdown-option[b-v1m5r9phm3] {
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.1s;
}

.audio-dropdown-option:hover[b-v1m5r9phm3] {
    background-color: var(--accent);
}

.audio-dropdown-option.selected[b-v1m5r9phm3] {
    background-color: rgba(139, 92, 246, 0.1);
}

.audio-dropdown-option.in-folder[b-v1m5r9phm3] {
    padding-left: 32px;
}

.audio-dropdown-option.empty-option[b-v1m5r9phm3] {
    color: var(--muted-foreground);
    font-style: italic;
}

.option-content[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.option-content svg[b-v1m5r9phm3] {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.audio-dropdown-option.selected .option-content svg[b-v1m5r9phm3] {
    color: var(--primary);
}

.option-text[b-v1m5r9phm3] {
    flex: 1;
    font-size: 14px;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.option-duration[b-v1m5r9phm3] {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted-foreground);
}

.option-tags[b-v1m5r9phm3] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-left: 24px;
}

.tag-badge[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid;
}

.tag-more[b-v1m5r9phm3] {
    font-size: 11px;
    color: var(--muted-foreground);
    padding: 2px 6px;
}

.playback-buttons[b-v1m5r9phm3] {
    display: flex;
    gap: 12px;
}

.playback-buttons button[b-v1m5r9phm3] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.playback-buttons button:disabled[b-v1m5r9phm3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-success[b-v1m5r9phm3] {
    background-color: #22c55e;
    color: white;
}

.btn-success:hover:not(:disabled)[b-v1m5r9phm3] {
    background-color: #16a34a;
}

.btn-warning[b-v1m5r9phm3] {
    background-color: #f59e0b;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-v1m5r9phm3] {
    background-color: #d97706;
}

.btn-stop[b-v1m5r9phm3] {
    background-color: #ef4444;
    color: white;
}

.btn-stop:hover:not(:disabled)[b-v1m5r9phm3] {
    background-color: #dc2626;
}

/* ===== LISTEN ALONG ===== */
.listen-along-option[b-v1m5r9phm3] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.checkbox-label[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-v1m5r9phm3] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.checkbox-label svg[b-v1m5r9phm3] {
    color: var(--muted-foreground);
}

/* ===== ALERTS ===== */
.alert-warning-box[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    color: #b45309;
}

.alert-error-box[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #dc2626;
}

/* ===== EMPTY STATES ===== */
.empty-card-state[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-card-state svg[b-v1m5r9phm3] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 12px;
}

.empty-card-state p[b-v1m5r9phm3] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.empty-card-state .hint-text[b-v1m5r9phm3] {
    font-size: 13px;
    color: var(--muted-foreground);
    opacity: 0.7;
    margin-top: 4px;
}

.empty-log-state[b-v1m5r9phm3] {
    padding: 24px;
    text-align: center;
}

.hint-text[b-v1m5r9phm3] {
    font-size: 13px;
    color: var(--muted-foreground);
}

/* ===== PARTICIPANTS LIST ===== */
.participants-list[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
}

.participant-item[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.participant-item:last-child[b-v1m5r9phm3] {
    border-bottom: none;
}

.participant-info[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.participant-avatar[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.participant-avatar.host[b-v1m5r9phm3] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.participant-details[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
}

.participant-name[b-v1m5r9phm3] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.participant-role[b-v1m5r9phm3] {
    font-size: 12px;
    color: var(--muted-foreground);
}

.status-badge[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge .status-indicator[b-v1m5r9phm3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.status-online[b-v1m5r9phm3] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.status-badge.status-online .status-indicator[b-v1m5r9phm3] {
    background-color: #22c55e;
}

.status-badge.status-offline[b-v1m5r9phm3] {
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.status-badge.status-offline .status-indicator[b-v1m5r9phm3] {
    background-color: var(--muted-foreground);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .content-grid[b-v1m5r9phm3] {
        grid-template-columns: 1fr;
    }

    .side-column[b-v1m5r9phm3] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .page-header[b-v1m5r9phm3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions[b-v1m5r9phm3] {
        width: 100%;
        justify-content: flex-start;
    }

    .controls-row[b-v1m5r9phm3] {
        grid-template-columns: 1fr;
    }

    .playback-buttons[b-v1m5r9phm3] {
        flex-direction: column;
    }
}




.card-title[b-v1m5r9phm3] {
    color: var(--foreground);
}

/* ===== CONNECTION STATUS ===== */
.connection-status[b-v1m5r9phm3] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.connection-status.connected[b-v1m5r9phm3] {
    background-color: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

[data-theme="dark"] .connection-status.connected[b-v1m5r9phm3] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.connection-status.disconnected[b-v1m5r9phm3] {
    background-color: var(--error-100);
    color: var(--error-700);
    border: 1px solid var(--error-200);
}

[data-theme="dark"] .connection-status.disconnected[b-v1m5r9phm3] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== END SESSION BUTTON ===== */
.btn-outline-danger[b-v1m5r9phm3] {
    background: transparent !important;
    border: 1px solid var(--error-300) !important;
    color: var(--error-600) !important;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    transition: all var(--transition-fast);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .btn-outline-danger[b-v1m5r9phm3] {
    border-color: rgba(220, 53, 69, 0.6) !important;
    color: var(--error-400) !important;
}

.btn-outline-danger:hover:not(:disabled)[b-v1m5r9phm3] {
    background: var(--error-50) !important;
    border-color: var(--error-500) !important;
    color: var(--error-700) !important;
}

[data-theme="dark"] .btn-outline-danger:hover:not(:disabled)[b-v1m5r9phm3] {
    background: rgba(220, 53, 69, 0.2) !important;
    border-color: var(--error-400) !important;
    color: #fca5a5 !important;
}

.btn-outline-danger:disabled[b-v1m5r9phm3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== JOIN CODE BADGE ===== */
.join-code-badge[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-600);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
}

.join-code-label[b-v1m5r9phm3] {
    color: rgba(255, 255, 255, 0.8);
    font-weight: var(--font-normal);
}

.join-code-value[b-v1m5r9phm3] {
    color: #ffffff;
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    font-size: var(--text-base);
}


/* ===== LIST GROUP ===== */
.list-group-item[b-v1m5r9phm3] {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    padding: var(--space-3) var(--space-4) !important;
}

[data-theme="dark"] .list-group-item[b-v1m5r9phm3] {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.list-group-item:last-child[b-v1m5r9phm3] {
    border-bottom: none !important;
}

.list-group-item .fw-semibold[b-v1m5r9phm3] {
    color: var(--foreground) !important;
}

.list-group-item .text-muted[b-v1m5r9phm3],
.list-group-item small[b-v1m5r9phm3] {
    color: var(--foreground-muted) !important;
}

/* ===== EVENT LOG ===== */
.event-log[b-v1m5r9phm3] {
    max-height: 300px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background-color: var(--muted);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .event-log[b-v1m5r9phm3] {
    background: rgba(0, 0, 0, 0.2);
}

.event-item[b-v1m5r9phm3] {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-3);
}

[data-theme="dark"] .event-item[b-v1m5r9phm3] {
    border-color: rgba(255, 255, 255, 0.05);
}

.event-item:last-child[b-v1m5r9phm3] {
    border-bottom: none;
}

.event-item.success[b-v1m5r9phm3] {
    background-color: var(--success-50);
}

[data-theme="dark"] .event-item.success[b-v1m5r9phm3] {
    background: rgba(34, 197, 94, 0.1);
}

.event-item.error[b-v1m5r9phm3] {
    background-color: var(--error-50);
}

[data-theme="dark"] .event-item.error[b-v1m5r9phm3] {
    background: rgba(239, 68, 68, 0.1);
}

.event-item.warning[b-v1m5r9phm3] {
    background-color: var(--warning-50);
}

[data-theme="dark"] .event-item.warning[b-v1m5r9phm3] {
    background: rgba(245, 158, 11, 0.1);
}

.event-item.info[b-v1m5r9phm3] {
    background-color: var(--primary-50);
}

[data-theme="dark"] .event-item.info[b-v1m5r9phm3] {
    background: rgba(59, 130, 246, 0.1);
}

.event-time[b-v1m5r9phm3] {
    color: var(--foreground-muted);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.event-message[b-v1m5r9phm3] {
    flex: 1;
    word-break: break-word;
    color: var(--foreground);
}

[data-theme="dark"] .event-message[b-v1m5r9phm3] {
    color: rgba(255, 255, 255, 0.8);
}

/* Scrollbar for event log */
.event-log[b-v1m5r9phm3]::-webkit-scrollbar {
    width: 6px;
}

.event-log[b-v1m5r9phm3]::-webkit-scrollbar-track {
    background: var(--muted);
}

[data-theme="dark"] .event-log[b-v1m5r9phm3]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.event-log[b-v1m5r9phm3]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

[data-theme="dark"] .event-log[b-v1m5r9phm3]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.event-log[b-v1m5r9phm3]::-webkit-scrollbar-thumb:hover {
    background: var(--foreground-muted);
}

[data-theme="dark"] .event-log[b-v1m5r9phm3]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===== TABLE ===== */
.table[b-v1m5r9phm3] {
    color: var(--foreground) !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--foreground) !important;
    --bs-table-hover-bg: var(--accent) !important;
}

[data-theme="dark"] .table[b-v1m5r9phm3] {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
}

.table thead[b-v1m5r9phm3] {
    background-color: var(--muted) !important;
}

[data-theme="dark"] .table thead[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.03) !important;
}

.table th[b-v1m5r9phm3] {
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--foreground-muted) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    padding: var(--space-3) var(--space-4) !important;
    background: transparent !important;
}

.table td[b-v1m5r9phm3] {
    vertical-align: middle !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    padding: var(--space-3) var(--space-4) !important;
    color: var(--foreground) !important;
    background: transparent !important;
}

[data-theme="dark"] .table td[b-v1m5r9phm3] {
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.table tbody tr:hover[b-v1m5r9phm3] {
    background-color: var(--accent) !important;
}

[data-theme="dark"] .table tbody tr:hover[b-v1m5r9phm3] {
    background: rgba(59, 130, 246, 0.08) !important;
}

.table tbody tr:hover td[b-v1m5r9phm3] {
    color: var(--foreground) !important;
}

/* ===== BADGES ===== */
.badge.bg-success[b-v1m5r9phm3] {
    background-color: var(--success-100) !important;
    color: var(--success-700) !important;
    border: 1px solid var(--success-200);
}

[data-theme="dark"] .badge.bg-success[b-v1m5r9phm3] {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3);
}

.badge.bg-secondary[b-v1m5r9phm3] {
    background-color: var(--muted) !important;
    color: var(--foreground-muted) !important;
    border: 1px solid var(--border);
}

[data-theme="dark"] .badge.bg-secondary[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.2);
}

.badge.bg-primary[b-v1m5r9phm3] {
    background-color: var(--primary-100) !important;
    color: var(--primary-700) !important;
    border: 1px solid var(--primary-200);
}

[data-theme="dark"] .badge.bg-primary[b-v1m5r9phm3] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--primary-400) !important;
    border-color: rgba(59, 130, 246, 0.3);
}

.badge.bg-info[b-v1m5r9phm3] {
    background-color: var(--info-100) !important;
    color: var(--info-700) !important;
}

[data-theme="dark"] .badge.bg-info[b-v1m5r9phm3] {
    background: rgba(13, 202, 240, 0.2) !important;
    color: #22d3ee !important;
}

.badge.bg-warning[b-v1m5r9phm3] {
    background-color: var(--warning-100) !important;
    color: var(--warning-700) !important;
}

[data-theme="dark"] .badge.bg-warning[b-v1m5r9phm3] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.badge.bg-danger[b-v1m5r9phm3] {
    background-color: var(--error-100) !important;
    color: var(--error-700) !important;
}

[data-theme="dark"] .badge.bg-danger[b-v1m5r9phm3] {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

/* ===== BUTTONS ===== */
.btn-lg[b-v1m5r9phm3] {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.btn-primary[b-v1m5r9phm3] {
    background: var(--primary-600) !important;
    border: none !important;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    border-radius: var(--radius-lg);
}

.btn-primary:hover[b-v1m5r9phm3] {
    background: var(--primary-700) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-success[b-v1m5r9phm3] {
    background: var(--success-600) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-lg);
}

.btn-warning[b-v1m5r9phm3] {
    background: var(--warning-500) !important;
    border: none !important;
    color: #000 !important;
    border-radius: var(--radius-lg);
}

.btn-danger[b-v1m5r9phm3] {
    background: var(--error-500) !important;
    border: none !important;
    border-radius: var(--radius-lg);
}

.btn-outline-secondary[b-v1m5r9phm3] {
    color: var(--foreground-muted) !important;
    border-color: var(--border) !important;
    background: transparent !important;
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .btn-outline-secondary[b-v1m5r9phm3] {
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn-outline-secondary:hover[b-v1m5r9phm3] {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

.btn-link[b-v1m5r9phm3] {
    color: var(--foreground-muted) !important;
}

.btn-link:hover[b-v1m5r9phm3] {
    color: var(--foreground) !important;
}

/* ===== FORM CONTROLS ===== */
.form-select[b-v1m5r9phm3] {
    background-color: var(--input) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .form-select[b-v1m5r9phm3] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.form-select:focus[b-v1m5r9phm3] {
    background-color: var(--input) !important;
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    color: var(--foreground) !important;
}

[data-theme="dark"] .form-select:focus[b-v1m5r9phm3] {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.form-select option[b-v1m5r9phm3] {
    background-color: var(--card);
    color: var(--foreground);
}

[data-theme="dark"] .form-select option[b-v1m5r9phm3] {
    background-color: var(--slate-900);
}

/* ===== LISTEN ALONG CHECKBOX ===== */
.form-check-input[b-v1m5r9phm3] {
    background-color: var(--muted);
    border: 1px solid var(--border);
}

[data-theme="dark"] .form-check-input[b-v1m5r9phm3] {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.form-check-input:checked[b-v1m5r9phm3] {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
}

.form-check-label[b-v1m5r9phm3] {
    font-weight: var(--font-medium);
    color: var(--foreground) !important;
}

[data-theme="dark"] .form-check-label[b-v1m5r9phm3] {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== NOW PLAYING INFO ===== */
.now-playing-info[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--primary-600);
    color: white;
}

.now-playing-icon[b-v1m5r9phm3] {
    font-size: var(--text-2xl);
}

.now-playing-icon.playing[b-v1m5r9phm3] {
    animation: pulse-b-v1m5r9phm3 1s ease-in-out infinite;
}

.now-playing-icon.paused[b-v1m5r9phm3] {
    opacity: 0.7;
}

.now-playing-text[b-v1m5r9phm3] {
    font-size: var(--text-sm);
}

@keyframes pulse-b-v1m5r9phm3 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ===== LISTEN BADGE ===== */
.listen-badge[b-v1m5r9phm3] {
    background-color: rgba(255, 255, 255, 0.2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

/* ===== MINI PLAYER ===== */
.mini-player[b-v1m5r9phm3] {
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-50) 100%);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    color: var(--foreground);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .mini-player[b-v1m5r9phm3] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: white;
}

.mini-player-header[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.mini-player-icon[b-v1m5r9phm3] {
    font-size: var(--text-2xl);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-200);
    border-radius: var(--radius-full);
}

[data-theme="dark"] .mini-player-icon[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.1);
}

.mini-player-icon.playing[b-v1m5r9phm3] {
    animation: pulse-b-v1m5r9phm3 1s ease-in-out infinite;
}

.mini-player-icon.paused[b-v1m5r9phm3] {
    opacity: 0.7;
}

.mini-player-title[b-v1m5r9phm3] {
    flex: 1;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-player .listen-badge[b-v1m5r9phm3] {
    background: var(--primary-200);
    font-size: var(--text-base);
    padding: var(--space-1) var(--space-2);
}

[data-theme="dark"] .mini-player .listen-badge[b-v1m5r9phm3] {
    background: rgba(59, 130, 246, 0.4);
}

.mini-player-progress[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.progress-bar-container[b-v1m5r9phm3] {
    flex: 1;
    height: 6px;
    background-color: var(--primary-200);
    border-radius: 3px;
    overflow: hidden;
}

[data-theme="dark"] .progress-bar-container[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.2);
}

.progress-bar-fill[b-v1m5r9phm3] {
    height: 100%;
    background: var(--primary-600);
    border-radius: 3px;
    transition: width 0.3s ease;
}

[data-theme="dark"] .progress-bar-fill[b-v1m5r9phm3] {
    background: linear-gradient(90deg, var(--primary-500) 0%, #a855f7 100%);
}

.time-display[b-v1m5r9phm3] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 100px;
    justify-content: flex-end;
}

.current-time[b-v1m5r9phm3] {
    color: var(--foreground);
    font-weight: var(--font-semibold);
}

[data-theme="dark"] .current-time[b-v1m5r9phm3] {
    color: white;
}

.time-separator[b-v1m5r9phm3] {
    color: var(--foreground-muted);
}

[data-theme="dark"] .time-separator[b-v1m5r9phm3] {
    color: rgba(255, 255, 255, 0.5);
}

.total-time[b-v1m5r9phm3] {
    color: var(--foreground-muted);
}

[data-theme="dark"] .total-time[b-v1m5r9phm3] {
    color: rgba(255, 255, 255, 0.7);
}

/* ===== TEXT OVERRIDES ===== */
.text-muted[b-v1m5r9phm3] {
    color: var(--foreground-muted) !important;
}

h2[b-v1m5r9phm3], h3[b-v1m5r9phm3], h5[b-v1m5r9phm3] {
    color: var(--foreground) !important;
}

/* ===== SPINNER ===== */
.spinner-border.text-primary[b-v1m5r9phm3] {
    color: var(--primary-500) !important;
}

/* ===== EMPTY STATE ===== */
.display-1[b-v1m5r9phm3], .display-4[b-v1m5r9phm3] {
    color: var(--foreground-muted) !important;
    opacity: 0.5;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 992px) {
    .row.g-4[b-v1m5r9phm3] {
        gap: var(--space-4) !important;
    }

    .participant-avatar[b-v1m5r9phm3] {
        width: 36px;
        height: 36px;
        font-size: var(--text-lg);
    }

    .mini-player[b-v1m5r9phm3] {
        padding: var(--space-4);
    }

    .mini-player-icon[b-v1m5r9phm3] {
        width: 36px;
        height: 36px;
        font-size: var(--text-xl);
    }

    .btn-lg[b-v1m5r9phm3] {
        padding: var(--space-2) var(--space-5);
        font-size: var(--text-base);
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    .col-lg-4[b-v1m5r9phm3], .col-lg-8[b-v1m5r9phm3], .col-md-4[b-v1m5r9phm3], .col-md-8[b-v1m5r9phm3] {
        width: 100%;
    }

    .join-code-badge[b-v1m5r9phm3] {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
    }

    .join-code-value[b-v1m5r9phm3] {
        font-size: var(--text-sm);
    }

    .participant-avatar[b-v1m5r9phm3] {
        width: 32px;
        height: 32px;
        font-size: var(--text-base);
    }

    .list-group-item[b-v1m5r9phm3] {
        padding: var(--space-2) var(--space-3) !important;
    }

    .mini-player[b-v1m5r9phm3] {
        padding: var(--space-3);
    }

    .mini-player-header[b-v1m5r9phm3] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .mini-player-icon[b-v1m5r9phm3] {
        width: 32px;
        height: 32px;
        font-size: var(--text-base);
    }

    .mini-player-title[b-v1m5r9phm3] {
        font-size: var(--text-sm);
    }

    .time-display[b-v1m5r9phm3] {
        font-size: var(--text-xs);
        min-width: 80px;
    }

    .btn-lg[b-v1m5r9phm3] {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }

    .d-flex.gap-2[b-v1m5r9phm3] {
        flex-direction: column;
    }

    .d-flex.gap-2 .btn[b-v1m5r9phm3] {
        width: 100%;
    }

    .event-log[b-v1m5r9phm3] {
        max-height: 200px;
        font-size: 0.7rem;
    }

    .event-item[b-v1m5r9phm3] {
        padding: var(--space-2) var(--space-3);
    }

    .card-header[b-v1m5r9phm3] {
        flex-direction: column !important;
        gap: var(--space-3);
        align-items: flex-start !important;
    }

    h2[b-v1m5r9phm3] {
        font-size: var(--text-xl) !important;
    }

    .form-select[b-v1m5r9phm3] {
        font-size: var(--text-sm);
    }
}

/* ===== RESPONSIVE - SMALL MOBILE ===== */
@media (max-width: 480px) {
    .card-body[b-v1m5r9phm3] {
        padding: var(--space-3) !important;
    }

    .now-playing-info[b-v1m5r9phm3] {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .now-playing-icon[b-v1m5r9phm3] {
        font-size: var(--text-xl);
    }

    .now-playing-text[b-v1m5r9phm3] {
        font-size: var(--text-xs);
        text-align: center;
    }

    .mini-player-progress[b-v1m5r9phm3] {
        flex-direction: column;
        gap: var(--space-2);
    }

    .time-display[b-v1m5r9phm3] {
        width: 100%;
        justify-content: center;
    }
}

/* ===== SESSION EXPIRING TOAST ===== */
.expiring-toast[b-v1m5r9phm3] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-tooltip);
    animation: slideIn-b-v1m5r9phm3 0.3s ease;
}

@keyframes slideIn-b-v1m5r9phm3 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.expiring-toast-content[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
    color: white;
    max-width: 400px;
}

.expiring-icon[b-v1m5r9phm3] {
    font-size: 2rem;
    animation: pulse-b-v1m5r9phm3 1s ease-in-out infinite;
}

.expiring-text[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.expiring-text strong[b-v1m5r9phm3] {
    font-size: var(--text-base);
}

.expiring-text span[b-v1m5r9phm3] {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.btn-dismiss[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background var(--transition-fast);
}

.btn-dismiss:hover[b-v1m5r9phm3] {
    background: rgba(255, 255, 255, 0.3);
}

/* ===== SESSION EXPIRED MODAL ===== */
.expired-modal[b-v1m5r9phm3] {
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-2xl) !important;
}

[data-theme="dark"] .expired-modal[b-v1m5r9phm3] {
    background: linear-gradient(135deg, rgba(30, 30, 45, 0.98) 0%, rgba(20, 20, 35, 0.98) 100%) !important;
}

.expired-modal .modal-body[b-v1m5r9phm3] {
    color: var(--foreground);
}

.expired-modal h4[b-v1m5r9phm3] {
    color: var(--error-600);
}

[data-theme="dark"] .expired-modal h4[b-v1m5r9phm3] {
    color: #fca5a5;
}

.expired-modal .text-muted[b-v1m5r9phm3] {
    color: var(--foreground-muted) !important;
}

.expired-modal .btn-primary[b-v1m5r9phm3] {
    background: var(--primary-600) !important;
    border: none !important;
    padding: var(--space-3) var(--space-8);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.expired-modal .btn-primary:hover[b-v1m5r9phm3] {
    background: var(--primary-700) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===== RESPONSIVE TOAST ===== */
@media (max-width: 480px) {
    .expiring-toast[b-v1m5r9phm3] {
        left: 10px;
        right: 10px;
        top: 10px;
    }

    .expiring-toast-content[b-v1m5r9phm3] {
        max-width: 100%;
    }
}

/* ===== EVALUATION SECTION ===== */
.evaluation-section[b-v1m5r9phm3] {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--muted) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

[data-theme="dark"] .evaluation-section[b-v1m5r9phm3] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.2);
}

.evaluation-header[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--foreground);
}

.evaluation-header svg[b-v1m5r9phm3] {
    color: var(--primary);
}

.patient-badge[b-v1m5r9phm3] {
    margin-left: auto;
    padding: 4px 12px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.evaluation-content[b-v1m5r9phm3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.evaluation-buttons[b-v1m5r9phm3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-correct[b-v1m5r9phm3],
.btn-incorrect[b-v1m5r9phm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-correct[b-v1m5r9phm3] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-correct:hover:not(:disabled)[b-v1m5r9phm3] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.btn-correct:active:not(:disabled)[b-v1m5r9phm3] {
    transform: translateY(0);
}

.btn-incorrect[b-v1m5r9phm3] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-incorrect:hover:not(:disabled)[b-v1m5r9phm3] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.btn-incorrect:active:not(:disabled)[b-v1m5r9phm3] {
    transform: translateY(0);
}

.btn-correct:disabled[b-v1m5r9phm3],
.btn-incorrect:disabled[b-v1m5r9phm3] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.evaluation-hint[b-v1m5r9phm3] {
    text-align: center;
    color: var(--muted-foreground);
    font-size: 13px;
    margin: 0;
    padding: 8px 0;
}

.evaluation-summary[b-v1m5r9phm3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
}

[data-theme="dark"] .evaluation-summary[b-v1m5r9phm3] {
    background: rgba(0, 0, 0, 0.2);
}

.summary-correct[b-v1m5r9phm3] {
    color: #22c55e;
}

.summary-incorrect[b-v1m5r9phm3] {
    color: #ef4444;
}

.summary-divider[b-v1m5r9phm3] {
    color: var(--muted-foreground);
}

.summary-accuracy[b-v1m5r9phm3] {
    font-weight: 700;
}

.summary-accuracy.accuracy-excellent[b-v1m5r9phm3] {
    color: #22c55e;
}

.summary-accuracy.accuracy-good[b-v1m5r9phm3] {
    color: #84cc16;
}

.summary-accuracy.accuracy-fair[b-v1m5r9phm3] {
    color: #f59e0b;
}

.summary-accuracy.accuracy-poor[b-v1m5r9phm3] {
    color: #ef4444;
}

/* Responsive */
@media (max-width: 480px) {
    .evaluation-buttons[b-v1m5r9phm3] {
        grid-template-columns: 1fr;
    }

    .btn-correct[b-v1m5r9phm3],
    .btn-incorrect[b-v1m5r9phm3] {
        height: 48px;
        font-size: 14px;
    }

    .evaluation-summary[b-v1m5r9phm3] {
        flex-wrap: wrap;
        gap: 8px;
    }
}
/* /Pages/Fono/SessionDetail.razor.rz.scp.css */
/* =============================================
   SESSION DETAIL PAGE - shadcn/ui Style
   Consistent with Dashboard and other pages
   ============================================= */

.page-container[b-snj2hh7cof] {
    width: 100%;
}

/* ===== BACK LINK ===== */
.back-link[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.15s;
}

.back-link:hover[b-snj2hh7cof] {
    color: var(--foreground);
    text-decoration: none;
}

/* ===== PAGE HEADER ===== */
.page-header[b-snj2hh7cof] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-snj2hh7cof] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin: 0;
}

.session-title-row[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.session-meta[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-item[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== STATUS DOT ===== */
.status-dot[b-snj2hh7cof] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-active[b-snj2hh7cof] {
    background-color: var(--success-500);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    animation: pulse-b-snj2hh7cof 2s infinite;
}

.status-ended[b-snj2hh7cof] {
    background-color: var(--muted-foreground);
}

.status-pending[b-snj2hh7cof] {
    background-color: #eab308;
}

@keyframes pulse-b-snj2hh7cof {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
}

/* ===== PAGE HEADER ACTIONS ===== */
.page-header-actions[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ===== SESSION BADGE ===== */
.session-badge[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

.badge-success[b-snj2hh7cof] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-500);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-secondary[b-snj2hh7cof] {
    background-color: var(--accent);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.badge-warning[b-snj2hh7cof] {
    background-color: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

/* ===== CONTENT GRID ===== */
.content-grid[b-snj2hh7cof] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* ===== CARDS ===== */
.card[b-snj2hh7cof] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.card-header[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.card-header h3[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.card-body[b-snj2hh7cof] {
    padding: 24px;
}

.card-body.no-padding[b-snj2hh7cof] {
    padding: 0;
}

.card-body.text-center[b-snj2hh7cof] {
    text-align: center;
}

/* ===== JOIN CODE CARD ===== */
.join-code-card[b-snj2hh7cof] {
    height: fit-content;
}

.join-code-display[b-snj2hh7cof] {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.2em;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 16px 24px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 16px;
}

.hint-text[b-snj2hh7cof] {
    font-size: 13px;
    color: var(--muted-foreground);
    display: block;
}

.button-stack[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.session-ended-state[b-snj2hh7cof] {
    padding: 24px 0;
}

.session-ended-state .ended-icon[b-snj2hh7cof] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 12px;
}

.session-ended-state p[b-snj2hh7cof] {
    font-size: 15px;
    font-weight: 500;
    color: var(--foreground);
    margin: 0 0 4px 0;
}

/* ===== PARTICIPANTS CARD ===== */
.participants-card[b-snj2hh7cof] {
    min-height: 300px;
}

.participants-list[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
}

.participant-item[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s;
}

.participant-item:last-child[b-snj2hh7cof] {
    border-bottom: none;
}

.participant-item:hover[b-snj2hh7cof] {
    background-color: var(--accent);
}

.participant-info[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.participant-avatar[b-snj2hh7cof] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--accent);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.participant-avatar.host[b-snj2hh7cof] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.participant-details[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.participant-name[b-snj2hh7cof] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.participant-meta[b-snj2hh7cof] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.participant-status[b-snj2hh7cof] {
    flex-shrink: 0;
}

.status-badge[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.status-badge .status-indicator[b-snj2hh7cof] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-online[b-snj2hh7cof] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-500);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-online .status-indicator[b-snj2hh7cof] {
    background-color: var(--success-500);
}

.status-offline[b-snj2hh7cof] {
    background-color: var(--accent);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.status-offline .status-indicator[b-snj2hh7cof] {
    background-color: var(--muted-foreground);
}

.empty-participants[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-icon-small[b-snj2hh7cof] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 12px;
}

.empty-participants p[b-snj2hh7cof] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin: 0 0 4px 0;
}

/* ===== SHARE CARD ===== */
.share-card[b-snj2hh7cof] {
    margin-bottom: 24px;
}

.share-content[b-snj2hh7cof] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
}

.share-link-section[b-snj2hh7cof] {
    flex: 1;
}

.form-label[b-snj2hh7cof] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 8px;
}

.input-with-button[b-snj2hh7cof] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.form-input[b-snj2hh7cof] {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.15s;
}

.share-link-input[b-snj2hh7cof] {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
}

.form-input:focus[b-snj2hh7cof] {
    outline: none;
    border-color: var(--ring);
}

.share-buttons[b-snj2hh7cof] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.regenerate-section[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.qr-code-section[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.qr-code-container[b-snj2hh7cof] {
    background-color: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-code-image[b-snj2hh7cof] {
    width: 160px;
    height: 160px;
    display: block;
}

.qr-code-placeholder[b-snj2hh7cof] {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: 8px;
}

/* ===== BUTTONS ===== */
.btn-primary[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-primary:hover:not(:disabled)[b-snj2hh7cof] {
    background-color: var(--secondary);
    text-decoration: none;
}

.btn-primary:disabled[b-snj2hh7cof] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary.btn-lg[b-snj2hh7cof] {
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
    border-radius: 10px;
}

.btn-outline[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-outline:hover:not(:disabled)[b-snj2hh7cof] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

.btn-outline:disabled[b-snj2hh7cof] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ghost[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.btn-ghost:hover:not(:disabled)[b-snj2hh7cof] {
    color: var(--foreground);
    background-color: var(--accent);
}

.btn-ghost:disabled[b-snj2hh7cof] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ghost.btn-sm[b-snj2hh7cof] {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-icon[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.btn-icon svg[b-snj2hh7cof] {
    width: 14px;
    height: 14px;
}

.btn-icon:hover:not(:disabled)[b-snj2hh7cof] {
    color: var(--foreground);
    background-color: var(--accent);
}

.btn-icon:disabled[b-snj2hh7cof] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-whatsapp[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background-color: #25D366;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-whatsapp:hover[b-snj2hh7cof] {
    background-color: #1da851;
}

.btn-warning-outline[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #eab308;
    background-color: transparent;
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-warning-outline:hover:not(:disabled)[b-snj2hh7cof] {
    background-color: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.5);
}

.btn-warning-outline:disabled[b-snj2hh7cof] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger-outline[b-snj2hh7cof] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #ef4444;
    background-color: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-danger-outline:hover:not(:disabled)[b-snj2hh7cof] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-danger-outline:disabled[b-snj2hh7cof] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger-outline.btn-lg[b-snj2hh7cof] {
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
    border-radius: 10px;
}

.btn-spinner[b-snj2hh7cof] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-snj2hh7cof 0.6s linear infinite;
}

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

/* ===== LOADING STATE ===== */
.loading-state[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: var(--muted-foreground);
}

.loading-state .spinner[b-snj2hh7cof] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--foreground);
    border-radius: 50%;
    animation: spin-b-snj2hh7cof 0.8s linear infinite;
    margin-bottom: 16px;
}

.loading-state p[b-snj2hh7cof] {
    font-size: 14px;
    margin: 0;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
}

.empty-icon[b-snj2hh7cof] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state h3[b-snj2hh7cof] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.empty-state p[b-snj2hh7cof] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 24px 0;
}

/* ===== SPINNER ===== */
.spinner[b-snj2hh7cof] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--foreground);
    border-radius: 50%;
    animation: spin-b-snj2hh7cof 0.8s linear infinite;
}

/* ===== PATIENT LINKED CARD ===== */
.patient-linked-card[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.patient-linked-header[b-snj2hh7cof] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.patient-linked-icon[b-snj2hh7cof] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 10px;
    color: var(--primary-foreground);
    flex-shrink: 0;
}

.patient-linked-info[b-snj2hh7cof] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.patient-linked-label[b-snj2hh7cof] {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patient-linked-name[b-snj2hh7cof] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.btn-sm[b-snj2hh7cof] {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .content-grid[b-snj2hh7cof] {
        grid-template-columns: 1fr;
    }

    .share-content[b-snj2hh7cof] {
        grid-template-columns: 1fr;
    }

    .qr-code-section[b-snj2hh7cof] {
        flex-direction: row;
        justify-content: center;
        padding-top: 24px;
        border-top: 1px solid var(--border);
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-snj2hh7cof] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-snj2hh7cof] {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-header-actions .btn-primary[b-snj2hh7cof],
    .page-header-actions .btn-danger-outline[b-snj2hh7cof] {
        flex: 1;
        min-width: 120px;
    }

    .session-meta[b-snj2hh7cof] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .join-code-display[b-snj2hh7cof] {
        font-size: 24px;
        letter-spacing: 0.15em;
        padding: 12px 20px;
    }

    .input-with-button[b-snj2hh7cof] {
        flex-direction: column;
    }

    .share-buttons[b-snj2hh7cof] {
        flex-direction: column;
    }

    .share-buttons button[b-snj2hh7cof] {
        width: 100%;
    }

    .qr-code-section[b-snj2hh7cof] {
        flex-direction: column;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .page-header-content h1[b-snj2hh7cof] {
        font-size: 24px;
    }

    .card-header[b-snj2hh7cof] {
        padding: 16px 20px;
    }

    .card-body[b-snj2hh7cof] {
        padding: 20px;
    }

    .participant-item[b-snj2hh7cof] {
        padding: 14px 20px;
    }

    .join-code-display[b-snj2hh7cof] {
        font-size: 20px;
        letter-spacing: 0.1em;
    }

    .qr-code-container[b-snj2hh7cof] {
        padding: 12px;
    }

    .qr-code-image[b-snj2hh7cof] {
        width: 140px;
        height: 140px;
    }
}
/* /Pages/Fono/Sessions.razor.rz.scp.css */
/* =============================================
   SESSIONS PAGE - shadcn/ui Style
   Consistent with Dashboard (Index)
   ============================================= */

.page-container[b-byjafn7rh9] {
    width: 100%;
}

/* ===== ALERT BANNER ===== */
.alert-banner[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.alert-banner.alert-warning[b-byjafn7rh9] {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.alert-icon[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-warning .alert-icon[b-byjafn7rh9] {
    color: #eab308;
}

.alert-content[b-byjafn7rh9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert-title[b-byjafn7rh9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.alert-description[b-byjafn7rh9] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.alert-action[b-byjafn7rh9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.alert-action:hover[b-byjafn7rh9] {
    background-color: var(--secondary);
    text-decoration: none;
}

/* ===== PAGE HEADER ===== */
.page-header[b-byjafn7rh9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-byjafn7rh9] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.page-header-content p[b-byjafn7rh9] {
    font-size: 14px;
    color: var(--muted-foreground);
}

.page-header-actions[b-byjafn7rh9] {
    display: flex;
    gap: 12px;
}

/* ===== BUTTONS ===== */
.btn-primary[b-byjafn7rh9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-primary:hover:not(:disabled)[b-byjafn7rh9] {
    background-color: var(--secondary);
    text-decoration: none;
}

.btn-primary:disabled[b-byjafn7rh9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline[b-byjafn7rh9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-outline:hover:not(:disabled)[b-byjafn7rh9] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

.btn-outline:disabled[b-byjafn7rh9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-byjafn7rh9] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--muted-foreground);
    border-top-color: var(--background);
    border-radius: 50%;
    animation: spin-b-byjafn7rh9 0.6s linear infinite;
}

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

/* ===== STATS GRID ===== */
.stats-grid[b-byjafn7rh9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-byjafn7rh9] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.stat-card-warning[b-byjafn7rh9] {
    border-color: rgba(234, 179, 8, 0.5);
    background-color: rgba(234, 179, 8, 0.05);
}

.stat-header[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title[b-byjafn7rh9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.stat-icon[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.stat-icon-success[b-byjafn7rh9] {
    color: var(--success-500);
}

.stat-icon-warning[b-byjafn7rh9] {
    color: #eab308;
}

.stat-value[b-byjafn7rh9] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.stat-value-separator[b-byjafn7rh9] {
    color: var(--muted-foreground);
    font-weight: 400;
    margin: 0 2px;
}

.stat-value-limit[b-byjafn7rh9] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.stat-loading[b-byjafn7rh9] {
    color: var(--zinc-600);
}

.stat-footer[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-limit[b-byjafn7rh9] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.stat-link[b-byjafn7rh9] {
    font-size: 13px;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stat-link:hover[b-byjafn7rh9] {
    color: var(--muted-foreground);
}

/* ===== SECTION ===== */
.section[b-byjafn7rh9] {
    margin-bottom: 32px;
}

.section-header[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title[b-byjafn7rh9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
}

/* ===== SESSIONS CARD ===== */
.sessions-card[b-byjafn7rh9] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* ===== SESSIONS LIST ===== */
.sessions-list[b-byjafn7rh9] {
    display: flex;
    flex-direction: column;
}

.session-item[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s;
}

.session-item:last-child[b-byjafn7rh9] {
    border-bottom: none;
}

.session-item:hover[b-byjafn7rh9] {
    background-color: var(--accent);
}

.session-status[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-dot[b-byjafn7rh9] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-active[b-byjafn7rh9] {
    background-color: var(--success-500);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    animation: pulse-b-byjafn7rh9 2s infinite;
}

.status-ended[b-byjafn7rh9] {
    background-color: var(--muted-foreground);
}

.status-pending[b-byjafn7rh9] {
    background-color: #eab308;
}

@keyframes pulse-b-byjafn7rh9 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
}

.session-info[b-byjafn7rh9] {
    flex: 1;
    min-width: 0;
}

.session-title[b-byjafn7rh9] {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 6px 0;
}

.session-meta[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meta-item[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.meta-item svg[b-byjafn7rh9] {
    flex-shrink: 0;
}

.session-actions[b-byjafn7rh9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.session-badge[b-byjafn7rh9] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.badge-success[b-byjafn7rh9] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-500);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-secondary[b-byjafn7rh9] {
    background-color: var(--accent);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.badge-warning[b-byjafn7rh9] {
    background-color: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.join-code[b-byjafn7rh9] {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.1em;
}

.session-arrow[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    color: var(--zinc-600);
    transition: color 0.15s, transform 0.15s;
}

.session-item:hover .session-arrow[b-byjafn7rh9] {
    color: var(--foreground);
    transform: translateX(4px);
}

/* ===== LOADING STATE ===== */
.loading-state[b-byjafn7rh9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--muted-foreground);
}

.loading-state .spinner[b-byjafn7rh9] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--foreground);
    border-radius: 50%;
    animation: spin-b-byjafn7rh9 0.8s linear infinite;
    margin-bottom: 16px;
}

.loading-state p[b-byjafn7rh9] {
    font-size: 14px;
    margin: 0;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-byjafn7rh9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.empty-icon[b-byjafn7rh9] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state h3[b-byjafn7rh9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
}

.empty-state p[b-byjafn7rh9] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 24px 0;
}

/* ===== DIALOG (shadcn/ui style) ===== */
.dialog-overlay[b-byjafn7rh9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    isolation: isolate;
    animation: overlayShow-b-byjafn7rh9 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes overlayShow-b-byjafn7rh9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog[b-byjafn7rh9] {
    display: block !important;
    position: relative;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 450px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    animation: dialogShow-b-byjafn7rh9 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialogShow-b-byjafn7rh9 {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-header[b-byjafn7rh9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 0 24px;
}

.dialog-title h3[b-byjafn7rh9] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.dialog-title p[b-byjafn7rh9] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

.dialog-close[b-byjafn7rh9] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.dialog-close:hover[b-byjafn7rh9] {
    background-color: var(--accent);
    color: var(--foreground);
}

.dialog-close:disabled[b-byjafn7rh9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-content[b-byjafn7rh9] {
    padding: 20px 24px 24px 24px;
}

.dialog-footer[b-byjafn7rh9] {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
    .dialog-footer[b-byjafn7rh9] {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* ===== FORM FIELDS ===== */
.form-field[b-byjafn7rh9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-byjafn7rh9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

[b-byjafn7rh9] .form-input,
.form-input[b-byjafn7rh9] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--foreground) !important;
    background-color: var(--background) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

[b-byjafn7rh9] .form-input::placeholder,
.form-input[b-byjafn7rh9]::placeholder {
    color: var(--muted-foreground);
}

[b-byjafn7rh9] .form-input:focus,
.form-input:focus[b-byjafn7rh9] {
    outline: none;
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.2);
}

[b-byjafn7rh9] .form-input:disabled,
.form-input:disabled[b-byjafn7rh9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-hint[b-byjafn7rh9] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.form-error[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 14px;
    color: var(--error-500);
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    margin-top: 16px;
}

.form-error svg[b-byjafn7rh9] {
    flex-shrink: 0;
}

/* ===== DIALOG BUTTONS ===== */
.btn-ghost[b-byjafn7rh9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-ghost:hover:not(:disabled)[b-byjafn7rh9] {
    background-color: var(--accent);
    border-color: var(--border);
}

.btn-ghost:disabled[b-byjafn7rh9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-footer .btn-primary[b-byjafn7rh9] {
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
}

@media (max-width: 639px) {
    .dialog-footer .btn-ghost[b-byjafn7rh9],
    .dialog-footer .btn-primary[b-byjafn7rh9] {
        width: 100%;
    }
}

/* ===== FORM ===== */
.form-group[b-byjafn7rh9] {
    margin-bottom: 20px;
}

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

.form-label[b-byjafn7rh9] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 8px;
}

.form-error[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--error-500);
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    margin-top: 16px;
}

.form-error svg[b-byjafn7rh9] {
    flex-shrink: 0;
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .stats-grid[b-byjafn7rh9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-byjafn7rh9] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-byjafn7rh9] {
        width: 100%;
        flex-direction: column;
    }

    .page-header-actions .btn-primary[b-byjafn7rh9],
    .page-header-actions .btn-outline[b-byjafn7rh9] {
        width: 100%;
        justify-content: center;
    }

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

    .alert-banner[b-byjafn7rh9] {
        flex-direction: column;
        text-align: center;
    }

    .alert-action[b-byjafn7rh9] {
        width: 100%;
    }

    .session-item[b-byjafn7rh9] {
        flex-wrap: wrap;
        padding: 16px;
    }

    .session-actions[b-byjafn7rh9] {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .session-arrow[b-byjafn7rh9] {
        display: none;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .stats-grid[b-byjafn7rh9] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-byjafn7rh9] {
        padding: 20px;
    }

    .stat-value[b-byjafn7rh9] {
        font-size: 28px;
    }

    .page-header-content h1[b-byjafn7rh9] {
        font-size: 24px;
    }

    .session-meta[b-byjafn7rh9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .modal[b-byjafn7rh9] {
        margin: 16px;
    }
}

/* ===== PATIENT SEARCH ===== */
.patient-search-container[b-byjafn7rh9] {
    position: relative;
}

.search-input-wrapper[b-byjafn7rh9] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-byjafn7rh9] {
    position: absolute;
    left: 12px;
    color: var(--muted-foreground);
    pointer-events: none;
}

.search-input[b-byjafn7rh9] {
    padding-left: 36px !important;
    padding-right: 36px !important;
}

.clear-patient-btn[b-byjafn7rh9] {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}

.clear-patient-btn:hover[b-byjafn7rh9] {
    background: var(--border);
    color: var(--foreground);
}

.patient-dropdown[b-byjafn7rh9] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.patient-option[b-byjafn7rh9] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}

.patient-option:hover[b-byjafn7rh9] {
    background-color: var(--accent);
}

.patient-avatar-small[b-byjafn7rh9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.patient-option-info[b-byjafn7rh9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.patient-option-name[b-byjafn7rh9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-option-email[b-byjafn7rh9] {
    font-size: 12px;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-patient-badge[b-byjafn7rh9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    margin-top: 8px;
}

.selected-patient-badge svg[b-byjafn7rh9] {
    flex-shrink: 0;
}

/* Meta patient highlight */
.meta-patient[b-byjafn7rh9] {
    color: var(--primary);
    font-weight: 500;
}

.meta-patient svg[b-byjafn7rh9] {
    color: var(--primary);
}
/* /Pages/Fono/Team.razor.rz.scp.css */
/* =============================================
   TEAM PAGE - shadcn/ui Style
   Consistent with Dashboard (Index)
   ============================================= */

.page-container[b-p7vb5zivqj] {
    width: 100%;
}

/* ===== PAGE HEADER ===== */
.page-header[b-p7vb5zivqj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-p7vb5zivqj] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.page-header-content p[b-p7vb5zivqj] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.page-header-actions[b-p7vb5zivqj] {
    display: flex;
    gap: 12px;
}

/* ===== STATS GRID ===== */
.stats-grid[b-p7vb5zivqj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-p7vb5zivqj] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.stat-card-warning[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .stat-card-warning[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-header[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title[b-p7vb5zivqj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.stat-icon[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.stat-icon-warning[b-p7vb5zivqj] {
    color: var(--error-500);
}

.stat-value[b-p7vb5zivqj] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.stat-value-small[b-p7vb5zivqj] {
    font-size: 24px;
}

.stat-value-separator[b-p7vb5zivqj] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.stat-value-limit[b-p7vb5zivqj] {
    font-size: 20px;
    font-weight: 400;
    color: var(--muted-foreground);
}

.stat-loading[b-p7vb5zivqj] {
    color: var(--zinc-600);
}

.stat-footer[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-limit[b-p7vb5zivqj] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.stat-card-warning .stat-limit[b-p7vb5zivqj] {
    color: var(--error-500);
}

.stat-link[b-p7vb5zivqj] {
    font-size: 13px;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}

.stat-link:hover[b-p7vb5zivqj] {
    color: var(--muted-foreground);
}

/* ===== SECTIONS ===== */
.section[b-p7vb5zivqj] {
    margin-bottom: 32px;
}

.section-header[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h2[b-p7vb5zivqj] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.section-badge[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background-color: var(--accent);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
}

/* ===== CONTENT CARD ===== */
.content-card[b-p7vb5zivqj] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

/* ===== BUTTONS ===== */
.btn-primary[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.btn-primary:hover:not(:disabled)[b-p7vb5zivqj] {
    opacity: 0.9;
}

.btn-primary:disabled[b-p7vb5zivqj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-warning[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background-color: var(--warning-500, #f59e0b);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}

.btn-warning:hover:not(:disabled)[b-p7vb5zivqj] {
    opacity: 0.9;
    color: white;
}

.btn-outline[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-outline:hover:not(:disabled)[b-p7vb5zivqj] {
    background-color: var(--accent);
}

.btn-icon[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: transparent;
    color: var(--muted-foreground);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-icon:hover:not(:disabled)[b-p7vb5zivqj] {
    background-color: var(--accent);
    color: var(--foreground);
}

.btn-icon:disabled[b-p7vb5zivqj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon-danger:hover:not(:disabled)[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-500);
}

/* ===== LOADING STATE ===== */
.loading-state[b-p7vb5zivqj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
}

.loading-state p[b-p7vb5zivqj] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.spinner[b-p7vb5zivqj] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-p7vb5zivqj 0.8s linear infinite;
}

.spinner-small[b-p7vb5zivqj] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-p7vb5zivqj 0.6s linear infinite;
}

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

/* ===== EMPTY STATE ===== */
.empty-state[b-p7vb5zivqj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    text-align: center;
}

.empty-icon[b-p7vb5zivqj] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    opacity: 0.5;
}

.empty-state h3[b-p7vb5zivqj] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.empty-state p[b-p7vb5zivqj] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== ALERTS ===== */
.alert[b-p7vb5zivqj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.alert svg[b-p7vb5zivqj] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-success[b-p7vb5zivqj] {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--success-500, #22c55e);
}

.alert-danger[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--error-500);
}

/* ===== INVITE FORM ===== */
.invite-form .form-row[b-p7vb5zivqj] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.invite-form .form-group[b-p7vb5zivqj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invite-form label[b-p7vb5zivqj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

/* ===== LIMIT BANNER ===== */
.limit-banner[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
}

[data-theme="dark"] .limit-banner[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.limit-banner svg[b-p7vb5zivqj] {
    flex-shrink: 0;
    color: var(--error-500);
}

.limit-content[b-p7vb5zivqj] {
    flex: 1;
}

.limit-content strong[b-p7vb5zivqj] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 2px;
}

.limit-content p[b-p7vb5zivqj] {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== INVITE LIST ===== */
.invite-list[b-p7vb5zivqj] {
    display: flex;
    flex-direction: column;
}

.invite-item[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.invite-item:last-child[b-p7vb5zivqj] {
    border-bottom: none;
    padding-bottom: 0;
}

.invite-item:first-child[b-p7vb5zivqj] {
    padding-top: 0;
}

.invite-item.expired[b-p7vb5zivqj] {
    opacity: 0.6;
}

.invite-icon[b-p7vb5zivqj] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: 8px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.invite-info[b-p7vb5zivqj] {
    flex: 1;
    min-width: 0;
}

.invite-email[b-p7vb5zivqj] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 4px;
}

.invite-meta[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expires-text[b-p7vb5zivqj] {
    font-size: 12px;
    color: var(--muted-foreground);
}

/* ===== MEMBERS LIST ===== */
.members-list[b-p7vb5zivqj] {
    display: flex;
    flex-direction: column;
}

.member-item[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.member-item:last-child[b-p7vb5zivqj] {
    border-bottom: none;
    padding-bottom: 0;
}

.member-item:first-child[b-p7vb5zivqj] {
    padding-top: 0;
}

.member-avatar[b-p7vb5zivqj] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-foreground);
    flex-shrink: 0;
}

.member-avatar.admin[b-p7vb5zivqj] {
    background-color: var(--warning-500, #f59e0b);
}

.member-info[b-p7vb5zivqj] {
    flex: 1;
    min-width: 0;
}

.member-name[b-p7vb5zivqj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin: 0 0 2px 0;
}

.member-email[b-p7vb5zivqj] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.member-meta[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.member-date[b-p7vb5zivqj] {
    font-size: 13px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

/* ===== STATUS BADGES ===== */
.status-badge[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
}

.status-badge.pending[b-p7vb5zivqj] {
    background-color: rgba(234, 179, 8, 0.1);
    color: var(--warning-600, #ca8a04);
}

[data-theme="dark"] .status-badge.pending[b-p7vb5zivqj] {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fcd34d;
}

.status-badge.expired[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-500);
}

[data-theme="dark"] .status-badge.expired[b-p7vb5zivqj] {
    background-color: rgba(239, 68, 68, 0.15);
}

.status-badge.active[b-p7vb5zivqj] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-500, #22c55e);
}

[data-theme="dark"] .status-badge.active[b-p7vb5zivqj] {
    background-color: rgba(34, 197, 94, 0.15);
}

.status-badge.invited[b-p7vb5zivqj] {
    background-color: rgba(234, 179, 8, 0.1);
    color: var(--warning-600, #ca8a04);
}

[data-theme="dark"] .status-badge.invited[b-p7vb5zivqj] {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fcd34d;
}

.status-badge.disabled[b-p7vb5zivqj] {
    background-color: var(--accent);
    color: var(--muted-foreground);
}

/* ===== ROLE BADGES ===== */
.role-badge[b-p7vb5zivqj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
}

.role-badge.admin[b-p7vb5zivqj] {
    background-color: rgba(234, 179, 8, 0.1);
    color: var(--warning-600, #ca8a04);
}

[data-theme="dark"] .role-badge.admin[b-p7vb5zivqj] {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fcd34d;
}

.role-badge.therapist[b-p7vb5zivqj] {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

[data-theme="dark"] .role-badge.therapist[b-p7vb5zivqj] {
    background-color: rgba(59, 130, 246, 0.15);
}

/* ===== VALIDATION ===== */
[b-p7vb5zivqj] .validation-message {
    color: var(--error-500);
    font-size: 12px;
    margin-top: 4px;
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .stats-grid[b-p7vb5zivqj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-p7vb5zivqj] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-p7vb5zivqj] {
        width: 100%;
    }

    .page-header-actions .btn-warning[b-p7vb5zivqj] {
        flex: 1;
        justify-content: center;
    }

    .stat-card[b-p7vb5zivqj] {
        padding: 16px;
    }

    .stat-value[b-p7vb5zivqj] {
        font-size: 24px;
    }

    .stat-value-small[b-p7vb5zivqj] {
        font-size: 18px;
    }

    .invite-form .form-row[b-p7vb5zivqj] {
        flex-direction: column;
        gap: 12px;
    }

    .invite-form .btn-primary[b-p7vb5zivqj] {
        width: 100%;
    }

    .limit-banner[b-p7vb5zivqj] {
        flex-direction: column;
        text-align: center;
    }

    .limit-content[b-p7vb5zivqj] {
        text-align: center;
    }

    .member-item[b-p7vb5zivqj] {
        flex-wrap: wrap;
    }

    .member-meta[b-p7vb5zivqj] {
        order: 3;
        width: 100%;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px solid var(--border);
    }

    .member-date[b-p7vb5zivqj] {
        display: none;
    }
}

/* ===== MODAL ===== */
.modal-overlay[b-p7vb5zivqj] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}

.modal-container[b-p7vb5zivqj] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2[b-p7vb5zivqj],
.modal-header h3[b-p7vb5zivqj] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.modal-close[b-p7vb5zivqj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}

.modal-close:hover[b-p7vb5zivqj] {
    background-color: var(--accent);
    color: var(--foreground);
}

.modal-body[b-p7vb5zivqj] {
    padding: 24px;
    overflow-y: auto;
}

.modal-description[b-p7vb5zivqj] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.modal-footer[b-p7vb5zivqj] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    margin-top: 8px;
}

/* ===== INVITE FORM MODAL ===== */
.invite-form-modal[b-p7vb5zivqj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invite-form-modal .form-group[b-p7vb5zivqj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invite-form-modal label[b-p7vb5zivqj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.invite-form-modal input[type="email"][b-p7vb5zivqj] {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--foreground);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.invite-form-modal input[type="email"]:focus[b-p7vb5zivqj] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.invite-form-modal input[type="email"][b-p7vb5zivqj]::placeholder {
    color: var(--muted-foreground);
}

.invite-form-modal .btn-primary[b-p7vb5zivqj] {
    width: 100%;
    margin-top: 8px;
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .page-header-content h1[b-p7vb5zivqj] {
        font-size: 20px;
    }

    .stats-grid[b-p7vb5zivqj] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-p7vb5zivqj] {
        padding: 12px 16px;
    }

    .stat-value[b-p7vb5zivqj] {
        font-size: 20px;
    }

    .content-card[b-p7vb5zivqj] {
        padding: 16px;
    }

    .invite-item[b-p7vb5zivqj],
    .member-item[b-p7vb5zivqj] {
        gap: 12px;
    }

    .invite-icon[b-p7vb5zivqj],
    .member-avatar[b-p7vb5zivqj] {
        width: 36px;
        height: 36px;
    }

    .modal-container[b-p7vb5zivqj] {
        max-height: 85vh;
    }

    .modal-header[b-p7vb5zivqj] {
        padding: 16px 20px;
    }

    .modal-body[b-p7vb5zivqj] {
        padding: 20px;
    }

    .modal-footer[b-p7vb5zivqj] {
        padding-top: 20px;
        flex-direction: column;
    }

    .modal-footer .btn-primary[b-p7vb5zivqj],
    .modal-footer .btn-outline[b-p7vb5zivqj] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Fono/Usage.razor.rz.scp.css */
/* =============================================
   USAGE PAGE - shadcn/ui Style
   Consistent with Dashboard (Index)
   ============================================= */

.page-container[b-heuujeql8y] {
    width: 100%;
}

/* ===== PAGE HEADER ===== */
.page-header[b-heuujeql8y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header-content h1[b-heuujeql8y] {
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.page-header-content p[b-heuujeql8y] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.page-header-actions[b-heuujeql8y] {
    display: flex;
    gap: 12px;
}

/* ===== BUTTONS ===== */
.btn-outline[b-heuujeql8y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.btn-outline:hover:not(:disabled)[b-heuujeql8y] {
    background-color: var(--accent);
}

.btn-small[b-heuujeql8y] {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-primary[b-heuujeql8y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}

.btn-primary:hover:not(:disabled)[b-heuujeql8y] {
    opacity: 0.9;
}

/* ===== LOADING STATE ===== */
.loading-state[b-heuujeql8y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
}

.loading-state p[b-heuujeql8y] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

.spinner[b-heuujeql8y] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-heuujeql8y 0.8s linear infinite;
}

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

/* ===== ALERTS ===== */
.alert[b-heuujeql8y] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.alert svg[b-heuujeql8y] {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-content[b-heuujeql8y] {
    flex: 1;
}

.alert-content strong[b-heuujeql8y] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-content p[b-heuujeql8y] {
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

.alert-warning[b-heuujeql8y] {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.alert-warning svg[b-heuujeql8y] {
    color: var(--warning-500, #eab308);
}

.alert-warning .alert-content strong[b-heuujeql8y] {
    color: var(--warning-700, #a16207);
}

.alert-warning .alert-content p[b-heuujeql8y] {
    color: var(--muted-foreground);
}

[data-theme="dark"] .alert-warning[b-heuujeql8y] {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

[data-theme="dark"] .alert-warning .alert-content strong[b-heuujeql8y] {
    color: #fcd34d;
}

.alert-danger[b-heuujeql8y] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-danger svg[b-heuujeql8y] {
    color: var(--error-500);
}

.alert-danger .alert-content strong[b-heuujeql8y] {
    color: var(--error-700, #b91c1c);
}

.alert-danger .alert-content p[b-heuujeql8y] {
    color: var(--muted-foreground);
}

[data-theme="dark"] .alert-danger[b-heuujeql8y] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .alert-danger .alert-content strong[b-heuujeql8y] {
    color: #fca5a5;
}

.alert-muted[b-heuujeql8y] {
    background-color: var(--accent);
    border: 1px solid var(--border);
}

.alert-muted svg[b-heuujeql8y] {
    color: var(--muted-foreground);
}

.alert-muted .alert-content strong[b-heuujeql8y] {
    color: var(--foreground);
}

.alert-muted .alert-content p[b-heuujeql8y] {
    color: var(--muted-foreground);
}

/* ===== STATS GRID ===== */
.stats-grid[b-heuujeql8y] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-heuujeql8y] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.stat-card-warning[b-heuujeql8y] {
    background-color: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .stat-card-warning[b-heuujeql8y] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-header[b-heuujeql8y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title[b-heuujeql8y] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.stat-icon[b-heuujeql8y] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

.stat-icon-warning[b-heuujeql8y] {
    color: var(--error-500);
}

.stat-value[b-heuujeql8y] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.stat-value-separator[b-heuujeql8y] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.stat-value-limit[b-heuujeql8y] {
    font-size: 20px;
    font-weight: 400;
    color: var(--muted-foreground);
}

.stat-footer[b-heuujeql8y] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-percent[b-heuujeql8y] {
    font-size: 13px;
    color: var(--muted-foreground);
    min-width: 36px;
    text-align: right;
}

.stat-remaining[b-heuujeql8y] {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted-foreground);
}

/* ===== USAGE BAR ===== */
.usage-bar[b-heuujeql8y] {
    flex: 1;
    height: 8px;
    background-color: var(--accent);
    border-radius: 9999px;
    overflow: hidden;
}

[data-theme="dark"] .usage-bar[b-heuujeql8y] {
    background-color: rgba(255, 255, 255, 0.1);
}

.usage-fill[b-heuujeql8y] {
    height: 100%;
    background-color: var(--primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.usage-fill.exceeded[b-heuujeql8y] {
    background-color: var(--error-500);
}

.unlimited-badge[b-heuujeql8y] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: rgba(34, 197, 94, 0.1);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--success-600, #16a34a);
}

[data-theme="dark"] .unlimited-badge[b-heuujeql8y] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

/* ===== SECTIONS ===== */
.section[b-heuujeql8y] {
    margin-bottom: 32px;
}

.section-header[b-heuujeql8y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h2[b-heuujeql8y] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

/* ===== CONTENT CARD ===== */
.content-card[b-heuujeql8y] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

/* ===== PLAN DETAILS GRID ===== */
.plan-details-grid[b-heuujeql8y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.plan-detail-item[b-heuujeql8y] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.plan-detail-icon[b-heuujeql8y] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: 10px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.plan-detail-content[b-heuujeql8y] {
    flex: 1;
    min-width: 0;
}

.plan-detail-label[b-heuujeql8y] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.plan-detail-value[b-heuujeql8y] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

/* ===== STATUS BADGES ===== */
.status-badge[b-heuujeql8y] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.status-badge.trialing[b-heuujeql8y] {
    background-color: rgba(234, 179, 8, 0.1);
    color: var(--warning-600, #ca8a04);
}

[data-theme="dark"] .status-badge.trialing[b-heuujeql8y] {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fcd34d;
}

.status-badge.active[b-heuujeql8y] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-600, #16a34a);
}

[data-theme="dark"] .status-badge.active[b-heuujeql8y] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.status-badge.past-due[b-heuujeql8y] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-600, #dc2626);
}

[data-theme="dark"] .status-badge.past-due[b-heuujeql8y] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.status-badge.canceled[b-heuujeql8y] {
    background-color: var(--accent);
    color: var(--muted-foreground);
}

/* ===== UPGRADE BANNER ===== */
.upgrade-banner[b-heuujeql8y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
}

[data-theme="dark"] .upgrade-banner[b-heuujeql8y] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.25);
}

.upgrade-banner-content[b-heuujeql8y] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.upgrade-banner-content svg[b-heuujeql8y] {
    color: var(--primary);
    flex-shrink: 0;
}

.upgrade-banner-text strong[b-heuujeql8y] {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 2px;
}

.upgrade-banner-text p[b-heuujeql8y] {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== RESPONSIVE - LARGE TABLET ===== */
@media (max-width: 1024px) {
    .stats-grid[b-heuujeql8y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .plan-details-grid[b-heuujeql8y] {
        grid-template-columns: 1fr;
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .page-header[b-heuujeql8y] {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-actions[b-heuujeql8y] {
        width: 100%;
    }

    .page-header-actions .btn-outline[b-heuujeql8y] {
        flex: 1;
        justify-content: center;
    }

    .stat-card[b-heuujeql8y] {
        padding: 16px;
    }

    .stat-value[b-heuujeql8y] {
        font-size: 24px;
    }

    .alert[b-heuujeql8y] {
        flex-direction: column;
        gap: 12px;
    }

    .alert .btn-outline[b-heuujeql8y] {
        width: 100%;
    }

    .upgrade-banner[b-heuujeql8y] {
        flex-direction: column;
        text-align: center;
    }

    .upgrade-banner-content[b-heuujeql8y] {
        flex-direction: column;
    }

    .upgrade-banner .btn-primary[b-heuujeql8y] {
        width: 100%;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .page-header-content h1[b-heuujeql8y] {
        font-size: 20px;
    }

    .stats-grid[b-heuujeql8y] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-heuujeql8y] {
        padding: 12px 16px;
    }

    .stat-value[b-heuujeql8y] {
        font-size: 20px;
    }

    .content-card[b-heuujeql8y] {
        padding: 16px;
    }

    .plan-detail-item[b-heuujeql8y] {
        gap: 12px;
    }

    .plan-detail-icon[b-heuujeql8y] {
        width: 36px;
        height: 36px;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* =============================================
   LANDING PAGE - shadcn/ui Theme Support
   ============================================= */

.landing-page[b-4v4kb41xzx] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    min-height: 100vh;
}

/* ===== HEADER ===== */
.landing-header[b-4v4kb41xzx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 32px;
    background-color: color-mix(in srgb, var(--background) 80%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.header-container[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 0;
}

.logo[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
}

.logo-icon[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
}

.logo-text[b-4v4kb41xzx] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.nav-links[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link[b-4v4kb41xzx] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s;
}

.nav-link:hover[b-4v4kb41xzx] {
    color: var(--foreground);
}

.header-actions[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.theme-toggle:hover[b-4v4kb41xzx] {
    background-color: var(--accent);
}

.theme-toggle svg[b-4v4kb41xzx] {
    width: 18px;
    height: 18px;
    stroke: var(--muted-foreground);
    transition: stroke 0.15s;
}

.theme-toggle:hover svg[b-4v4kb41xzx] {
    stroke: var(--foreground);
}

.btn-ghost[b-4v4kb41xzx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s;
}

.btn-ghost:hover[b-4v4kb41xzx] {
    background-color: var(--accent);
}

.btn-primary[b-4v4kb41xzx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s;
}

.btn-primary:hover[b-4v4kb41xzx] {
    background-color: var(--secondary);
}

.btn-outline[b-4v4kb41xzx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-outline:hover[b-4v4kb41xzx] {
    background-color: var(--accent);
    border-color: var(--zinc-700);
}

.btn-lg[b-4v4kb41xzx] {
    height: 48px;
    padding: 0 24px;
    font-size: 15px;
}

/* ===== HERO ===== */
.hero[b-4v4kb41xzx] {
    padding: 160px 32px 100px;
    background: linear-gradient(180deg, var(--background) 0%, var(--card) 100%);
}

.hero-container[b-4v4kb41xzx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

.hero-content[b-4v4kb41xzx] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-badge[b-4v4kb41xzx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--muted-foreground);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 9999px;
}

.hero-badge span[b-4v4kb41xzx] {
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-radius: 9999px;
}

.hero-title[b-4v4kb41xzx] {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--foreground);
}

.hero-gradient[b-4v4kb41xzx] {
    background: linear-gradient(135deg, var(--muted-foreground) 0%, var(--foreground) 50%, var(--muted-foreground) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-4v4kb41xzx] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--muted-foreground);
    max-width: 480px;
}

.hero-buttons[b-4v4kb41xzx] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* ===== HERO VISUAL ===== */
.hero-visual[b-4v4kb41xzx] {
    display: flex;
    justify-content: center;
}

.demo-card[b-4v4kb41xzx] {
    width: 100%;
    max-width: 420px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.demo-header[b-4v4kb41xzx] {
    display: flex;
    gap: 8px;
    padding: 16px;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

.demo-dot[b-4v4kb41xzx] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--zinc-700);
}

.demo-dot:first-child[b-4v4kb41xzx] {
    background-color: #ef4444;
}

.demo-dot:nth-child(2)[b-4v4kb41xzx] {
    background-color: #eab308;
}

.demo-dot:nth-child(3)[b-4v4kb41xzx] {
    background-color: #22c55e;
}

.demo-content[b-4v4kb41xzx] {
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.demo-waveform[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 80px;
}

.demo-waveform span[b-4v4kb41xzx] {
    width: 6px;
    background-color: var(--foreground);
    border-radius: 4px;
    animation: wave-b-4v4kb41xzx 1.2s ease-in-out infinite;
}

.demo-waveform span:nth-child(1)[b-4v4kb41xzx] { height: 20%; animation-delay: 0s; }
.demo-waveform span:nth-child(2)[b-4v4kb41xzx] { height: 40%; animation-delay: 0.1s; }
.demo-waveform span:nth-child(3)[b-4v4kb41xzx] { height: 60%; animation-delay: 0.2s; }
.demo-waveform span:nth-child(4)[b-4v4kb41xzx] { height: 80%; animation-delay: 0.3s; }
.demo-waveform span:nth-child(5)[b-4v4kb41xzx] { height: 100%; animation-delay: 0.4s; }
.demo-waveform span:nth-child(6)[b-4v4kb41xzx] { height: 80%; animation-delay: 0.5s; }
.demo-waveform span:nth-child(7)[b-4v4kb41xzx] { height: 60%; animation-delay: 0.6s; }
.demo-waveform span:nth-child(8)[b-4v4kb41xzx] { height: 40%; animation-delay: 0.7s; }
.demo-waveform span:nth-child(9)[b-4v4kb41xzx] { height: 20%; animation-delay: 0.8s; }

@keyframes wave-b-4v4kb41xzx {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

.demo-channels[b-4v4kb41xzx] {
    display: flex;
    gap: 24px;
}

.channel-item[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-badge[b-4v4kb41xzx] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}

.channel-badge.left[b-4v4kb41xzx] {
    background-color: #60a5fa;
    color: var(--zinc-900);
}

.channel-badge.right[b-4v4kb41xzx] {
    background-color: #f87171;
    color: var(--zinc-900);
}

.channel-item span[b-4v4kb41xzx] {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== SECTIONS COMMON ===== */
.section-container[b-4v4kb41xzx] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.section-header[b-4v4kb41xzx] {
    text-align: center;
    margin-bottom: 64px;
}

.section-title[b-4v4kb41xzx] {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--foreground);
    margin-bottom: 16px;
}

.section-description[b-4v4kb41xzx] {
    font-size: 18px;
    color: var(--muted-foreground);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== FEATURES ===== */
.features[b-4v4kb41xzx] {
    padding: 100px 0;
    background-color: var(--background);
}

.features-grid[b-4v4kb41xzx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card[b-4v4kb41xzx] {
    padding: 32px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.15s;
}

.feature-card:hover[b-4v4kb41xzx] {
    border-color: var(--zinc-700);
}

.feature-icon[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--accent);
    border-radius: 12px;
    color: var(--foreground);
    margin-bottom: 20px;
}

.feature-card h3[b-4v4kb41xzx] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 12px;
}

.feature-card p[b-4v4kb41xzx] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ===== HOW IT WORKS ===== */
.how-it-works[b-4v4kb41xzx] {
    padding: 100px 0;
    background-color: var(--card);
}

.steps-grid[b-4v4kb41xzx] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.step-card[b-4v4kb41xzx] {
    text-align: center;
    padding: 32px 16px;
}

.step-number[b-4v4kb41xzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-foreground);
    background-color: var(--primary);
    border-radius: 50%;
}

.step-card h3[b-4v4kb41xzx] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 8px;
}

.step-card p[b-4v4kb41xzx] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted-foreground);
}

/* ===== CTA SECTION ===== */
.cta-section[b-4v4kb41xzx] {
    padding: 100px 0;
    background-color: var(--background);
}

.cta-card[b-4v4kb41xzx] {
    text-align: center;
    padding: 64px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
}

.cta-card h2[b-4v4kb41xzx] {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--foreground);
    margin-bottom: 16px;
}

.cta-card p[b-4v4kb41xzx] {
    font-size: 18px;
    color: var(--muted-foreground);
    max-width: 500px;
    margin: 0 auto 32px;
}

.cta-buttons[b-4v4kb41xzx] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ===== FOOTER ===== */
.landing-footer[b-4v4kb41xzx] {
    padding: 64px 0 0;
    background-color: var(--background);
    border-top: 1px solid var(--border);
}

.footer-container[b-4v4kb41xzx] {
    display: flex;
    justify-content: space-between;
    gap: 64px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 48px;
}

.footer-brand[b-4v4kb41xzx] {
    max-width: 320px;
}

.footer-brand .logo[b-4v4kb41xzx] {
    margin-bottom: 16px;
}

.footer-tagline[b-4v4kb41xzx] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.footer-links[b-4v4kb41xzx] {
    display: flex;
    gap: 64px;
}

.footer-column[b-4v4kb41xzx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column h4[b-4v4kb41xzx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 4px;
}

.footer-column a[b-4v4kb41xzx] {
    font-size: 14px;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-column a:hover[b-4v4kb41xzx] {
    color: var(--foreground);
}

.footer-bottom[b-4v4kb41xzx] {
    text-align: center;
    padding: 24px 32px;
    border-top: 1px solid var(--border);
}

.footer-bottom p[b-4v4kb41xzx] {
    font-size: 14px;
    color: var(--zinc-600);
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 1024px) {
    .landing-header[b-4v4kb41xzx] {
        padding: 0 24px;
    }

    .header-container[b-4v4kb41xzx] {
        padding: 16px 0;
    }

    .nav-links[b-4v4kb41xzx] {
        display: none;
    }

    .hero[b-4v4kb41xzx] {
        padding: 140px 24px 80px;
    }

    .hero-container[b-4v4kb41xzx] {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }

    .hero-title[b-4v4kb41xzx] {
        font-size: 44px;
    }

    .hero-description[b-4v4kb41xzx] {
        max-width: none;
    }

    .hero-buttons[b-4v4kb41xzx] {
        justify-content: center;
    }

    .hero-visual[b-4v4kb41xzx] {
        order: 2;
    }

    .demo-card[b-4v4kb41xzx] {
        max-width: 360px;
    }

    .features-grid[b-4v4kb41xzx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid[b-4v4kb41xzx] {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-container[b-4v4kb41xzx] {
        flex-direction: column;
        gap: 48px;
    }

    .footer-brand[b-4v4kb41xzx] {
        max-width: none;
        text-align: center;
    }

    .footer-brand .logo[b-4v4kb41xzx] {
        justify-content: center;
    }

    .footer-links[b-4v4kb41xzx] {
        justify-content: center;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    .landing-header[b-4v4kb41xzx] {
        padding: 0 16px;
    }

    .header-container[b-4v4kb41xzx] {
        padding: 12px 0;
    }

    .logo-text[b-4v4kb41xzx] {
        font-size: 16px;
    }

    .hero[b-4v4kb41xzx] {
        padding: 120px 16px 60px;
    }

    .hero-title[b-4v4kb41xzx] {
        font-size: 36px;
    }

    .hero-description[b-4v4kb41xzx] {
        font-size: 16px;
    }

    .hero-buttons[b-4v4kb41xzx] {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn-primary[b-4v4kb41xzx],
    .hero-buttons .btn-outline[b-4v4kb41xzx] {
        width: 100%;
    }

    .section-container[b-4v4kb41xzx] {
        padding: 0 16px;
    }

    .section-title[b-4v4kb41xzx] {
        font-size: 28px;
    }

    .section-description[b-4v4kb41xzx] {
        font-size: 16px;
    }

    .features[b-4v4kb41xzx],
    .how-it-works[b-4v4kb41xzx],
    .cta-section[b-4v4kb41xzx] {
        padding: 60px 0;
    }

    .features-grid[b-4v4kb41xzx] {
        grid-template-columns: 1fr;
    }

    .steps-grid[b-4v4kb41xzx] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .step-card[b-4v4kb41xzx] {
        padding: 24px 16px;
    }

    .cta-card[b-4v4kb41xzx] {
        padding: 40px 24px;
    }

    .cta-card h2[b-4v4kb41xzx] {
        font-size: 28px;
    }

    .cta-card p[b-4v4kb41xzx] {
        font-size: 16px;
    }

    .cta-buttons[b-4v4kb41xzx] {
        flex-direction: column;
    }

    .cta-buttons .btn-primary[b-4v4kb41xzx],
    .cta-buttons .btn-outline[b-4v4kb41xzx] {
        width: 100%;
    }

    .footer-container[b-4v4kb41xzx] {
        padding: 0 16px 32px;
    }

    .footer-links[b-4v4kb41xzx] {
        flex-direction: column;
        gap: 32px;
        text-align: center;
    }

    .footer-bottom[b-4v4kb41xzx] {
        padding: 20px 16px;
    }
}

/* ===== RESPONSIVE - SMALL MOBILE ===== */
@media (max-width: 480px) {
    .hero-title[b-4v4kb41xzx] {
        font-size: 28px;
    }

    .section-header[b-4v4kb41xzx] {
        margin-bottom: 40px;
    }

    .section-title[b-4v4kb41xzx] {
        font-size: 24px;
    }

    .feature-card[b-4v4kb41xzx] {
        padding: 24px;
    }

    .cta-card h2[b-4v4kb41xzx] {
        font-size: 24px;
    }
}
/* /Pages/Invite/AcceptInvite.razor.rz.scp.css */
/* =============================================
   ACCEPT INVITE PAGE - IntegraÁudio Design System
   ============================================= */

.accept-container[b-6fcd8ebcw9] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: var(--space-8) var(--space-4);
    gap: var(--space-6);
}

/* Background decorativo para tema escuro */
[data-theme="dark"] .accept-container[b-6fcd8ebcw9] {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        var(--background);
}

/* ===== CARD PRINCIPAL ===== */
.accept-card[b-6fcd8ebcw9] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .accept-card[b-6fcd8ebcw9] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ===== HEADER ===== */
.accept-header[b-6fcd8ebcw9] {
    text-align: center;
    margin-bottom: var(--space-8);
}

.brand-link[b-6fcd8ebcw9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    margin-bottom: var(--space-6);
}

.brand-icon[b-6fcd8ebcw9] {
    font-size: 2rem;
}

.brand-name[b-6fcd8ebcw9] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--primary-600);
}

[data-theme="dark"] .brand-name[b-6fcd8ebcw9] {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.accept-header h1[b-6fcd8ebcw9] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--foreground);
    margin: 0 0 var(--space-2) 0;
}

.accept-header .text-muted[b-6fcd8ebcw9] {
    color: var(--foreground-muted);
    font-size: var(--text-base);
    margin: 0;
}

/* ===== ERROR STATE ===== */
.error-state[b-6fcd8ebcw9] {
    padding: var(--space-4) 0;
}

.error-icon[b-6fcd8ebcw9] {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-4);
}

.error-state h1[b-6fcd8ebcw9] {
    color: var(--error-600);
}

[data-theme="dark"] .error-state h1[b-6fcd8ebcw9] {
    color: #fca5a5;
}

/* ===== ACTION BUTTONS ===== */
.action-buttons[b-6fcd8ebcw9] {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.action-buttons .btn-primary[b-6fcd8ebcw9],
.action-buttons .btn-secondary[b-6fcd8ebcw9] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.action-buttons .btn-primary[b-6fcd8ebcw9] {
    background: var(--primary-600);
    color: white;
    border: none;
}

[data-theme="dark"] .action-buttons .btn-primary[b-6fcd8ebcw9] {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
}

.action-buttons .btn-primary:hover[b-6fcd8ebcw9] {
    background: var(--primary-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .action-buttons .btn-primary:hover[b-6fcd8ebcw9] {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.action-buttons .btn-secondary[b-6fcd8ebcw9] {
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
}

[data-theme="dark"] .action-buttons .btn-secondary[b-6fcd8ebcw9] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.action-buttons .btn-secondary:hover[b-6fcd8ebcw9] {
    background-color: var(--accent);
    border-color: var(--border);
}

[data-theme="dark"] .action-buttons .btn-secondary:hover[b-6fcd8ebcw9] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ===== FORM ===== */
.accept-form[b-6fcd8ebcw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-group[b-6fcd8ebcw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label[b-6fcd8ebcw9] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
}

.form-control[b-6fcd8ebcw9] {
    padding: var(--space-4);
    background-color: var(--input);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    color: var(--foreground);
    font-size: var(--text-base);
    transition: all var(--transition-base);
}

[data-theme="dark"] .form-control[b-6fcd8ebcw9] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.form-control:focus[b-6fcd8ebcw9] {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .form-control:focus[b-6fcd8ebcw9] {
    background: rgba(255, 255, 255, 0.08);
}

.form-control[b-6fcd8ebcw9]::placeholder {
    color: var(--input-placeholder);
}

.form-control:disabled[b-6fcd8ebcw9],
.form-control.readonly[b-6fcd8ebcw9] {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: var(--muted);
}

[data-theme="dark"] .form-control:disabled[b-6fcd8ebcw9],
[data-theme="dark"] .form-control.readonly[b-6fcd8ebcw9] {
    background: rgba(255, 255, 255, 0.03);
}

.form-hint[b-6fcd8ebcw9] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--foreground-muted);
}

.hint-icon[b-6fcd8ebcw9] {
    font-size: var(--text-sm);
}

.password-hint[b-6fcd8ebcw9] {
    margin-top: calc(var(--space-3) * -1);
}

/* ===== FORM ROW ===== */
.form-row[b-6fcd8ebcw9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* ===== ALERTS ===== */
.alert[b-6fcd8ebcw9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
}

.alert-icon[b-6fcd8ebcw9] {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.alert-danger[b-6fcd8ebcw9] {
    background-color: var(--error-50);
    border: 1px solid var(--error-200);
    color: var(--error-700);
}

[data-theme="dark"] .alert-danger[b-6fcd8ebcw9] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-success[b-6fcd8ebcw9] {
    background-color: var(--success-50);
    border: 1px solid var(--success-200);
    color: var(--success-700);
}

[data-theme="dark"] .alert-success[b-6fcd8ebcw9] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* ===== SUBMIT BUTTON ===== */
.btn-submit[b-6fcd8ebcw9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--primary-600);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: var(--space-2);
}

[data-theme="dark"] .btn-submit[b-6fcd8ebcw9] {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
}

.btn-submit:hover:not(:disabled)[b-6fcd8ebcw9] {
    background: var(--primary-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .btn-submit:hover:not(:disabled)[b-6fcd8ebcw9] {
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.btn-submit:disabled[b-6fcd8ebcw9] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-icon[b-6fcd8ebcw9] {
    font-size: var(--text-lg);
}

/* ===== SPINNER ===== */
.spinner[b-6fcd8ebcw9] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: var(--radius-full);
    animation: spin-b-6fcd8ebcw9 0.6s linear infinite;
}

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

/* ===== LOGIN LINK ===== */
.login-link[b-6fcd8ebcw9] {
    text-align: center;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--foreground-muted);
}

.login-link a[b-6fcd8ebcw9] {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: var(--font-medium);
    margin-left: var(--space-1);
}

[data-theme="dark"] .login-link a[b-6fcd8ebcw9] {
    color: var(--primary-400);
}

.login-link a:hover[b-6fcd8ebcw9] {
    text-decoration: underline;
}

/* ===== INFO BADGE ===== */
.info-badge[b-6fcd8ebcw9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background-color: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-full);
    color: var(--primary-600);
    font-size: var(--text-sm);
}

[data-theme="dark"] .info-badge[b-6fcd8ebcw9] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--primary-400);
}

.info-icon[b-6fcd8ebcw9] {
    font-size: var(--text-base);
}

/* ===== VALIDATION ===== */
[b-6fcd8ebcw9] .validation-message {
    color: var(--error-600);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}

[data-theme="dark"][b-6fcd8ebcw9]  .validation-message {
    color: #fca5a5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .accept-container[b-6fcd8ebcw9] {
        padding: var(--space-4);
    }

    .accept-card[b-6fcd8ebcw9] {
        padding: var(--space-6);
    }

    .form-row[b-6fcd8ebcw9] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-6fcd8ebcw9] {
        flex-direction: column;
    }

    .info-badge[b-6fcd8ebcw9] {
        text-align: center;
        flex-direction: column;
        gap: var(--space-2);
    }
}
/* /Pages/Legal/Privacy.razor.rz.scp.css */
/* =============================================
   LEGAL PAGES - shadcn/ui style
   Clean, minimal design with theme support
   ============================================= */

/* ===== PAGE LAYOUT ===== */
.legal-page[b-pmbs8mhouu] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--foreground);
}

/* ===== HEADER ===== */
.legal-header[b-pmbs8mhouu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-brand[b-pmbs8mhouu] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
}

.legal-brand:hover[b-pmbs8mhouu] {
    text-decoration: none;
    color: var(--foreground);
}

.legal-logo[b-pmbs8mhouu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
}

.legal-logo svg[b-pmbs8mhouu] {
    width: 20px;
    height: 20px;
}

.legal-brand-name[b-pmbs8mhouu] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.025em;
}

.legal-nav[b-pmbs8mhouu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-nav-link[b-pmbs8mhouu] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.15s;
}

.legal-nav-link:hover[b-pmbs8mhouu] {
    color: var(--foreground);
    background-color: var(--accent);
}

.legal-nav-link-primary[b-pmbs8mhouu] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.legal-nav-link-primary:hover[b-pmbs8mhouu] {
    background-color: var(--primary);
    opacity: 0.9;
    color: var(--primary-foreground);
}

/* ===== MAIN CONTENT ===== */
.legal-main[b-pmbs8mhouu] {
    flex: 1;
    padding: 48px 24px;
}

.legal-container[b-pmbs8mhouu] {
    max-width: 720px;
    margin: 0 auto;
}

.legal-title-section[b-pmbs8mhouu] {
    margin-bottom: 48px;
}

.legal-title-section h1[b-pmbs8mhouu] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

.legal-subtitle[b-pmbs8mhouu] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== CONTENT ===== */
.legal-content[b-pmbs8mhouu] {
    color: var(--foreground);
    line-height: 1.75;
}

.legal-content section[b-pmbs8mhouu] {
    margin-bottom: 40px;
}

.legal-content h2[b-pmbs8mhouu] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.legal-content h3[b-pmbs8mhouu] {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 24px 0 12px 0;
}

.legal-content p[b-pmbs8mhouu] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 16px 0;
}

.legal-content ul[b-pmbs8mhouu] {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.legal-content li[b-pmbs8mhouu] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin-bottom: 8px;
    line-height: 1.6;
}

.legal-content li strong[b-pmbs8mhouu] {
    color: var(--foreground);
    font-weight: 500;
}

.legal-content a[b-pmbs8mhouu] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.legal-content a:hover[b-pmbs8mhouu] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===== CALLOUT ===== */
.legal-callout[b-pmbs8mhouu] {
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-size: 14px;
    color: var(--foreground);
}

.legal-callout a[b-pmbs8mhouu] {
    color: var(--primary);
}

/* ===== ACTIONS ===== */
.legal-actions[b-pmbs8mhouu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.legal-btn[b-pmbs8mhouu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}

.legal-btn-primary[b-pmbs8mhouu] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.legal-btn-primary:hover[b-pmbs8mhouu] {
    opacity: 0.9;
}

.legal-btn-outline[b-pmbs8mhouu] {
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}

.legal-btn-outline:hover[b-pmbs8mhouu] {
    background-color: var(--accent);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle-fixed[b-pmbs8mhouu] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.theme-toggle-fixed:hover[b-pmbs8mhouu] {
    transform: scale(1.1);
    opacity: 0.8;
}

.theme-toggle-fixed svg[b-pmbs8mhouu] {
    width: 24px;
    height: 24px;
    stroke: var(--muted-foreground);
}

.theme-toggle-fixed:hover svg[b-pmbs8mhouu] {
    stroke: var(--foreground);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .legal-header[b-pmbs8mhouu] {
        padding: 12px 16px;
    }

    .legal-brand-name[b-pmbs8mhouu] {
        display: none;
    }

    .legal-main[b-pmbs8mhouu] {
        padding: 32px 16px;
    }

    .legal-title-section[b-pmbs8mhouu] {
        margin-bottom: 32px;
    }

    .legal-title-section h1[b-pmbs8mhouu] {
        font-size: 24px;
    }

    .legal-content h2[b-pmbs8mhouu] {
        font-size: 16px;
    }

    .legal-actions[b-pmbs8mhouu] {
        flex-direction: column;
    }

    .legal-btn[b-pmbs8mhouu] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .legal-nav-link:not(.legal-nav-link-primary)[b-pmbs8mhouu] {
        display: none;
    }

    .theme-toggle-fixed[b-pmbs8mhouu] {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .theme-toggle-fixed svg[b-pmbs8mhouu] {
        width: 22px;
        height: 22px;
    }
}
/* /Pages/Legal/Terms.razor.rz.scp.css */
/* =============================================
   LEGAL PAGES - shadcn/ui style
   Clean, minimal design with theme support
   ============================================= */

/* ===== PAGE LAYOUT ===== */
.legal-page[b-d1xyv99tg7] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--foreground);
}

/* ===== HEADER ===== */
.legal-header[b-d1xyv99tg7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-brand[b-d1xyv99tg7] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
}

.legal-brand:hover[b-d1xyv99tg7] {
    text-decoration: none;
    color: var(--foreground);
}

.legal-logo[b-d1xyv99tg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
}

.legal-logo svg[b-d1xyv99tg7] {
    width: 20px;
    height: 20px;
}

.legal-brand-name[b-d1xyv99tg7] {
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -0.025em;
}

.legal-nav[b-d1xyv99tg7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-nav-link[b-d1xyv99tg7] {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.15s;
}

.legal-nav-link:hover[b-d1xyv99tg7] {
    color: var(--foreground);
    background-color: var(--accent);
}

.legal-nav-link-primary[b-d1xyv99tg7] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.legal-nav-link-primary:hover[b-d1xyv99tg7] {
    background-color: var(--primary);
    opacity: 0.9;
    color: var(--primary-foreground);
}

/* ===== MAIN CONTENT ===== */
.legal-main[b-d1xyv99tg7] {
    flex: 1;
    padding: 48px 24px;
}

.legal-container[b-d1xyv99tg7] {
    max-width: 720px;
    margin: 0 auto;
}

.legal-title-section[b-d1xyv99tg7] {
    margin-bottom: 48px;
}

.legal-title-section h1[b-d1xyv99tg7] {
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

.legal-subtitle[b-d1xyv99tg7] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== CONTENT ===== */
.legal-content[b-d1xyv99tg7] {
    color: var(--foreground);
    line-height: 1.75;
}

.legal-content section[b-d1xyv99tg7] {
    margin-bottom: 40px;
}

.legal-content h2[b-d1xyv99tg7] {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.legal-content h3[b-d1xyv99tg7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 24px 0 12px 0;
}

.legal-content p[b-d1xyv99tg7] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 16px 0;
}

.legal-content ul[b-d1xyv99tg7] {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.legal-content li[b-d1xyv99tg7] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin-bottom: 8px;
    line-height: 1.6;
}

.legal-content li strong[b-d1xyv99tg7] {
    color: var(--foreground);
    font-weight: 500;
}

.legal-content a[b-d1xyv99tg7] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.legal-content a:hover[b-d1xyv99tg7] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===== CALLOUT ===== */
.legal-callout[b-d1xyv99tg7] {
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-size: 14px;
    color: var(--foreground);
}

.legal-callout a[b-d1xyv99tg7] {
    color: var(--primary);
}

/* ===== ACTIONS ===== */
.legal-actions[b-d1xyv99tg7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.legal-btn[b-d1xyv99tg7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}

.legal-btn-primary[b-d1xyv99tg7] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.legal-btn-primary:hover[b-d1xyv99tg7] {
    opacity: 0.9;
}

.legal-btn-outline[b-d1xyv99tg7] {
    background-color: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}

.legal-btn-outline:hover[b-d1xyv99tg7] {
    background-color: var(--accent);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle-fixed[b-d1xyv99tg7] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.theme-toggle-fixed:hover[b-d1xyv99tg7] {
    transform: scale(1.1);
    opacity: 0.8;
}

.theme-toggle-fixed svg[b-d1xyv99tg7] {
    width: 24px;
    height: 24px;
    stroke: var(--muted-foreground);
}

.theme-toggle-fixed:hover svg[b-d1xyv99tg7] {
    stroke: var(--foreground);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .legal-header[b-d1xyv99tg7] {
        padding: 12px 16px;
    }

    .legal-brand-name[b-d1xyv99tg7] {
        display: none;
    }

    .legal-main[b-d1xyv99tg7] {
        padding: 32px 16px;
    }

    .legal-title-section[b-d1xyv99tg7] {
        margin-bottom: 32px;
    }

    .legal-title-section h1[b-d1xyv99tg7] {
        font-size: 24px;
    }

    .legal-content h2[b-d1xyv99tg7] {
        font-size: 16px;
    }

    .legal-actions[b-d1xyv99tg7] {
        flex-direction: column;
    }

    .legal-btn[b-d1xyv99tg7] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .legal-nav-link:not(.legal-nav-link-primary)[b-d1xyv99tg7] {
        display: none;
    }

    .theme-toggle-fixed[b-d1xyv99tg7] {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .theme-toggle-fixed svg[b-d1xyv99tg7] {
        width: 22px;
        height: 22px;
    }
}
/* /Pages/Patient/Join.razor.rz.scp.css */
/* =============================================
   JOIN PAGE - shadcn/ui Style
   ============================================= */

.join-container[b-tqdhk5mun0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: 16px;
}

/* ===== CARD PRINCIPAL ===== */
.join-card[b-tqdhk5mun0] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 420px;
    width: 100%;
    overflow: hidden;
}

[data-theme="dark"] .join-card[b-tqdhk5mun0] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ===== HEADER ===== */
.join-header[b-tqdhk5mun0] {
    text-align: center;
    padding: 32px 32px 24px;
    background-color: var(--accent);
    border-bottom: 1px solid var(--border);
}

.join-icon[b-tqdhk5mun0] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.join-header h1[b-tqdhk5mun0] {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.join-header p[b-tqdhk5mun0] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

/* ===== FORM ===== */
.join-form[b-tqdhk5mun0] {
    padding: 32px;
}

.form-group[b-tqdhk5mun0] {
    margin-bottom: 24px;
}

.form-label[b-tqdhk5mun0] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 8px;
}

.form-control[b-tqdhk5mun0] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--foreground);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

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

.form-control[b-tqdhk5mun0]::placeholder {
    color: var(--muted-foreground);
}

.form-control:disabled[b-tqdhk5mun0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-hint[b-tqdhk5mun0] {
    display: block;
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: 6px;
}

/* ===== JOIN CODE INPUT ===== */
.join-code-input[b-tqdhk5mun0] {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

.join-code-input[b-tqdhk5mun0]::placeholder {
    letter-spacing: 0.25rem;
    font-weight: 400;
}

/* ===== BUTTONS ===== */
.btn-primary[b-tqdhk5mun0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-primary:hover:not(:disabled)[b-tqdhk5mun0] {
    opacity: 0.9;
}

.btn-primary:disabled[b-tqdhk5mun0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.w-100[b-tqdhk5mun0] {
    width: 100%;
}

/* ===== SPINNER ===== */
.spinner[b-tqdhk5mun0] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-tqdhk5mun0 0.8s linear infinite;
}

.spinner-small[b-tqdhk5mun0] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-tqdhk5mun0 0.8s linear infinite;
}

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

/* ===== ALERTS ===== */
.alert[b-tqdhk5mun0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.alert-danger[b-tqdhk5mun0] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .alert-danger[b-tqdhk5mun0] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-danger svg[b-tqdhk5mun0] {
    color: var(--error-500, #ef4444);
    flex-shrink: 0;
}

.alert-danger span[b-tqdhk5mun0] {
    font-size: 14px;
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .alert-danger span[b-tqdhk5mun0] {
    color: #fca5a5;
}

/* ===== STEREO BADGE ===== */
.stereo-badge[b-tqdhk5mun0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-700, #15803d);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

[data-theme="dark"] .stereo-badge[b-tqdhk5mun0] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.stereo-badge svg[b-tqdhk5mun0] {
    color: var(--success-500, #22c55e);
}

/* ===== FOOTER ===== */
.join-footer[b-tqdhk5mun0] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 32px 20px;
    background-color: var(--accent);
    border-top: 1px solid var(--border);
}

.connection-indicator[b-tqdhk5mun0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.connection-indicator.connecting[b-tqdhk5mun0] {
    color: var(--warning-500, #eab308);
}

.connection-indicator svg[b-tqdhk5mun0] {
    flex-shrink: 0;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .join-card[b-tqdhk5mun0] {
        max-width: 380px;
    }

    .join-header[b-tqdhk5mun0] {
        padding: 28px 24px 20px;
    }

    .join-icon svg[b-tqdhk5mun0] {
        width: 56px;
        height: 56px;
    }

    .join-header h1[b-tqdhk5mun0] {
        font-size: 20px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .join-container[b-tqdhk5mun0] {
        padding: 12px;
    }

    .join-card[b-tqdhk5mun0] {
        border-radius: 12px;
    }

    .join-header[b-tqdhk5mun0] {
        padding: 24px 20px 16px;
    }

    .join-icon svg[b-tqdhk5mun0] {
        width: 48px;
        height: 48px;
    }

    .join-header h1[b-tqdhk5mun0] {
        font-size: 18px;
    }

    .join-header p[b-tqdhk5mun0] {
        font-size: 13px;
    }

    .join-form[b-tqdhk5mun0] {
        padding: 20px;
    }

    .form-group[b-tqdhk5mun0] {
        margin-bottom: 20px;
    }

    .form-control[b-tqdhk5mun0] {
        height: 44px;
        font-size: 14px;
    }

    .join-code-input[b-tqdhk5mun0] {
        font-size: 20px;
        letter-spacing: 0.3rem;
    }

    .btn-primary[b-tqdhk5mun0] {
        height: 48px;
        font-size: 14px;
    }

    .stereo-badge[b-tqdhk5mun0] {
        font-size: 13px;
        padding: 10px 14px;
    }

    .join-footer[b-tqdhk5mun0] {
        padding: 12px 20px 16px;
        font-size: 12px;
    }
}
/* /Pages/Patient/JoinByLink.razor.rz.scp.css */
/* =============================================
   JOIN BY LINK PAGE - shadcn/ui Style
   ============================================= */

.join-container[b-rklpbwejst] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: 16px;
}

/* ===== CARD PRINCIPAL ===== */
.join-card[b-rklpbwejst] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 420px;
    width: 100%;
    overflow: hidden;
}

[data-theme="dark"] .join-card[b-rklpbwejst] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ===== HEADER ===== */
.join-header[b-rklpbwejst] {
    text-align: center;
    padding: 32px 32px 24px;
    background-color: var(--accent);
    border-bottom: 1px solid var(--border);
}

.join-header.success[b-rklpbwejst] {
    background-color: rgba(34, 197, 94, 0.1);
}

[data-theme="dark"] .join-header.success[b-rklpbwejst] {
    background-color: rgba(34, 197, 94, 0.15);
}

.join-header.error[b-rklpbwejst] {
    background-color: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .join-header.error[b-rklpbwejst] {
    background-color: rgba(239, 68, 68, 0.15);
}

.join-icon[b-rklpbwejst] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.join-header.success .join-icon[b-rklpbwejst] {
    color: var(--success-500, #22c55e);
}

.join-header.error .join-icon[b-rklpbwejst] {
    color: var(--error-500, #ef4444);
}

.join-header h1[b-rklpbwejst] {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.join-header.success h1[b-rklpbwejst] {
    color: var(--success-700, #15803d);
}

[data-theme="dark"] .join-header.success h1[b-rklpbwejst] {
    color: #86efac;
}

.join-header.error h1[b-rklpbwejst] {
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .join-header.error h1[b-rklpbwejst] {
    color: #fca5a5;
}

.join-header p[b-rklpbwejst] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

/* ===== SPINNER LARGE ===== */
.spinner-large[b-rklpbwejst] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-rklpbwejst 0.8s linear infinite;
}

/* ===== FORM ===== */
.join-form[b-rklpbwejst] {
    padding: 32px;
}

.form-group[b-rklpbwejst] {
    margin-bottom: 24px;
}

.form-label[b-rklpbwejst] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 8px;
}

.form-control[b-rklpbwejst] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--foreground);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

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

.form-control[b-rklpbwejst]::placeholder {
    color: var(--muted-foreground);
}

.form-control:disabled[b-rklpbwejst] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== SESSION INFO ===== */
.session-info[b-rklpbwejst] {
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.info-item[b-rklpbwejst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.info-item:not(:last-child)[b-rklpbwejst] {
    border-bottom: 1px solid var(--border);
}

.info-label[b-rklpbwejst] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.info-value[b-rklpbwejst] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.info-value.code[b-rklpbwejst] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    color: var(--primary);
    font-size: 16px;
    letter-spacing: 0.1rem;
}

/* ===== ERROR REASONS ===== */
.error-reasons[b-rklpbwejst] {
    margin-bottom: 24px;
}

.error-reasons-title[b-rklpbwejst] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin-bottom: 12px;
    text-align: center;
}

.error-list[b-rklpbwejst] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-list li[b-rklpbwejst] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.error-list li:last-child[b-rklpbwejst] {
    border-bottom: none;
}

.error-list li[b-rklpbwejst]::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--muted-foreground);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.btn-primary[b-rklpbwejst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}

.btn-primary:hover:not(:disabled)[b-rklpbwejst] {
    opacity: 0.9;
    text-decoration: none;
}

.btn-primary:disabled[b-rklpbwejst] {
    opacity: 0.5;
    cursor: not-allowed;
}

.w-100[b-rklpbwejst] {
    width: 100%;
}

/* ===== SPINNER ===== */
.spinner[b-rklpbwejst] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-rklpbwejst 0.8s linear infinite;
}

.spinner-small[b-rklpbwejst] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-rklpbwejst 0.8s linear infinite;
}

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

/* ===== ALERTS ===== */
.alert[b-rklpbwejst] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.alert-danger[b-rklpbwejst] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .alert-danger[b-rklpbwejst] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-danger svg[b-rklpbwejst] {
    color: var(--error-500, #ef4444);
    flex-shrink: 0;
}

.alert-danger span[b-rklpbwejst] {
    font-size: 14px;
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .alert-danger span[b-rklpbwejst] {
    color: #fca5a5;
}

/* ===== STEREO BADGE ===== */
.stereo-badge[b-rklpbwejst] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-700, #15803d);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

[data-theme="dark"] .stereo-badge[b-rklpbwejst] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.stereo-badge svg[b-rklpbwejst] {
    color: var(--success-500, #22c55e);
}

/* ===== FOOTER ===== */
.join-footer[b-rklpbwejst] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 32px 20px;
    background-color: var(--accent);
    border-top: 1px solid var(--border);
}

.connection-indicator[b-rklpbwejst] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.connection-indicator.connecting[b-rklpbwejst] {
    color: var(--warning-500, #eab308);
}

.connection-indicator svg[b-rklpbwejst] {
    flex-shrink: 0;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .join-card[b-rklpbwejst] {
        max-width: 380px;
    }

    .join-header[b-rklpbwejst] {
        padding: 28px 24px 20px;
    }

    .join-icon svg[b-rklpbwejst] {
        width: 56px;
        height: 56px;
    }

    .spinner-large[b-rklpbwejst] {
        width: 40px;
        height: 40px;
    }

    .join-header h1[b-rklpbwejst] {
        font-size: 20px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .join-container[b-rklpbwejst] {
        padding: 12px;
    }

    .join-card[b-rklpbwejst] {
        border-radius: 12px;
    }

    .join-header[b-rklpbwejst] {
        padding: 24px 20px 16px;
    }

    .join-icon svg[b-rklpbwejst] {
        width: 48px;
        height: 48px;
    }

    .spinner-large[b-rklpbwejst] {
        width: 36px;
        height: 36px;
    }

    .join-header h1[b-rklpbwejst] {
        font-size: 18px;
    }

    .join-header p[b-rklpbwejst] {
        font-size: 13px;
    }

    .join-form[b-rklpbwejst] {
        padding: 20px;
    }

    .form-group[b-rklpbwejst] {
        margin-bottom: 20px;
    }

    .form-control[b-rklpbwejst] {
        height: 44px;
        font-size: 14px;
    }

    .btn-primary[b-rklpbwejst] {
        height: 48px;
        font-size: 14px;
    }

    .session-info[b-rklpbwejst] {
        padding: 12px;
    }

    .info-item[b-rklpbwejst] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .stereo-badge[b-rklpbwejst] {
        font-size: 13px;
        padding: 10px 14px;
    }

    .join-footer[b-rklpbwejst] {
        padding: 12px 20px 16px;
        font-size: 12px;
    }
}
/* /Pages/Patient/PatientAccess.razor.rz.scp.css */
/* =============================================
   PATIENT ACCESS PAGE - shadcn/ui Style
   ============================================= */

.patient-access-container[b-mgkagb75q4] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: 16px;
}

/* ===== CARD PRINCIPAL ===== */
.patient-access-card[b-mgkagb75q4] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 440px;
    width: 100%;
    overflow: hidden;
}

[data-theme="dark"] .patient-access-card[b-mgkagb75q4] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ===== HEADER ===== */
.access-header[b-mgkagb75q4] {
    text-align: center;
    padding: 32px 32px 24px;
    background-color: var(--accent);
    border-bottom: 1px solid var(--border);
}

.access-header.success[b-mgkagb75q4] {
    background-color: rgba(34, 197, 94, 0.1);
}

[data-theme="dark"] .access-header.success[b-mgkagb75q4] {
    background-color: rgba(34, 197, 94, 0.15);
}

.access-header.error[b-mgkagb75q4] {
    background-color: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .access-header.error[b-mgkagb75q4] {
    background-color: rgba(239, 68, 68, 0.15);
}

.access-icon[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.access-header.success .access-icon[b-mgkagb75q4] {
    color: var(--success-500, #22c55e);
}

.access-header.error .access-icon[b-mgkagb75q4] {
    color: var(--error-500, #ef4444);
}

.access-header h1[b-mgkagb75q4] {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.access-header.success h1[b-mgkagb75q4] {
    color: var(--success-700, #15803d);
}

[data-theme="dark"] .access-header.success h1[b-mgkagb75q4] {
    color: #86efac;
}

.access-header.error h1[b-mgkagb75q4] {
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .access-header.error h1[b-mgkagb75q4] {
    color: #fca5a5;
}

.access-header p[b-mgkagb75q4] {
    font-size: 16px;
    color: var(--foreground);
    font-weight: 500;
    margin: 0;
}

.access-header.success p[b-mgkagb75q4],
.access-header.error p[b-mgkagb75q4] {
    color: var(--muted-foreground);
    font-size: 14px;
    font-weight: 400;
}

/* ===== SPINNER LARGE ===== */
.spinner-large[b-mgkagb75q4] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-mgkagb75q4 0.8s linear infinite;
}

/* ===== CONTENT ===== */
.access-content[b-mgkagb75q4] {
    padding: 24px 32px 32px;
}

/* ===== PATIENT INFO ===== */
.patient-info[b-mgkagb75q4] {
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.info-item[b-mgkagb75q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.info-item:not(:last-child)[b-mgkagb75q4] {
    border-bottom: 1px solid var(--border);
}

.info-label[b-mgkagb75q4] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.info-value[b-mgkagb75q4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

/* ===== SESSIONS SECTION ===== */
.sessions-section[b-mgkagb75q4] {
    margin-bottom: 24px;
}

.sessions-section h3[b-mgkagb75q4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 12px;
}

.sessions-list[b-mgkagb75q4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-item[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.session-item:hover[b-mgkagb75q4] {
    border-color: var(--primary);
    background-color: rgba(139, 92, 246, 0.05);
}

.session-icon[b-mgkagb75q4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 10px;
    flex-shrink: 0;
}

.session-details[b-mgkagb75q4] {
    flex: 1;
    min-width: 0;
}

.session-title[b-mgkagb75q4] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-owner[b-mgkagb75q4] {
    display: block;
    font-size: 12px;
    color: var(--muted-foreground);
}

.session-action[b-mgkagb75q4] {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.session-item:hover .session-action[b-mgkagb75q4] {
    color: var(--primary);
}

/* ===== NO SESSIONS ===== */
.no-sessions[b-mgkagb75q4] {
    text-align: center;
    padding: 24px 16px;
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 24px;
}

.no-sessions-icon[b-mgkagb75q4] {
    color: var(--muted-foreground);
    opacity: 0.5;
    margin-bottom: 12px;
}

.no-sessions h4[b-mgkagb75q4] {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 4px 0;
}

.no-sessions p[b-mgkagb75q4] {
    font-size: 13px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== DIVIDER ===== */
.divider[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.divider[b-mgkagb75q4]::before,
.divider[b-mgkagb75q4]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.divider span[b-mgkagb75q4] {
    font-size: 13px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== MANUAL JOIN ===== */
.manual-join[b-mgkagb75q4] {
    margin-bottom: 0;
}

.form-label[b-mgkagb75q4] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 8px;
}

.code-input-group[b-mgkagb75q4] {
    display: flex;
    gap: 8px;
}

.form-control[b-mgkagb75q4] {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--foreground);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-control.code-input[b-mgkagb75q4] {
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.form-control:focus[b-mgkagb75q4] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-control[b-mgkagb75q4]::placeholder {
    color: var(--muted-foreground);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.form-control:disabled[b-mgkagb75q4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== ERROR REASONS ===== */
.error-reasons[b-mgkagb75q4] {
    margin-bottom: 24px;
}

.error-reasons-title[b-mgkagb75q4] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin-bottom: 12px;
    text-align: center;
}

.error-list[b-mgkagb75q4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-list li[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.error-list li:last-child[b-mgkagb75q4] {
    border-bottom: none;
}

.error-list li[b-mgkagb75q4]::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--muted-foreground);
    border-radius: 50%;
    flex-shrink: 0;
}

.contact-info[b-mgkagb75q4] {
    text-align: center;
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    padding: 16px;
    background-color: var(--accent);
    border-radius: 10px;
}

/* ===== BUTTONS ===== */
.btn-primary[b-mgkagb75q4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
    flex-shrink: 0;
}

.btn-primary:hover:not(:disabled)[b-mgkagb75q4] {
    opacity: 0.9;
    text-decoration: none;
}

.btn-primary:disabled[b-mgkagb75q4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== SPINNER ===== */
.spinner[b-mgkagb75q4] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-mgkagb75q4 0.8s linear infinite;
}

.spinner-small[b-mgkagb75q4] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-mgkagb75q4 0.8s linear infinite;
}

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

/* ===== ALERTS ===== */
.alert[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.alert-danger[b-mgkagb75q4] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .alert-danger[b-mgkagb75q4] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-danger svg[b-mgkagb75q4] {
    color: var(--error-500, #ef4444);
    flex-shrink: 0;
}

.alert-danger span[b-mgkagb75q4] {
    font-size: 14px;
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .alert-danger span[b-mgkagb75q4] {
    color: #fca5a5;
}

/* ===== STEREO BADGE ===== */
.stereo-badge[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-700, #15803d);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

[data-theme="dark"] .stereo-badge[b-mgkagb75q4] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.stereo-badge svg[b-mgkagb75q4] {
    color: var(--success-500, #22c55e);
}

/* ===== FOOTER ===== */
.access-footer[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 32px 20px;
    background-color: var(--accent);
    border-top: 1px solid var(--border);
}

.connection-indicator[b-mgkagb75q4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.connection-indicator.connecting[b-mgkagb75q4] {
    color: var(--warning-500, #eab308);
}

.connection-indicator svg[b-mgkagb75q4] {
    flex-shrink: 0;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .patient-access-card[b-mgkagb75q4] {
        max-width: 400px;
    }

    .access-header[b-mgkagb75q4] {
        padding: 28px 24px 20px;
    }

    .access-icon svg[b-mgkagb75q4] {
        width: 56px;
        height: 56px;
    }

    .spinner-large[b-mgkagb75q4] {
        width: 40px;
        height: 40px;
    }

    .access-header h1[b-mgkagb75q4] {
        font-size: 20px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .patient-access-container[b-mgkagb75q4] {
        padding: 12px;
    }

    .patient-access-card[b-mgkagb75q4] {
        border-radius: 12px;
    }

    .access-header[b-mgkagb75q4] {
        padding: 24px 20px 16px;
    }

    .access-icon svg[b-mgkagb75q4] {
        width: 48px;
        height: 48px;
    }

    .spinner-large[b-mgkagb75q4] {
        width: 36px;
        height: 36px;
    }

    .access-header h1[b-mgkagb75q4] {
        font-size: 18px;
    }

    .access-header p[b-mgkagb75q4] {
        font-size: 14px;
    }

    .access-content[b-mgkagb75q4] {
        padding: 20px;
    }

    .patient-info[b-mgkagb75q4] {
        padding: 12px;
    }

    .info-item[b-mgkagb75q4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .session-item[b-mgkagb75q4] {
        padding: 10px 12px;
    }

    .session-icon[b-mgkagb75q4] {
        width: 36px;
        height: 36px;
    }

    .code-input-group[b-mgkagb75q4] {
        flex-direction: column;
    }

    .btn-primary[b-mgkagb75q4] {
        width: 100%;
        height: 44px;
        font-size: 14px;
    }

    .form-control[b-mgkagb75q4] {
        height: 44px;
        font-size: 14px;
    }

    .stereo-badge[b-mgkagb75q4] {
        font-size: 13px;
        padding: 10px 14px;
    }

    .access-footer[b-mgkagb75q4] {
        padding: 12px 20px 16px;
        font-size: 12px;
    }
}
/* /Pages/Patient/Session.razor.rz.scp.css */
/* =============================================
   SESSION PAGE - shadcn/ui Style
   ============================================= */

.session-container[b-k94tc24uiq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: 16px;
}

/* ===== SESSION CARD ===== */
.session-card[b-k94tc24uiq] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 480px;
    width: 100%;
    overflow: hidden;
}

[data-theme="dark"] .session-card[b-k94tc24uiq] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

.session-card.session-active[b-k94tc24uiq] {
    max-width: 500px;
}

/* ===== SESSION HEADER ===== */
.session-header[b-k94tc24uiq] {
    text-align: center;
    padding: 32px 32px 24px;
    background-color: var(--accent);
    border-bottom: 1px solid var(--border);
}

.session-header.error[b-k94tc24uiq] {
    background-color: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .session-header.error[b-k94tc24uiq] {
    background-color: rgba(239, 68, 68, 0.15);
}

.session-header.warning[b-k94tc24uiq] {
    background-color: rgba(234, 179, 8, 0.1);
}

[data-theme="dark"] .session-header.warning[b-k94tc24uiq] {
    background-color: rgba(234, 179, 8, 0.15);
}

/* ===== SESSION ICON ===== */
.session-icon[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.session-header.error .session-icon[b-k94tc24uiq] {
    color: var(--error-500, #ef4444);
}

.session-header.warning .session-icon[b-k94tc24uiq] {
    color: var(--warning-500, #eab308);
}

.session-icon.pulse[b-k94tc24uiq] {
    animation: pulse-b-k94tc24uiq 2s ease-in-out infinite;
}

.session-icon.playing[b-k94tc24uiq] {
    animation: bounce-b-k94tc24uiq 0.5s ease-in-out infinite;
    color: var(--success-500, #22c55e);
}

.session-icon.loading[b-k94tc24uiq] {
    animation: spin-b-k94tc24uiq 1s linear infinite;
}

.session-icon.scheduled[b-k94tc24uiq] {
    animation: pulse-b-k94tc24uiq 1.5s ease-in-out infinite;
}

@keyframes pulse-b-k94tc24uiq {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes bounce-b-k94tc24uiq {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

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

/* ===== HEADER TITLE ===== */
.session-header h1[b-k94tc24uiq] {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.session-header.error h1[b-k94tc24uiq] {
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .session-header.error h1[b-k94tc24uiq] {
    color: #fca5a5;
}

.session-header.warning h1[b-k94tc24uiq] {
    color: var(--warning-700, #a16207);
}

[data-theme="dark"] .session-header.warning h1[b-k94tc24uiq] {
    color: #fcd34d;
}

.session-header p[b-k94tc24uiq] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

/* ===== STEREO REMINDER ===== */
.stereo-reminder[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    font-size: 13px;
    color: var(--primary);
}

[data-theme="dark"] .stereo-reminder[b-k94tc24uiq] {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.stereo-reminder svg[b-k94tc24uiq] {
    flex-shrink: 0;
}

/* ===== CONNECTION BADGE ===== */
.connection-badge[b-k94tc24uiq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}

.connection-badge.connected[b-k94tc24uiq] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-700, #15803d);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.connection-badge.connected svg[b-k94tc24uiq] {
    color: var(--success-500, #22c55e);
}

[data-theme="dark"] .connection-badge.connected[b-k94tc24uiq] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.connection-badge.disconnected[b-k94tc24uiq] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-700, #b91c1c);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.connection-badge.disconnected svg[b-k94tc24uiq] {
    color: var(--error-500, #ef4444);
}

[data-theme="dark"] .connection-badge.disconnected[b-k94tc24uiq] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== SESSION BODY ===== */
.session-body[b-k94tc24uiq] {
    padding: 32px;
}

.text-center[b-k94tc24uiq] {
    text-align: center;
}

/* ===== SESSION INFO ===== */
.session-info[b-k94tc24uiq] {
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.info-item[b-k94tc24uiq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.info-item:not(:last-child)[b-k94tc24uiq] {
    border-bottom: 1px solid var(--border);
}

.info-label[b-k94tc24uiq] {
    font-size: 13px;
    color: var(--muted-foreground);
}

.info-value[b-k94tc24uiq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.status-badge[b-k94tc24uiq] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.success[b-k94tc24uiq] {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-700, #15803d);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .status-badge.success[b-k94tc24uiq] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

/* ===== MONO WARNING ===== */
.mono-warning[b-k94tc24uiq] {
    display: flex;
    gap: 16px;
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

[data-theme="dark"] .mono-warning[b-k94tc24uiq] {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

.mono-warning svg[b-k94tc24uiq] {
    color: var(--warning-500, #eab308);
    flex-shrink: 0;
    margin-top: 2px;
}

.mono-warning-text[b-k94tc24uiq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mono-warning-text strong[b-k94tc24uiq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.mono-warning-text span[b-k94tc24uiq] {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

/* ===== AUDIO NOTICE ===== */
.audio-notice[b-k94tc24uiq] {
    display: flex;
    gap: 16px;
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

[data-theme="dark"] .audio-notice[b-k94tc24uiq] {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.audio-notice svg[b-k94tc24uiq] {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.audio-notice-text[b-k94tc24uiq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-notice-text strong[b-k94tc24uiq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.audio-notice-text span[b-k94tc24uiq] {
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

/* ===== BUTTONS ===== */
.btn-primary[b-k94tc24uiq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}

.btn-primary:hover:not(:disabled)[b-k94tc24uiq] {
    opacity: 0.9;
    text-decoration: none;
}

.btn-primary:disabled[b-k94tc24uiq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-activate[b-k94tc24uiq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    background-color: var(--success-500, #22c55e);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-activate:hover[b-k94tc24uiq] {
    opacity: 0.9;
}

.btn-leave[b-k94tc24uiq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background-color: transparent;
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.btn-leave:hover[b-k94tc24uiq] {
    color: var(--error-500, #ef4444);
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.w-100[b-k94tc24uiq] {
    width: 100%;
}

/* ===== SPINNERS ===== */
.spinner-large[b-k94tc24uiq] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-k94tc24uiq 0.8s linear infinite;
}

.spinner-medium[b-k94tc24uiq] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-k94tc24uiq 0.8s linear infinite;
}

/* ===== AUDIO STATUS ===== */
.audio-status[b-k94tc24uiq] {
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.2s;
}

.audio-status.state-playing[b-k94tc24uiq] {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .audio-status.state-playing[b-k94tc24uiq] {
    background-color: rgba(34, 197, 94, 0.15);
}

.audio-status.state-loading[b-k94tc24uiq] {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .audio-status.state-loading[b-k94tc24uiq] {
    background-color: rgba(59, 130, 246, 0.15);
}

.audio-status.state-paused[b-k94tc24uiq] {
    background-color: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.3);
}

[data-theme="dark"] .audio-status.state-paused[b-k94tc24uiq] {
    background-color: rgba(234, 179, 8, 0.15);
}

.audio-status.state-scheduled[b-k94tc24uiq] {
    background-color: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .audio-status.state-scheduled[b-k94tc24uiq] {
    background-color: rgba(139, 92, 246, 0.15);
}

.audio-status.state-error[b-k94tc24uiq] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .audio-status.state-error[b-k94tc24uiq] {
    background-color: rgba(239, 68, 68, 0.15);
}

/* ===== STATUS CONTENT ===== */
.status-content[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-content svg[b-k94tc24uiq] {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.state-playing .status-content svg[b-k94tc24uiq] {
    color: var(--success-500, #22c55e);
}

.state-loading .status-content svg[b-k94tc24uiq] {
    color: var(--primary);
}

.state-paused .status-content svg[b-k94tc24uiq] {
    color: var(--warning-500, #eab308);
}

.state-scheduled .status-content svg[b-k94tc24uiq] {
    color: #8b5cf6;
}

.state-error .status-content svg[b-k94tc24uiq] {
    color: var(--error-500, #ef4444);
}

.status-text[b-k94tc24uiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-label[b-k94tc24uiq] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
}

.status-description[b-k94tc24uiq] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

/* ===== EQUALIZER ===== */
.equalizer[b-k94tc24uiq] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 32px;
}

.equalizer span[b-k94tc24uiq] {
    width: 4px;
    background-color: var(--success-500, #22c55e);
    border-radius: 2px;
    animation: equalize-b-k94tc24uiq 0.8s ease-in-out infinite;
}

.equalizer span:nth-child(1)[b-k94tc24uiq] { animation-delay: 0s; height: 60%; }
.equalizer span:nth-child(2)[b-k94tc24uiq] { animation-delay: 0.1s; height: 80%; }
.equalizer span:nth-child(3)[b-k94tc24uiq] { animation-delay: 0.2s; height: 100%; }
.equalizer span:nth-child(4)[b-k94tc24uiq] { animation-delay: 0.3s; height: 70%; }
.equalizer span:nth-child(5)[b-k94tc24uiq] { animation-delay: 0.4s; height: 50%; }

@keyframes equalize-b-k94tc24uiq {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

/* ===== EVENT LOG ===== */
.event-log[b-k94tc24uiq] {
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.event-log.collapsed[b-k94tc24uiq] {
    background-color: transparent;
}

.event-log-header[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--muted-foreground);
    transition: background 0.15s;
}

.event-log-header:hover[b-k94tc24uiq] {
    background-color: var(--accent);
}

.event-log-header svg[b-k94tc24uiq] {
    flex-shrink: 0;
}

.event-log.expanded .event-log-header[b-k94tc24uiq] {
    border-bottom: 1px solid var(--border);
}

.header-title[b-k94tc24uiq] {
    flex: 1;
    text-align: left;
    font-weight: 500;
    color: var(--foreground);
}

.header-badge[b-k94tc24uiq] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.event-log.expanded .header-badge[b-k94tc24uiq] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.header-arrow[b-k94tc24uiq] {
    transition: transform 0.2s;
}

.header-arrow.open[b-k94tc24uiq] {
    transform: rotate(180deg);
}

.events[b-k94tc24uiq] {
    max-height: 150px;
    overflow-y: auto;
    padding: 12px 16px;
}

.event[b-k94tc24uiq] {
    display: flex;
    gap: 10px;
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.event:last-child[b-k94tc24uiq] {
    border-bottom: none;
}

.event .time[b-k94tc24uiq] {
    color: var(--muted-foreground);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    white-space: nowrap;
}

.event .message[b-k94tc24uiq] {
    color: var(--foreground);
}

.event.success .message[b-k94tc24uiq] {
    color: var(--success-600, #16a34a);
}

[data-theme="dark"] .event.success .message[b-k94tc24uiq] {
    color: #86efac;
}

.event.error .message[b-k94tc24uiq] {
    color: var(--error-600, #dc2626);
}

[data-theme="dark"] .event.error .message[b-k94tc24uiq] {
    color: #fca5a5;
}

.event.warning .message[b-k94tc24uiq] {
    color: var(--warning-600, #ca8a04);
}

[data-theme="dark"] .event.warning .message[b-k94tc24uiq] {
    color: #fcd34d;
}

/* ===== SESSION FOOTER ===== */
.session-footer[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px 20px;
    border-top: 1px solid var(--border);
    background-color: var(--accent);
}

/* ===== EXPIRING TOAST ===== */
.expiring-toast[b-k94tc24uiq] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    animation: slideDown-b-k94tc24uiq 0.3s ease;
}

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

.expiring-toast-content[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: var(--warning-500, #eab308);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.4);
    color: white;
    max-width: 350px;
}

.expiring-toast-content svg[b-k94tc24uiq] {
    flex-shrink: 0;
    animation: pulse-b-k94tc24uiq 1s ease-in-out infinite;
}

.expiring-text[b-k94tc24uiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.expiring-text strong[b-k94tc24uiq] {
    font-size: 14px;
}

.expiring-text span[b-k94tc24uiq] {
    font-size: 13px;
    opacity: 0.9;
}

.btn-dismiss[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.btn-dismiss:hover[b-k94tc24uiq] {
    background-color: rgba(255, 255, 255, 0.3);
}

.btn-dismiss svg[b-k94tc24uiq] {
    color: white;
    animation: none;
}

/* ===== MODAL ===== */
.modal-backdrop[b-k94tc24uiq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

[data-theme="dark"] .modal-backdrop[b-k94tc24uiq] {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-container[b-k94tc24uiq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 16px;
}

.expired-modal[b-k94tc24uiq] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .expired-modal[b-k94tc24uiq] {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.expired-icon[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--muted-foreground);
}

.expired-modal h4[b-k94tc24uiq] {
    font-size: 20px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 12px;
}

.expired-message[b-k94tc24uiq] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin-bottom: 8px;
}

.expired-reason[b-k94tc24uiq] {
    font-size: 13px;
    color: var(--muted-foreground);
    margin-bottom: 24px;
}

/* ===== RESPONSE SECTION ===== */
.response-section[b-k94tc24uiq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.response-header[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--foreground);
    font-size: 16px;
    font-weight: 600;
}

.response-header svg[b-k94tc24uiq] {
    color: var(--primary);
}

.response-buttons[b-k94tc24uiq] {
    display: flex;
    gap: 16px;
}

.response-btn[b-k94tc24uiq] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 64px;
    padding: 0 24px;
    background-color: var(--background);
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--foreground);
    cursor: pointer;
    transition: all 0.2s;
}

.response-btn:hover:not(:disabled)[b-k94tc24uiq] {
    border-color: var(--primary);
    background-color: rgba(139, 92, 246, 0.05);
}

.response-btn:disabled[b-k94tc24uiq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.response-btn.selected[b-k94tc24uiq] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.response-btn.left svg[b-k94tc24uiq] {
    order: -1;
}

.response-btn.right svg[b-k94tc24uiq] {
    order: 1;
}

.submitting-indicator[b-k94tc24uiq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted-foreground);
}

.spinner-small[b-k94tc24uiq] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-k94tc24uiq 0.8s linear infinite;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .session-card[b-k94tc24uiq] {
        max-width: 440px;
    }

    .session-header[b-k94tc24uiq] {
        padding: 28px 24px 20px;
    }

    .session-icon svg[b-k94tc24uiq] {
        width: 56px !important;
        height: 56px !important;
    }

    .spinner-large[b-k94tc24uiq] {
        width: 40px;
        height: 40px;
    }

    .session-header h1[b-k94tc24uiq] {
        font-size: 20px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .session-container[b-k94tc24uiq] {
        padding: 12px;
    }

    .session-card[b-k94tc24uiq] {
        border-radius: 12px;
    }

    .session-header[b-k94tc24uiq] {
        padding: 24px 20px 16px;
    }

    .session-icon svg[b-k94tc24uiq] {
        width: 48px !important;
        height: 48px !important;
    }

    .spinner-large[b-k94tc24uiq] {
        width: 36px;
        height: 36px;
    }

    .session-header h1[b-k94tc24uiq] {
        font-size: 18px;
    }

    .session-header p[b-k94tc24uiq] {
        font-size: 13px;
    }

    .session-body[b-k94tc24uiq] {
        padding: 20px;
    }

    .stereo-reminder[b-k94tc24uiq] {
        font-size: 12px;
        padding: 8px 12px;
    }

    .mono-warning[b-k94tc24uiq],
    .audio-notice[b-k94tc24uiq] {
        padding: 12px;
        gap: 12px;
    }

    .mono-warning-text strong[b-k94tc24uiq],
    .audio-notice-text strong[b-k94tc24uiq] {
        font-size: 13px;
    }

    .mono-warning-text span[b-k94tc24uiq],
    .audio-notice-text span[b-k94tc24uiq] {
        font-size: 12px;
    }

    .btn-primary[b-k94tc24uiq],
    .btn-activate[b-k94tc24uiq] {
        height: 48px;
        font-size: 14px;
    }

    .session-info[b-k94tc24uiq] {
        padding: 12px;
    }

    .info-item[b-k94tc24uiq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .audio-status[b-k94tc24uiq] {
        padding: 20px;
    }

    .status-content[b-k94tc24uiq] {
        gap: 12px;
    }

    .status-content svg[b-k94tc24uiq] {
        width: 28px;
        height: 28px;
    }

    .spinner-medium[b-k94tc24uiq] {
        width: 28px;
        height: 28px;
    }

    .equalizer[b-k94tc24uiq] {
        height: 28px;
    }

    .equalizer span[b-k94tc24uiq] {
        width: 3px;
    }

    .event-log-header[b-k94tc24uiq] {
        padding: 10px 14px;
        font-size: 12px;
    }

    .events[b-k94tc24uiq] {
        max-height: 120px;
        padding: 10px 14px;
    }

    .event[b-k94tc24uiq] {
        font-size: 11px;
    }

    .session-footer[b-k94tc24uiq] {
        padding: 12px 20px 16px;
    }

    .expiring-toast[b-k94tc24uiq] {
        left: 12px;
        right: 12px;
        transform: none;
    }

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

    .expiring-toast-content[b-k94tc24uiq] {
        max-width: 100%;
    }

    .expired-modal[b-k94tc24uiq] {
        padding: 24px;
    }

    .expired-modal h4[b-k94tc24uiq] {
        font-size: 18px;
    }

    .response-buttons[b-k94tc24uiq] {
        gap: 12px;
    }

    .response-btn[b-k94tc24uiq] {
        height: 56px;
        font-size: 14px;
        padding: 0 16px;
    }

    .response-header[b-k94tc24uiq] {
        font-size: 14px;
    }
}
/* /Pages/Patient/StereoCheck.razor.rz.scp.css */
/* =============================================
   STEREO CHECK PAGE - shadcn/ui Style
   ============================================= */

.stereo-container[b-w98ykmr6sw] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding: 16px;
}

/* ===== CARD PRINCIPAL ===== */
.stereo-card[b-w98ykmr6sw] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 480px;
    width: 100%;
    overflow: hidden;
}

[data-theme="dark"] .stereo-card[b-w98ykmr6sw] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ===== HEADER ===== */
.stereo-header[b-w98ykmr6sw] {
    text-align: center;
    padding: 32px 32px 24px;
    background-color: var(--accent);
    border-bottom: 1px solid var(--border);
}

.stereo-header.success[b-w98ykmr6sw] {
    background-color: rgba(34, 197, 94, 0.1);
}

[data-theme="dark"] .stereo-header.success[b-w98ykmr6sw] {
    background-color: rgba(34, 197, 94, 0.15);
}

.stereo-icon[b-w98ykmr6sw] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.stereo-header.success .stereo-icon[b-w98ykmr6sw] {
    color: var(--success-500, #22c55e);
}

.stereo-header h1[b-w98ykmr6sw] {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.stereo-header p[b-w98ykmr6sw] {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

/* ===== BODY ===== */
.stereo-body[b-w98ykmr6sw] {
    padding: 32px;
}

/* ===== INSTRUCTION BOX ===== */
.instruction-box[b-w98ykmr6sw] {
    display: flex;
    gap: 16px;
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    align-items: flex-start;
}

[data-theme="dark"] .instruction-box[b-w98ykmr6sw] {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.instruction-icon[b-w98ykmr6sw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 10px;
    flex-shrink: 0;
}

.instruction-text strong[b-w98ykmr6sw] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 4px;
}

.instruction-text p[b-w98ykmr6sw] {
    margin: 0;
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

/* ===== WARNING BOX ===== */
.warning-box[b-w98ykmr6sw] {
    display: flex;
    gap: 12px;
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}

[data-theme="dark"] .warning-box[b-w98ykmr6sw] {
    background-color: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

.warning-box svg[b-w98ykmr6sw] {
    color: var(--warning-500, #eab308);
    flex-shrink: 0;
    margin-top: 2px;
}

.warning-box p[b-w98ykmr6sw] {
    margin: 0;
    font-size: 13px;
    color: var(--muted-foreground);
    line-height: 1.5;
}

.warning-box p strong[b-w98ykmr6sw] {
    color: var(--warning-700, #a16207);
}

[data-theme="dark"] .warning-box p strong[b-w98ykmr6sw] {
    color: #fcd34d;
}

/* ===== BUTTONS ===== */
.btn-primary[b-w98ykmr6sw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-primary:hover:not(:disabled)[b-w98ykmr6sw] {
    opacity: 0.9;
}

.btn-primary:disabled[b-w98ykmr6sw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-lg[b-w98ykmr6sw] {
    height: 52px;
    font-size: 16px;
}

.w-100[b-w98ykmr6sw] {
    width: 100%;
}

/* ===== SPINNER ===== */
.spinner[b-w98ykmr6sw] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-w98ykmr6sw 0.8s linear infinite;
}

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

/* ===== ALERT ===== */
.alert[b-w98ykmr6sw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 16px;
}

.alert-danger[b-w98ykmr6sw] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .alert-danger[b-w98ykmr6sw] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-danger svg[b-w98ykmr6sw] {
    color: var(--error-500, #ef4444);
    flex-shrink: 0;
}

.alert-danger span[b-w98ykmr6sw] {
    font-size: 14px;
    color: var(--error-700, #b91c1c);
}

[data-theme="dark"] .alert-danger span[b-w98ykmr6sw] {
    color: #fca5a5;
}

/* ===== TEST BUTTONS ===== */
.test-buttons[b-w98ykmr6sw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.btn-test[b-w98ykmr6sw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 8px;
    border-radius: 12px;
    border: 2px solid;
    background-color: var(--card);
    transition: all 0.15s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.btn-test:disabled[b-w98ykmr6sw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-test .btn-label[b-w98ykmr6sw] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Left Button */
.btn-test.btn-left[b-w98ykmr6sw] {
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-test.btn-left:hover:not(:disabled)[b-w98ykmr6sw],
.btn-test.btn-left.playing[b-w98ykmr6sw] {
    background-color: #3b82f6;
    color: white;
}

/* Both Button */
.btn-test.btn-both[b-w98ykmr6sw] {
    border-color: #a855f7;
    color: #a855f7;
}

.btn-test.btn-both:hover:not(:disabled)[b-w98ykmr6sw],
.btn-test.btn-both.playing[b-w98ykmr6sw] {
    background-color: #a855f7;
    color: white;
}

/* Right Button */
.btn-test.btn-right[b-w98ykmr6sw] {
    border-color: #ef4444;
    color: #ef4444;
}

.btn-test.btn-right:hover:not(:disabled)[b-w98ykmr6sw],
.btn-test.btn-right.playing[b-w98ykmr6sw] {
    background-color: #ef4444;
    color: white;
}

/* ===== SOUND WAVE ===== */
.sound-wave[b-w98ykmr6sw] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.sound-wave[b-w98ykmr6sw]::before,
.sound-wave[b-w98ykmr6sw]::after,
.sound-wave span[b-w98ykmr6sw] {
    content: '';
    width: 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    animation: wave-b-w98ykmr6sw 0.5s ease-in-out infinite;
}

.sound-wave[b-w98ykmr6sw]::before { height: 60%; animation-delay: 0s; }
.sound-wave[b-w98ykmr6sw]::after { height: 100%; animation-delay: 0.1s; }

@keyframes wave-b-w98ykmr6sw {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

/* ===== CONFIRMATIONS ===== */
.confirmations[b-w98ykmr6sw] {
    margin-bottom: 24px;
}

.confirmations h6[b-w98ykmr6sw] {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    margin-bottom: 16px;
    text-align: center;
}

.confirmation-item[b-w98ykmr6sw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.confirmation-item:hover[b-w98ykmr6sw] {
    background-color: var(--muted);
}

.confirmation-item.confirmed[b-w98ykmr6sw] {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .confirmation-item.confirmed[b-w98ykmr6sw] {
    background-color: rgba(34, 197, 94, 0.15);
}

.confirmation-item input[type="checkbox"][b-w98ykmr6sw] {
    display: none;
}

.checkbox-custom[b-w98ykmr6sw] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    background-color: var(--card);
}

.confirmation-item.confirmed .checkbox-custom[b-w98ykmr6sw] {
    background-color: var(--success-500, #22c55e);
    border-color: var(--success-500, #22c55e);
    color: white;
}

.confirmation-text[b-w98ykmr6sw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--foreground);
}

.confirmation-text svg[b-w98ykmr6sw] {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.confirmation-item.confirmed .confirmation-text[b-w98ykmr6sw] {
    color: var(--success-700, #15803d);
}

[data-theme="dark"] .confirmation-item.confirmed .confirmation-text[b-w98ykmr6sw] {
    color: #86efac;
}

/* ===== CONTINUE BUTTON ===== */
.btn-continue[b-w98ykmr6sw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.btn-continue:disabled[b-w98ykmr6sw] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-continue:not(:disabled)[b-w98ykmr6sw] {
    background-color: var(--success-500, #22c55e);
    color: white;
}

.btn-continue:not(:disabled):hover[b-w98ykmr6sw] {
    opacity: 0.9;
}

/* ===== FOOTER ===== */
.stereo-footer[b-w98ykmr6sw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 16px 32px 20px;
    background-color: var(--accent);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted-foreground);
}

.stereo-footer svg[b-w98ykmr6sw] {
    flex-shrink: 0;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
    .stereo-card[b-w98ykmr6sw] {
        max-width: 440px;
    }

    .stereo-header[b-w98ykmr6sw] {
        padding: 28px 24px 20px;
    }

    .stereo-icon svg[b-w98ykmr6sw] {
        width: 56px;
        height: 56px;
    }

    .stereo-header h1[b-w98ykmr6sw] {
        font-size: 20px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
    .stereo-container[b-w98ykmr6sw] {
        padding: 12px;
    }

    .stereo-card[b-w98ykmr6sw] {
        border-radius: 12px;
    }

    .stereo-header[b-w98ykmr6sw] {
        padding: 24px 20px 16px;
    }

    .stereo-icon svg[b-w98ykmr6sw] {
        width: 48px;
        height: 48px;
    }

    .stereo-header h1[b-w98ykmr6sw] {
        font-size: 18px;
    }

    .stereo-header p[b-w98ykmr6sw] {
        font-size: 13px;
    }

    .stereo-body[b-w98ykmr6sw] {
        padding: 20px;
    }

    .instruction-box[b-w98ykmr6sw] {
        padding: 16px;
        gap: 12px;
    }

    .instruction-icon[b-w98ykmr6sw] {
        width: 36px;
        height: 36px;
    }

    .instruction-icon svg[b-w98ykmr6sw] {
        width: 20px;
        height: 20px;
    }

    .instruction-text strong[b-w98ykmr6sw] {
        font-size: 13px;
    }

    .instruction-text p[b-w98ykmr6sw] {
        font-size: 12px;
    }

    .warning-box[b-w98ykmr6sw] {
        padding: 12px;
        gap: 10px;
    }

    .warning-box svg[b-w98ykmr6sw] {
        width: 18px;
        height: 18px;
    }

    .warning-box p[b-w98ykmr6sw] {
        font-size: 12px;
    }

    .test-buttons[b-w98ykmr6sw] {
        gap: 8px;
    }

    .btn-test[b-w98ykmr6sw] {
        padding: 16px 4px;
        min-height: 90px;
    }

    .btn-test svg[b-w98ykmr6sw] {
        width: 24px;
        height: 24px;
    }

    .btn-test .btn-label[b-w98ykmr6sw] {
        font-size: 9px;
    }

    .confirmations h6[b-w98ykmr6sw] {
        font-size: 12px;
    }

    .confirmation-item[b-w98ykmr6sw] {
        padding: 12px;
        gap: 10px;
    }

    .checkbox-custom[b-w98ykmr6sw] {
        width: 20px;
        height: 20px;
    }

    .confirmation-text[b-w98ykmr6sw] {
        font-size: 13px;
        gap: 6px;
    }

    .confirmation-text svg[b-w98ykmr6sw] {
        width: 14px;
        height: 14px;
    }

    .btn-continue[b-w98ykmr6sw] {
        height: 48px;
        font-size: 14px;
    }

    .stereo-footer[b-w98ykmr6sw] {
        padding: 12px 20px 16px;
        font-size: 11px;
    }
}
/* /Pages/Signup/RegisterClinic.razor.rz.scp.css */
/* =============================================
   AUTH PAGES - shadcn/ui style
   Split-screen layout with theme support
   ============================================= */

/* ===== CONTAINER - Split Screen ===== */
.auth-container[b-sx4p138210] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    width: 100%;
}

/* ===== LEFT PANEL - Dark Branding ===== */
.auth-panel-left[b-sx4p138210] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background-color: var(--card);
    color: var(--foreground);
}

.auth-brand[b-sx4p138210] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--foreground);
}

.auth-brand:hover[b-sx4p138210] {
    text-decoration: none;
    color: var(--foreground);
}

.auth-logo[b-sx4p138210] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
}

.auth-logo svg[b-sx4p138210] {
    width: 24px;
    height: 24px;
}

.auth-brand-name[b-sx4p138210] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.auth-testimonial[b-sx4p138210] {
    max-width: 480px;
}

.auth-testimonial blockquote[b-sx4p138210] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--foreground);
    margin: 0 0 24px 0;
    font-style: normal;
}

.auth-testimonial blockquote[b-sx4p138210]::before {
    content: '"';
}

.auth-testimonial blockquote[b-sx4p138210]::after {
    content: '"';
}

.auth-testimonial footer[b-sx4p138210] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author[b-sx4p138210] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.testimonial-role[b-sx4p138210] {
    font-size: 14px;
    color: var(--muted-foreground);
}

/* ===== RIGHT PANEL - Form Area ===== */
.auth-panel-right[b-sx4p138210] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--foreground);
    overflow-y: auto;
}

.auth-header-actions[b-sx4p138210] {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-header-link[b-sx4p138210] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background-color 0.15s;
}

.auth-header-link:hover[b-sx4p138210] {
    background-color: var(--accent);
    text-decoration: none;
}

/* ===== FORM CONTAINER ===== */
.auth-form-container[b-sx4p138210] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 48px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.auth-form-container-scroll[b-sx4p138210] {
    justify-content: flex-start;
    padding-top: 100px;
    padding-bottom: 48px;
    max-width: 520px;
}

.auth-form-header[b-sx4p138210] {
    text-align: center;
    margin-bottom: 40px;
}

.auth-title[b-sx4p138210] {
    font-size: 28px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 12px 0;
    letter-spacing: -0.025em;
}

.auth-subtitle[b-sx4p138210] {
    font-size: 16px;
    color: var(--muted-foreground);
    margin: 0;
}

/* ===== FORM ===== */
.auth-form[b-sx4p138210] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.auth-field-row[b-sx4p138210] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.auth-field[b-sx4p138210] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-field-row .auth-field[b-sx4p138210] {
    margin-bottom: 0;
}

.auth-label[b-sx4p138210] {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
}

.auth-input[b-sx4p138210] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--foreground);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    box-sizing: border-box;
}

[data-theme="dark"] .auth-input[b-sx4p138210] {
    background-color: var(--zinc-800);
    border-color: var(--zinc-700);
}

.auth-input[b-sx4p138210]::placeholder {
    color: var(--muted-foreground);
}

.auth-input:focus[b-sx4p138210] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 1px var(--ring);
}

[data-theme="dark"] .auth-input:focus[b-sx4p138210] {
    background-color: var(--zinc-900);
}

.auth-input:disabled[b-sx4p138210] {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-hint[b-sx4p138210] {
    font-size: 13px;
    color: var(--muted-foreground);
    margin-top: -12px;
    margin-bottom: 20px;
}

/* ===== CHECKBOX ===== */
.auth-checkbox-field[b-sx4p138210] {
    margin-top: 4px;
    margin-bottom: 20px;
}

.auth-checkbox-label[b-sx4p138210] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.auth-checkbox[b-sx4p138210] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-checkbox-text[b-sx4p138210] {
    font-size: 14px;
    color: var(--muted-foreground);
    line-height: 1.6;
}

.auth-checkbox-text a[b-sx4p138210] {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-checkbox-text a:hover[b-sx4p138210] {
    color: var(--muted-foreground);
}

/* ===== VALIDATION ===== */
[b-sx4p138210] .validation-message,
[b-sx4p138210] .auth-validation {
    font-size: 13px;
    color: #ef4444;
    margin-top: 6px;
}

/* ===== ALERT ===== */
.auth-alert[b-sx4p138210] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.auth-alert-error[b-sx4p138210] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.auth-alert-success[b-sx4p138210] {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.auth-alert-info[b-sx4p138210] {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.auth-alert svg[b-sx4p138210] {
    flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.auth-btn[b-sx4p138210] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
    margin-top: 8px;
}

.auth-btn:disabled[b-sx4p138210] {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-btn-primary[b-sx4p138210] {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.auth-btn-primary:hover:not(:disabled)[b-sx4p138210] {
    opacity: 0.9;
}

/* ===== SPINNER ===== */
.auth-spinner[b-sx4p138210] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--muted-foreground);
    border-top-color: var(--background);
    border-radius: 50%;
    animation: spin-b-sx4p138210 0.6s linear infinite;
}

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

/* ===== TERMS ===== */
.auth-terms[b-sx4p138210] {
    font-size: 13px;
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 32px;
    line-height: 1.6;
}

.auth-terms a[b-sx4p138210] {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-terms a:hover[b-sx4p138210] {
    color: var(--muted-foreground);
}

/* ===== FOOTER ===== */
.auth-footer[b-sx4p138210] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    padding-bottom: 32px;
    font-size: 14px;
    color: var(--muted-foreground);
}

.auth-link[b-sx4p138210] {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-link:hover[b-sx4p138210] {
    color: var(--muted-foreground);
}

/* ===== THEME TOGGLE - Fixed Bottom Right ===== */
.theme-toggle-fixed[b-sx4p138210] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.theme-toggle-fixed:hover[b-sx4p138210] {
    transform: scale(1.1);
    opacity: 0.8;
}

.theme-toggle-fixed svg[b-sx4p138210] {
    width: 24px;
    height: 24px;
    stroke: var(--muted-foreground);
}

.theme-toggle-fixed:hover svg[b-sx4p138210] {
    stroke: var(--foreground);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .auth-container[b-sx4p138210] {
        grid-template-columns: 1fr;
    }

    .auth-panel-left[b-sx4p138210] {
        display: none;
    }

    .auth-panel-right[b-sx4p138210] {
        min-height: 100vh;
    }
}

@media (max-width: 480px) {
    .auth-header-actions[b-sx4p138210] {
        top: 20px;
        right: 20px;
    }

    .auth-form-container[b-sx4p138210] {
        padding: 32px 24px;
    }

    .auth-form-container-scroll[b-sx4p138210] {
        padding-top: 80px;
    }

    .auth-title[b-sx4p138210] {
        font-size: 24px;
    }

    .auth-subtitle[b-sx4p138210] {
        font-size: 14px;
    }

    .auth-field-row[b-sx4p138210] {
        grid-template-columns: 1fr;
    }

    .theme-toggle-fixed[b-sx4p138210] {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .theme-toggle-fixed svg[b-sx4p138210] {
        width: 22px;
        height: 22px;
    }
}