/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: var(--border);
    outline-color: var(--ring);
}

:root {
    /* Base Font Size */
    --font-size: 16px;
    
    /* Core Colors */
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: #15803d;
    --primary-foreground: #ffffff;
    --secondary: oklch(0.95 0.0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --input: transparent;
    --input-background: #f3f3f5;
    --switch-background: #cbced4;
    --ring: oklch(0.708 0 0);
    
    /* Font Weights */
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    
    /* Chart Colors */
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    
    /* Border Radius */
    --radius: 0.625rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    
    /* Sidebar Colors */
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: #15803d;
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
    
    /* Legacy Variables - Mapped to New Design System */
    --primary-blue: #15803d;
    --primary-dark: #166534;
    --primary-light: #717182;
    --bg-main: var(--background);
    --bg-white: var(--background);
    --bg-card: var(--card);
    --bg-sidebar: var(--sidebar);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-white: var(--primary-foreground);
    --text-muted: var(--muted-foreground);
    
    /* Status Colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: var(--destructive);
    --info: var(--chart-2);
    
    /* Priority Colors */
    --priority-high: var(--destructive);
    --priority-medium: #f59e0b;
    --priority-low: var(--muted-foreground);
    
    /* Border Colors */
    --border-light: var(--border);
    --border-medium: var(--border);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Dark Mode */
.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: #15803d;
    --primary-foreground: #ffffff;
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    
    /* Dark Mode Chart Colors */
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    
    /* Dark Mode Sidebar */
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
    
    /* Dark Mode Legacy Variables */
    --bg-main: var(--background);
    --bg-white: var(--background);
    --bg-card: var(--card);
    --bg-sidebar: var(--sidebar);
    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-white: var(--foreground);
    --text-muted: var(--muted-foreground);
    --danger: var(--destructive);
    --border-light: var(--border);
    --border-medium: var(--border);
    
    /* Dark Mode Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

html {
    font-size: var(--font-size);
}

/* Tailwind-style Utility Classes for Productivity Tools */
.p-6 { padding: 1.5rem; }
.p-4 { padding: 1rem; }
.p-3 { padding: 0.75rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pr-10 { padding-right: 2.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-left { text-align: left; }
.font-bold { font-weight: 700; }
.text-gray-900 { color: #111827; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #4b5563; }
.text-gray-500 { color: #6b7280; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-green-50 { background-color: #f0fdf4; }
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-green-200 { border-color: #bbf7d0; }
.rounded-lg { border-radius: 0.5rem; }
.overflow-hidden { overflow: hidden; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:text-green-800:hover { color: #166534; }
.rotate-180 { transform: rotate(180deg); }
.relative { position: relative; }
.absolute { position: absolute; }
.right-2 { right: 0.5rem; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.placeholder-gray-500::placeholder { color: #6b7280; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.5); }
.focus\:ring-green-600:focus { --ring-color: #16a34a; }
.focus\:border-transparent:focus { border-color: transparent; }

/* Productivity Tools Panel Buttons */
.productivity-toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.productivity-toolbar .border.border-gray-200 > button:first-child {
    background-color: #ffffff;
}

.productivity-toolbar .border.border-gray-200 > button:first-child:hover {
    background-color: #f9fafb;
}

/* Suggestion buttons in productivity tools */
.productivity-toolbar .space-y-2 > button {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

.productivity-toolbar .space-y-2 > button:hover {
    background-color: #f9fafb;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Base */
h1 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--foreground);
}

h2 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--foreground);
}

h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--foreground);
}

h4 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--foreground);
}

p {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

label {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

button {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

input {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    background-color: var(--input-background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Container Layout */
.container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: 280px;
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-border);
}

.logo {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--sidebar-border);
}

.logo-img {
    width: 100%;
    max-width: 18px;
    height: auto;
}

.main-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    color: var(--sidebar-foreground);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-weight: var(--font-weight-medium);
}

.nav-item:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

.nav-item.active {
    background-color: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
}

.nav-icon {
    font-size: 1.25rem;
}

.role-switcher {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--sidebar-border);
}

.role-switcher label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.role-switcher select {
    width: 100%;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--sidebar-border);
    background-color: var(--sidebar-accent);
    color: var(--sidebar-foreground);
    font-size: 0.875rem;
    cursor: pointer;
}

.role-switcher select option {
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 280px;
    padding: var(--spacing-xl);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-name {
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-foreground);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--spacing-xl);
}

/* Card Styles */
.card {
    background-color: var(--card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.card h2 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-lg);
    color: var(--card-foreground);
}

.card h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md);
    color: var(--card-foreground);
}

/* Team Standing Styles */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-xl);
}

.standings-table thead {
    background-color: var(--muted);
}

.standings-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.standings-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
}

.standings-table .highlight-row {
    background-color: var(--accent);
    font-weight: var(--font-weight-medium);
}

.team-stats {
    display: flex;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--muted);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.stat-value.large {
    font-size: 2rem;
    color: var(--primary);
}

/* Injured Players */
.injured-players {
    margin-top: var(--spacing-lg);
}

.injury-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.injury-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--muted);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--destructive);
}

.injury-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.injury-type {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.health-index {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.health-value {
    font-weight: var(--font-weight-medium);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.health-value.warning {
    background-color: oklch(0.396 0.141 25.723 / 0.1);
    color: var(--destructive);
}

.health-value.caution {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

/* To-Do List Styles */
.todo-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--muted);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.todo-item.priority-high {
    border-left-color: var(--destructive);
}

.todo-item.priority-medium {
    border-left-color: var(--warning);
}

.todo-item.priority-low {
    border-left-color: var(--muted-foreground);
}

.todo-item input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.todo-item label {
    flex: 1;
    cursor: pointer;
}

.todo-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.todo-meta {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.priority {
    font-weight: var(--font-weight-medium);
}

.priority-high .priority {
    color: var(--destructive);
}

.priority-medium .priority {
    color: var(--warning);
}

.priority-low .priority {
    color: var(--muted-foreground);
}

/* Schedule Styles */
.schedule-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.schedule-item {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--muted);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.schedule-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.schedule-item.highlight {
    background: linear-gradient(135deg, var(--accent) 0%, var(--muted) 100%);
    border: 2px solid var(--primary);
}

.schedule-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: var(--spacing-md);
    background-color: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.date-month {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    text-transform: uppercase;
}

.date-day {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--foreground);
}

.schedule-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.schedule-details h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.schedule-meta {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.schedule-time {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Practice Insight Styles */
.practice-insight {
    grid-column: 1 / -1;
}

.recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.recommendation-item {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--muted);
    border-radius: var(--radius-lg);
}

.recommendation-number {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
}

.recommendation-content {
    flex: 1;
}

.recommendation-content h4 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
    color: var(--foreground);
}

.recommendation-content p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}

/* Productivity Tools */
.productivity-tools {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border);
}

.tool-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.tool-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tool-btn:hover {
    background-color: #166534;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Secondary Button Style */
.tool-btn.secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.tool-btn.secondary:hover {
    background-color: var(--accent);
}

/* Destructive Button Style */
.tool-btn.destructive {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
}

/* Chart Styles */
.chart-container {
    padding: var(--spacing-lg);
    background-color: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.chart-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.chart-bar-fill {
    height: 24px;
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}

.chart-bar-fill.bar-1 { background-color: var(--chart-1); }
.chart-bar-fill.bar-2 { background-color: var(--chart-2); }
.chart-bar-fill.bar-3 { background-color: var(--chart-3); }
.chart-bar-fill.bar-4 { background-color: var(--chart-4); }
.chart-bar-fill.bar-5 { background-color: var(--chart-5); }

.chart-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
}

.legend-color.color-1 { background-color: var(--chart-1); }
.legend-color.color-2 { background-color: var(--chart-2); }
.legend-color.color-3 { background-color: var(--chart-3); }
.legend-color.color-4 { background-color: var(--chart-4); }
.legend-color.color-5 { background-color: var(--chart-5); }

/* Theme Switcher */
.theme-switcher {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--sidebar-border);
}

.theme-switcher label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.theme-toggle-btn {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--sidebar-accent);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    background-color: var(--accent);
}

.theme-icon {
    font-size: 1.25rem;
}

/* Switch Component */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch-background);
    transition: 0.3s;
    border-radius: 24px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--background);
    transition: 0.3s;
    border-radius: 50%;
}

.switch input:checked + .switch-slider {
    background-color: var(--primary);
}

.switch input:checked + .switch-slider:before {
    transform: translateX(20px);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }
    
    .main-content {
        margin-left: 240px;
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
    }
    
    .main-content {
        margin-left: 0;
        padding: var(--spacing-md);
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .card {
        padding: var(--spacing-md);
    }
    
    .team-stats {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .tool-buttons {
        flex-direction: column;
    }
    
    .tool-btn {
        width: 100%;
    }
}

/* ========================================
   ROLE SWITCHER STYLES
   ======================================== */

.role-switcher {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
}

.role-switcher-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.role-switcher-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.role-switcher-buttons {
    display: flex;
    gap: 0.5rem;
}

.role-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.role-btn.inactive {
    background-color: #f3f4f6;
    color: #374151;
}

.role-btn.inactive:hover {
    background-color: #e5e7eb;
}

.role-btn.active {
    background-color: #15803d;
    color: white;
}

.role-btn svg {
    width: 1rem;
    height: 1rem;
}
@media (max-width: 768px) {
    .role-switcher-content {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .role-switcher-buttons {
        flex-wrap: wrap;
    }
    
    .role-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ========================================
   TRAINER VIEW STYLES
   ======================================== */

/* Trainer Layout */
.trainer-layout {
    min-height: 100vh;
    background-color: #f9fafb;
}

/* Trainer Header */
.trainer-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.trainer-header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trainer-logo {
    height: 4rem;
    background-color: var(--card);
}

.trainer-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.trainer-role-badge {
    padding: 0.25rem 0.75rem;
    background-color: #dcfce7;
    color: #166534;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

/* Trainer Navigation */
.trainer-nav {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.trainer-nav-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 0.25rem;
}

.trainer-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    color: var(--muted-foreground);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trainer-tab:hover {
    color: var(--foreground);
}

.trainer-tab.active {
    border-bottom-color: #15803d;
    color: #15803d;
}

/* Trainer Tab Content */
.trainer-tab-content {
    display: none;
}

.trainer-tab-content.active {
    display: block;
}

/* Trainer Main Content */
.trainer-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.trainer-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

/* Trainer Grid */
.trainer-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Trainer Card */
.trainer-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.trainer-card:last-child {
    margin-bottom: 0;
}

.trainer-card h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background-color: #15803d;
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quick-action-btn:hover {
    background-color: #166534;
}

.quick-action-btn i {
    font-size: 1.5rem;
}

/* Search Input */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-wrapper input::placeholder {
    color: var(--muted-foreground);
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

/* Search Results */
.search-results {
    margin-top: 1rem;
    max-height: 15rem;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.75rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: #f9fafb;
}

.search-result-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-weight: 700;
    color: var(--foreground);
}

.search-result-meta {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.no-results {
    text-align: center;
    padding: 1rem;
    color: var(--muted-foreground);
}

/* Health Badge */
.health-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.health-badge.good {
    background-color: #dcfce7;
    color: #15803d;
}

.health-badge.warning {
    background-color: #fef3c7;
    color: #b45309;
}

.health-badge.orange {
    background-color: #ffedd5;
    color: #c2410c;
}

.health-badge.critical {
    background-color: #fee2e2;
    color: #dc2626;
}

/* To-Do Check-in List */
.todo-checkin-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.todo-checkin-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.todo-checkin-item:hover {
    background-color: #f9fafb;
}

.todo-checkin-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}

.todo-checkin-content input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    accent-color: #15803d;
}

.todo-checkin-info {
    flex: 1;
}

.todo-checkin-info label {
    display: block;
    color: var(--foreground);
    cursor: pointer;
}

.todo-checkin-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}

.todo-checkin-time i {
    font-size: 0.75rem;
}

.priority-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.priority-tag.high {
    background-color: #fee2e2;
    color: #dc2626;
}

.priority-tag.medium {
    background-color: #fef3c7;
    color: #b45309;
}

.priority-tag.low {
    background-color: #dcfce7;
    color: #15803d;
}

/* Team Overview */
.team-overview-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-overview-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.team-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.team-overview-header h3 {
    font-weight: 700;
    color: var(--foreground);
}

.team-total {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.team-overview-injured {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.injured-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.injured-label i {
    color: #dc2626;
}

.injured-count {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.injured-count.high {
    background-color: #fee2e2;
    color: #dc2626;
}

.injured-count.medium {
    background-color: #fef3c7;
    color: #b45309;
}

/* Team Cards Grid */
.team-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.team-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.2s ease;
}

.team-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.team-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.team-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.team-card:hover .team-card-image img {
    transform: scale(1.05);
}

.team-card-content {
    padding: 1.5rem;
}

.team-card-content h3 {
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.team-card-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.stat-value {
    font-weight: 700;
    color: var(--foreground);
}

/* Back Button */
.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #15803d;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    margin-bottom: 1.5rem;
    padding: 0;
}

.back-btn:hover {
    color: #166534;
}

/* Athlete List */
.athlete-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.athlete-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.75rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.athlete-list-item:hover {
    background-color: #f9fafb;
}

.athlete-list-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.athlete-list-info {
    flex: 1;
}

.athlete-list-name {
    font-weight: 700;
    color: var(--foreground);
}

.athlete-list-position {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Schedule List */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.schedule-opponent {
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.schedule-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.schedule-datetime {
    color: var(--muted-foreground);
}

.location-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.location-badge.home {
    background-color: #dcfce7;
    color: #15803d;
}

.location-badge.away {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.location-badge.neutral {
    background-color: #f3e8ff;
    color: #7c3aed;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.hidden {
    display: none;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background-color: var(--card);
    border-radius: var(--radius-lg);
    max-width: 48rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background-color: var(--card);
    z-index: 10;
}

.modal-header h2 {
    font-weight: 700;
    color: var(--foreground);
}

.modal-close {
    background: none;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--foreground);
}

.modal-body {
    padding: 1.5rem;
}

/* Athlete Profile in Modal */
.athlete-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.athlete-profile-image {
    width: 8rem;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.athlete-profile-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.athlete-profile-info {
    flex: 1;
}

.athlete-profile-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.athlete-profile-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.health-badge-large {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.health-badge-large.good {
    background-color: #dcfce7;
    color: #15803d;
}

.health-badge-large.warning {
    background-color: #fef3c7;
    color: #b45309;
}

.health-badge-large.orange {
    background-color: #ffedd5;
    color: #c2410c;
}

.health-badge-large.critical {
    background-color: #fee2e2;
    color: #dc2626;
}

.btn-primary.full-width {
    width: 100%;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.profile-section {
    margin-bottom: 1.5rem;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section h3 {
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

/* Injury Records */
.injury-records {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.injury-record {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.injury-record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.injury-record-header .injury-name {
    font-weight: 700;
    color: var(--foreground);
}

.severity-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.severity-badge.minor {
    background-color: #fef3c7;
    color: #b45309;
}

.severity-badge.moderate {
    background-color: #ffedd5;
    color: #c2410c;
}

.injury-record-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.injury-date {
    color: var(--muted-foreground);
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.status-badge.recovering {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.status-badge.recovered {
    background-color: #dcfce7;
    color: #15803d;
}

/* Rehab Sessions */
.rehab-sessions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rehab-session {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.rehab-session-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.rehab-focus {
    color: var(--foreground);
}

.rehab-duration {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.rehab-date {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Forms Header */
.forms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.forms-header .trainer-page-title {
    margin-bottom: 0;
}

/* Forms Grid */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Trainer Responsive */
@media (max-width: 1024px) {
    .trainer-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .team-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .forms-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .trainer-nav-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .trainer-tab {
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }
    
    .athlete-profile-header {
        flex-direction: column;
    }
    
    .athlete-profile-image {
        width: 6rem;
        height: 6rem;
    }
}

@media (max-width: 480px) {
    .trainer-header-content {
        padding: 1rem;
    }
    
    .trainer-logo {
        height: 2.5rem;
    }
    
    .trainer-main {
        padding: 1rem;
    }
    
    .todo-checkin-item {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ========================================
   PRODUCTIVITY TOOLBAR STYLES
   ======================================== */

/* Toolbar Container */
.productivity-toolbar {
    width: 24rem;
    background-color: var(--card);
    border-left: 1px solid var(--border);
    height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.toolbar-header {
    padding: 1.5rem;
    background-color: var(--card);
}

.toolbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

.toolbar-content {
    padding: 1.5rem;
    padding-top: 0;
    flex: 1;
    overflow-y: auto;
}

.toolbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

/* Toolbar Panels - Using Accordion Pattern */
.toolbar-panels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toolbar-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--card);
}

.toolbar-panel-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
    outline: none;
}

.toolbar-panel-header:hover {
    background-color: #f9fafb;
}

.toolbar-panel-header:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(21, 128, 61, 0.3);
}

.toolbar-panel-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-panel-title i {
    font-size: 1.25rem;
    color: #15803d;
}

.toolbar-panel-title span {
    font-weight: 700;
    color: var(--foreground);
}

.toolbar-panel-header .chevron {
    color: var(--muted-foreground);
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.toolbar-panel.active .toolbar-panel-header .chevron {
    transform: rotate(180deg);
}

.toolbar-panel-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    background-color: #f9fafb;
}

.toolbar-panel.active .toolbar-panel-body {
    max-height: 500px;
    border-top: 1px solid var(--border);
}

.toolbar-panel-body-content {
    padding: 1rem;
}

/* AI Assistant Box */
.ai-assistant-box {
    padding: 1rem;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.ai-assistant-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ai-assistant-header i {
    font-size: 1.25rem;
    color: #15803d;
    margin-top: 0.125rem;
}

.ai-assistant-content {
    flex: 1;
}

.ai-assistant-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.ai-assistant-subtitle {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.75rem;
}

/* Suggestion Buttons */
.suggestion-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.suggestion-btn {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.suggestion-btn:hover {
    background-color: #f9fafb;
}

/* Info Cards */
.toolbar-info-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toolbar-info-card {
    padding: 0.75rem;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.toolbar-info-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-bottom: 0.25rem;
}

.toolbar-info-text {
    font-size: 0.875rem;
    color: var(--foreground);
}

.toolbar-info-card .question {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.toolbar-info-card .answer {
    color: #374151;
    line-height: 1.5;
}

/* AI Chat Input */
.ai-chat-input {
    position: relative;
    margin-bottom: 0.75rem;
}

.ai-chat-input input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-chat-input input::placeholder {
    color: var(--muted-foreground);
}

.ai-chat-input input:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

.ai-chat-send {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #15803d;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-send:hover {
    color: #166534;
}

/* Resources List */
.resources-card {
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.resources-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.resources-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #15803d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.resource-link:hover {
    color: #166534;
}

.resource-link i {
    font-size: 1rem;
}

/* Featured Article */
.featured-article {
    padding: 1rem;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.featured-article .resources-title {
    margin-bottom: 0.5rem;
}

.featured-article p {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.featured-article a {
    font-size: 0.875rem;
    color: #15803d;
    text-decoration: none;
}

.featured-article a:hover {
    color: #166534;
}

/* Video Library */
.video-library {
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.video-library .resources-title {
    margin-bottom: 0.5rem;
}

.video-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.video-list-item {
    font-size: 0.875rem;
    color: #374151;
}

/* Layout with Toolbar */
.layout-with-toolbar {
    display: flex;
    min-height: 100vh;
}

.layout-main-content {
    flex: 1;
    min-width: 0;
}

/* Toolbar Responsive */
@media (max-width: 1280px) {
    .productivity-toolbar {
        width: 20rem;
    }
}

@media (max-width: 1024px) {
    .productivity-toolbar {
        display: none;
    }
    
    .layout-with-toolbar {
        display: block;
    }
}

/* ========================================
   DOCTOR VIEW STYLES
   ======================================== */

/* Doctor Layout */
.doctor-layout {
    min-height: 100vh;
    background-color: #f9fafb;
}

/* Doctor Header */
.doctor-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.doctor-header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.doctor-logo {
    height: 4rem;
    background-color: var(--card);
}

.doctor-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.doctor-role-badge {
    padding: 0.25rem 0.75rem;
    background-color: #dcfce7;
    color: #166534;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

/* Doctor Navigation */
.doctor-nav {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.doctor-nav-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 0.25rem;
}

.doctor-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    color: var(--muted-foreground);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doctor-tab:hover {
    color: var(--foreground);
}

.doctor-tab.active {
    border-bottom-color: #15803d;
    color: #15803d;
}

/* Doctor Tab Content */
.doctor-tab-content {
    display: none;
}

.doctor-tab-content.active {
    display: block;
}

/* Doctor Main Content */
.doctor-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.doctor-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

/* Doctor Stats Grid */
.doctor-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.doctor-stat-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.doctor-stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.doctor-stat-card .stat-big-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--foreground);
}

/* Doctor Grid 2 Column */
.doctor-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Doctor Card */
.doctor-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.doctor-card h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

/* Consultation List */
.consultation-list {
    display: flex;
    flex-direction: column;
}

.consultation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.consultation-row.no-border {
    border-bottom: none;
}

.consultation-info {
    flex: 1;
}

.consultation-name {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.consultation-type {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.consultation-time {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Priority Cases */
.priority-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.priority-case {
    padding: 0.75rem;
    border-radius: var(--radius-md);
}

.priority-case.urgent {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
}

.priority-case.follow-up {
    background-color: #fefce8;
    border: 1px solid #fef08a;
}

.priority-case.scheduled {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}

.priority-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.priority-name {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.priority-tag {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

.priority-tag.urgent {
    background-color: #fecaca;
    color: #991b1b;
}

.priority-tag.follow-up {
    background-color: #fef08a;
    color: #92400e;
}

.priority-tag.scheduled {
    background-color: #bfdbfe;
    color: #1e40af;
}

.priority-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Patients Tab Styles */
.patients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.patients-header .doctor-page-title {
    margin-bottom: 0;
}

.patients-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Patient Card */
.patient-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.patient-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.patient-main-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.patient-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.patient-details {
    flex: 1;
}

.patient-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.patient-name-row h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
}

.separator {
    color: var(--muted-foreground);
}

.patient-position {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.health-index-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

.health-index-badge.critical {
    background-color: #fee2e2;
    color: #dc2626;
}

.health-index-badge.warning {
    background-color: #fef3c7;
    color: #b45309;
}

.health-index-badge.good {
    background-color: #dcfce7;
    color: #15803d;
}

.patient-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.patient-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.patient-status-badge.active {
    background-color: #dcfce7;
    color: #15803d;
}

.patient-status-badge.recovery {
    background-color: #fef3c7;
    color: #b45309;
}

.patient-status-badge.injured {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Patient Info Grid */
.patient-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-box {
    padding: 1rem;
    border-radius: var(--radius-md);
}

.info-box.blue {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}

.info-box.purple {
    background-color: #faf5ff;
    border: 1px solid #e9d5ff;
}

.info-box h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.condition-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.condition-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.condition-list li::before {
    content: "•";
    color: #3b82f6;
    margin-top: 0;
}

/* Injury History */
.injury-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.injury-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.injury-details {
    flex: 1;
}

.injury-name {
    font-size: 0.875rem;
    color: var(--foreground);
    display: block;
}

.injury-date {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.injury-status {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

.injury-status.current {
    background-color: #fee2e2;
    color: #dc2626;
}

.injury-status.improving {
    background-color: #fef3c7;
    color: #b45309;
}

.injury-status.recovered {
    background-color: #dcfce7;
    color: #15803d;
}

/* Ready to Play Section */
.ready-to-play-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.ready-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ready-status h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
}

.ready-badge {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 700;
}

.ready-badge.ready {
    background-color: #dcfce7;
    color: #15803d;
}

.ready-badge.not-ready {
    background-color: #fee2e2;
    color: #dc2626;
}

.ready-actions {
    display: flex;
    gap: 0.5rem;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #15803d;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #166534;
}

.btn-secondary {
    padding: 0.5rem 1rem;
    background-color: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: #15803d;
    color: white;
}

.btn-success {
    padding: 0.5rem 1rem;
    background-color: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-success.active {
    background-color: #15803d;
    color: white;
}

.btn-danger {
    padding: 0.5rem 1rem;
    background-color: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background-color: #dc2626;
    color: white;
}

.btn-danger.active {
    background-color: #dc2626;
    color: white;
}

.btn-outline {
    padding: 0.375rem 0.75rem;
    background: none;
    color: #15803d;
    border: 1px solid #15803d;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background-color: #f0fdf4;
}

/* Medical Records Tab */
.records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.records-header .doctor-page-title {
    margin-bottom: 0;
}

.records-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Record Card */
.record-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.record-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.record-info {
    flex: 1;
}

.record-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.record-name-row h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
}

.record-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.record-type {
    font-weight: 700;
}

/* Record Details Grid */
.record-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.record-box {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.record-box:last-child {
    margin-bottom: 0;
}

.record-box.full-width {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.record-box.gray {
    background-color: #f9fafb;
    border: 1px solid var(--border);
}

.record-box.blue {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}

.record-box.green {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.record-box.purple {
    background-color: #faf5ff;
    border: 1px solid #e9d5ff;
}

.record-box h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.record-box p {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

/* Vitals Grid */
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.875rem;
}

.vital-label {
    color: var(--muted-foreground);
}

/* Appointments Tab */
.appointments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.appointments-header .doctor-page-title {
    margin-bottom: 0;
}

.appointments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.appointment-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.appointment-row:hover {
    background-color: #f9fafb;
}

.appointment-time {
    min-width: 80px;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.appointment-info {
    flex: 1;
}

.appointment-patient {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.appointment-type {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}

.appointment-details {
    text-align: right;
}

.appointment-duration {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.25rem;
}

.appointment-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

.appointment-status.confirmed {
    background-color: #dcfce7;
    color: #15803d;
}

.appointment-status.pending {
    background-color: #fef3c7;
    color: #b45309;
}

/* Messages Tab */
.doctor-card.messages-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.messages-header {
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--border);
}

.messages-header h2 {
    margin-bottom: 0;
    font-weight: 700;
}

.conversations-list {
    display: flex;
    flex-direction: column;
}

.conversation-row {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.conversation-row:last-child {
    border-bottom: none;
}

.conversation-row:hover {
    background-color: #f9fafb;
}

.conversation-row.unread {
    background-color: #f0fdf4;
}

.conversation-avatar {
    width: 3rem;
    height: 3rem;
    background-color: #15803d;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.conversation-sender {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sender-name {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.conversation-row.unread .sender-name {
    font-weight: 700;
}

.sender-role {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.conversation-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conversation-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.unread-indicator {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #15803d;
    border-radius: 50%;
}

.conversation-topic {
    font-size: 0.875rem;
    color: #15803d;
    margin-bottom: 0.25rem;
}

.conversation-preview {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-row.unread .conversation-preview {
    font-weight: 700;
}

/* Compose Form */
.compose-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    color: #374151;
    font-weight: var(--font-weight-medium);
}

.form-group select,
.form-group input,
.form-group textarea {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--foreground);
    background-color: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

.form-group textarea {
    resize: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--muted-foreground);
}

/* Doctor Responsive */
@media (max-width: 1024px) {
    .doctor-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .doctor-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .patient-info-grid {
        grid-template-columns: 1fr;
    }
    
    .record-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .doctor-nav-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .doctor-tab {
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }
    
    .doctor-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .patient-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .patient-main-info {
        flex-direction: column;
        text-align: center;
    }
    
    .patient-name-row {
        justify-content: center;
    }
    
    .patient-meta {
        justify-content: center;
    }
    
    .ready-to-play-section {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .ready-status {
        flex-direction: column;
    }
    
    .ready-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .ready-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .doctor-header-content {
        padding: 1rem;
    }
    
    .doctor-logo {
        height: 2.5rem;
    }
    
    .doctor-main {
        padding: 1rem;
    }
    
    .appointment-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .appointment-time {
        min-width: auto;
    }
    
    .appointment-details {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* ========================================
   COACH VIEW STYLES
   ======================================== */

/* Coach Layout */
.coach-layout {
    min-height: 100vh;
    background-color: #f9fafb;
}

/* Coach Header */
.coach-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.coach-header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coach-logo {
    height: 4rem;
    background-color: var(--card);
}

.coach-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.coach-role-badge {
    padding: 0.25rem 0.75rem;
    background-color: #dcfce7;
    color: #166534;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

/* Coach Navigation */
.coach-nav {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.coach-nav-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 0.25rem;
}

.coach-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    color: var(--muted-foreground);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coach-tab:hover {
    color: var(--foreground);
}

.coach-tab.active {
    border-bottom-color: #15803d;
    color: #15803d;
}

/* Coach Main Content */
.coach-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.coach-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

/* Coach Grid */
.coach-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Coach Card */
.coach-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.coach-card.full-width {
    grid-column: 1 / -1;
}

.coach-card.table-card {
    padding: 0;
    overflow: hidden;
}

.coach-card h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

/* Coach Table */
.table-container {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
}

.coach-table {
    width: 100%;
    border-collapse: collapse;
}

.coach-table thead {
    background-color: #f9fafb;
}

.coach-table th {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
}

.coach-table td {
    padding: 0.75rem 1rem;
    color: var(--foreground);
    border-top: 1px solid var(--border);
}

.coach-table tbody tr:hover {
    background-color: #f9fafb;
}

.coach-table .highlight-row {
    background-color: #f0fdf4;
}

.coach-table .text-left {
    text-align: left;
}

.coach-table .text-center {
    text-align: center;
}

/* Stats Column */
.coach-stats-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.stat-big-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.stat-breakdown {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.stat-row span:first-child {
    color: var(--muted-foreground);
}

.stat-row span:last-child {
    color: var(--foreground);
}

/* Injury List */
.injury-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.injury-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.injury-row > span {
    color: var(--foreground);
    font-size: 0.875rem;
}

.health-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.health-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.health-badge.critical {
    background-color: #fee2e2;
    color: #dc2626;
}

.health-badge.warning {
    background-color: #fef3c7;
    color: #b45309;
}

.health-badge.good {
    background-color: #dcfce7;
    color: #15803d;
}

/* Todo List */
.todo-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.todo-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.todo-row:hover {
    background-color: #f9fafb;
}

.todo-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}

.todo-content input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    accent-color: #15803d;
}

.todo-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.todo-text label {
    color: var(--foreground);
    cursor: pointer;
}

.todo-due {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.priority-badge.high {
    background-color: #fee2e2;
    color: #dc2626;
}

.priority-badge.medium {
    background-color: #fef3c7;
    color: #b45309;
}

.priority-badge.low {
    background-color: #dcfce7;
    color: #15803d;
}

/* Schedule List */
.schedule-list {
    display: flex;
    flex-direction: column;
}

.schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.schedule-row.no-border {
    border-bottom: none;
}

.schedule-info {
    flex: 1;
}

.schedule-title {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.schedule-meta {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.schedule-time {
    font-size: 0.875rem;
    color: var(--foreground);
}

/* Practice Insight */
.insight-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.insight-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
}

.insight-number {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #15803d;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.insight-content {
    flex: 1;
}

.insight-title {
    color: var(--foreground);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
}

.insight-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
}

/* Roster Styles */
.roster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.roster-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

.roster-table {
    width: 100%;
}

.roster-table thead {
    background-color: #f9fafb;
    border-bottom: 1px solid var(--border);
}

.roster-table th {
    padding: 0.75rem 1.5rem;
    font-weight: 700;
}

.roster-table td {
    padding: 1rem 1.5rem;
}

.player-link {
    background: none;
    border: none;
    color: #15803d;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.player-link:hover {
    text-decoration: underline;
    color: #166534;
}

.team-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.team-badge.varsity {
    background-color: #dcfce7;
    color: #15803d;
}

.team-badge.jv {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 1.5rem 0 1rem;
}

/* Matches List */
.matches-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.match-card:hover {
    background-color: #f9fafb;
}

.match-info {
    flex: 1;
}

.match-title {
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.match-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.match-time {
    text-align: right;
}

.match-time > div:first-child {
    color: var(--foreground);
}

.time-small {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Player Profile */
.hidden {
    display: none !important;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #15803d;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    margin-bottom: 1.5rem;
    padding: 0;
}

.back-button:hover {
    color: #166534;
}

.player-header-card {
    margin-bottom: 1.5rem;
}

.player-header {
    display: flex;
    gap: 1.5rem;
}

.player-avatar-large {
    width: 8rem;
    height: 8rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.player-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-info {
    flex: 1;
}

.player-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.player-name-row h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.player-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.health-badge-large {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.health-badge-large.critical {
    background-color: #fee2e2;
    color: #dc2626;
}

.health-badge-large.warning {
    background-color: #fef3c7;
    color: #b45309;
}

.health-badge-large.good {
    background-color: #dcfce7;
    color: #15803d;
}

.player-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.player-stat-box {
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: var(--radius-md);
}

.player-stat-box .stat-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.25rem;
    font-weight: var(--font-weight-normal);
}

.player-stat-box .stat-value {
    font-weight: 700;
    color: var(--foreground);
}

/* Performance List */
.performance-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.performance-row {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.performance-info {
    flex: 1;
}

.opponent {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.match-date {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.score {
    margin-right: 1rem;
    color: var(--foreground);
}

.result-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.result-badge.win {
    background-color: #dcfce7;
    color: #15803d;
}

.result-badge.loss {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Injury History */
.injury-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.injury-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.injury-info {
    flex: 1;
}

.injury-name {
    color: var(--foreground);
}

.injury-date {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.injury-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.severity-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.severity-badge.minor {
    background-color: #fef3c7;
    color: #b45309;
}

.severity-badge.moderate {
    background-color: #fed7aa;
    color: #c2410c;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.status-badge.recovering {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.status-badge.recovered {
    background-color: #dcfce7;
    color: #15803d;
}

/* Forms Styles */
.forms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.forms-header .coach-page-title {
    margin-bottom: 0;
}

.forms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: box-shadow 0.2s ease;
}

.form-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.form-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.form-icon.green {
    background-color: #dcfce7;
}

.form-icon.blue {
    background-color: #dbeafe;
}

.form-icon.red {
    background-color: #fee2e2;
}

.form-icon.purple {
    background-color: #f3e8ff;
}

.form-icon.teal {
    background-color: #ccfbf1;
}

.form-icon.orange {
    background-color: #ffedd5;
}

.form-info {
    flex: 1;
}

.form-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.form-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.form-status {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

.form-status.active {
    background-color: #dcfce7;
    color: #15803d;
}

.form-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
}

.form-actions button {
    flex: 1;
}

/* Info Box */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
}

.info-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-content h4 {
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.25rem;
}

.info-content p {
    font-size: 0.875rem;
    color: #1e40af;
    line-height: 1.5;
}

/* Messages Card for Coach */
.coach-card.messages-card {
    padding: 0;
    overflow: hidden;
}

.messages-header {
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--border);
}

.messages-header h2 {
    margin-bottom: 0;
    font-weight: 700;
}

/* Coach Responsive */
@media (max-width: 1024px) {
    .coach-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .forms-grid {
        grid-template-columns: 1fr;
    }
    
    .player-stats-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .coach-nav-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .coach-tab {
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }
    
    .player-header {
        flex-direction: column;
    }
    
    .player-avatar-large {
        width: 6rem;
        height: 6rem;
    }
    
    .player-name-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .roster-table th,
    .roster-table td {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .coach-header-content {
        padding: 1rem;
    }
    
    .coach-logo {
        height: 2.5rem;
    }
    
    .coach-main {
        padding: 1rem;
    }
    
    .injury-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .todo-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .schedule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .match-card {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .match-time {
        text-align: left;
    }
}

/* ========================================
   ATHLETE VIEW STYLES
   ======================================== */

/* Athlete Color Variables */
:root {
    --athlete-primary: #15803d;
    --athlete-primary-dark: #166534;
    --athlete-primary-light: #22c55e;
    --athlete-primary-bg: #dcfce7;
    --athlete-primary-text: #14532d;
}

/* Athlete Layout */
.athlete-layout {
    min-height: 100vh;
    background-color: #f9fafb;
}

/* Athlete Header */
.athlete-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.athlete-header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.athlete-logo {
    height: 4rem;
    background-color: var(--card);
}

.athlete-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.athlete-portal-label {
    color: var(--muted-foreground);
}

.athlete-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--athlete-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-medium);
}

/* Athlete Navigation */
.athlete-nav {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.athlete-nav-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: 0.25rem;
}

.athlete-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    color: var(--muted-foreground);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.athlete-tab:hover {
    color: var(--foreground);
}

.athlete-tab.active {
    border-bottom-color: var(--athlete-primary);
    color: var(--athlete-primary);
}

.tab-icon {
    font-size: 1.25rem;
}

/* Athlete Main Content */
.athlete-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.athlete-page-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Athlete Stats Grid */
.athlete-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.athlete-stat-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.stat-card-header h3 {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: var(--font-weight-normal);
}

.stat-icon {
    font-size: 1.25rem;
}

.athlete-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.stat-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Athlete Card */
.athlete-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.athlete-card h2 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 1rem;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-title {
    color: var(--foreground);
    font-weight: var(--font-weight-normal);
}

.activity-time {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.activity-badge {
    padding: 0.25rem 0.75rem;
    background-color: var(--athlete-primary-bg);
    color: var(--athlete-primary);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

/* Matches List */
.matches-list,
.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-item,
.session-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: background-color 0.2s ease;
}

.match-item:hover,
.session-item:hover {
    background-color: var(--muted);
}

.match-date,
.session-date {
    text-align: center;
    min-width: 60px;
}

.date-num {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.date-day,
.date-time {
    display: block;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.match-details,
.session-details {
    flex: 1;
}

.match-title,
.session-title {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.match-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.session-location {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--athlete-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--athlete-primary-dark);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* Workouts Grid */
.workouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.workout-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.workout-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.workout-header h3 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.workout-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.status-badge.scheduled {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.status-badge.completed {
    background-color: var(--athlete-primary-bg);
    color: var(--athlete-primary);
}

/* Progress Grid */
.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--muted);
    border-radius: var(--radius-md);
}

.metric-name {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.metric-previous {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.metric-value {
    text-align: right;
}

.current-value {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.change-value {
    font-size: 0.875rem;
}

.change-value.positive {
    color: var(--athlete-primary);
}

/* Consistency */
.consistency-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.consistency-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.consistency-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.consistency-header span:last-child {
    color: var(--foreground);
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--athlete-primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Wellness Header */
.wellness-header,
.recovery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.wellness-header .athlete-page-title,
.recovery-header .athlete-page-title {
    margin-bottom: 0;
}

/* Wellness List */
.wellness-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wellness-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: background-color 0.2s ease;
}

.wellness-item:hover {
    background-color: var(--muted);
}

.wellness-date {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.wellness-notes {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.wellness-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wellness-stat {
    text-align: center;
}

.stat-num {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.quality-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.quality-badge.excellent {
    background-color: var(--athlete-primary-bg);
    color: var(--athlete-primary);
}

.quality-badge.good {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.quality-badge.fair {
    background-color: #fef3c7;
    color: #b45309;
}

/* Food Items */
.food-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: background-color 0.2s ease;
}

.food-item:hover {
    background-color: var(--muted);
}

.food-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.food-date {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.food-calories {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.food-macros {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.food-meals {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Lab Items */
.lab-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.lab-test {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.lab-meta {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.lab-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.lab-badge.normal {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.lab-badge.optimal {
    background-color: var(--athlete-primary-bg);
    color: var(--athlete-primary);
}

/* Exercise Items */
.exercise-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.exercise-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.exercise-type {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.exercise-date {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.intensity-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.75rem;
}

.intensity-badge.high {
    background-color: #fee2e2;
    color: #dc2626;
}

.intensity-badge.medium {
    background-color: #fef3c7;
    color: #b45309;
}

.intensity-badge.low {
    background-color: var(--athlete-primary-bg);
    color: var(--athlete-primary);
}

.exercise-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.exercise-notes {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.625rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #d1d5db;
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -1.375rem;
    top: 1.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 4px solid white;
}

.timeline-marker.active {
    background-color: var(--athlete-primary);
}

.timeline-marker.upcoming {
    background-color: #3b82f6;
}

.timeline-content {
    margin-left: 1.5rem;
}

/* Recovery Card */
.recovery-card {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.recovery-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.recovery-card-header h3 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.recovery-schedule {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.recovery-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.recovery-badge.fingers {
    background-color: var(--athlete-primary-bg);
    color: var(--athlete-primary);
}

.recovery-badge.knee {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.recovery-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.recovery-image img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.recovery-instructions h4 {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.recovery-instructions ul {
    list-style: none;
    padding: 0;
}

.recovery-instructions li {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    position: relative;
}

.recovery-instructions li::before {
    content: '•';
    position: absolute;
    left: 0;
}

.recovery-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.recovery-progress .progress-icon {
    font-size: 1rem;
}

.recovery-progress.upcoming {
    color: #3b82f6;
}

/* Messages */
.messages-card {
    padding: 0;
    overflow: hidden;
}

.messages-header {
    padding: 1rem 1.5rem;
    background-color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.messages-header h2 {
    margin-bottom: 0;
    font-weight: 700;
}

.conversations-list {
    display: flex;
    flex-direction: column;
}

.conversation-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.conversation-item:hover {
    background-color: var(--muted);
}

.conversation-item.unread {
    background-color: #f0fdf4;
}

.conversation-item:last-child {
    border-bottom: none;
}

.conversation-avatar {
    width: 3rem;
    height: 3rem;
    background-color: var(--athlete-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.conversation-sender {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sender-role {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.conversation-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conversation-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.unread-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--athlete-primary);
    border-radius: 50%;
}

.conversation-topic {
    font-size: 0.875rem;
    color: var(--athlete-primary);
    margin-bottom: 0.25rem;
}

.conversation-preview {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item.unread .conversation-preview {
    font-weight: var(--font-weight-medium);
}

/* Message Form */
.message-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
}

.form-select,
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--foreground);
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--athlete-primary);
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

.form-textarea {
    resize: none;
}

/* Athlete Responsive */
@media (max-width: 768px) {
    .athlete-nav-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .athlete-tab {
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }
    
    .athlete-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-grid {
        grid-template-columns: 1fr;
    }
    
    .recovery-details {
        grid-template-columns: 1fr;
    }
    
    .match-item,
    .session-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .match-item .btn-primary,
    .session-item .btn-primary {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .athlete-header-content {
        padding: 1rem;
    }
    
    .athlete-logo {
        height: 2.5rem;
    }
    
    .athlete-main {
        padding: 1rem;
    }
    
    .wellness-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .wellness-stats {
        width: 100%;
        justify-content: space-between;
    }
}

/* ========================================
   ACCORDION COMPONENT STYLES
   ======================================== */

/* Base Accordion */
.accordion {
    width: 100%;
}

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

.accordion-item:last-child {
    border-bottom: 0;
}

/* Accordion Trigger */
.accordion-trigger {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.accordion-trigger:hover {
    text-decoration: underline;
}

.accordion-trigger:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2);
}

.accordion-trigger:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.accordion-trigger .chevron-icon {
    color: var(--muted-foreground);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transform: translateY(0.125rem);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.accordion-item[data-state="open"] .accordion-trigger .chevron-icon,
.accordion-item.open .accordion-trigger .chevron-icon {
    transform: translateY(0.125rem) rotate(180deg);
}

/* Accordion Content */
.accordion-content {
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--foreground);
    transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}

.accordion-content[data-state="closed"],
.accordion-content.closed {
    max-height: 0;
    opacity: 0;
}

.accordion-content[data-state="open"],
.accordion-content.open {
    max-height: 1000px;
    opacity: 1;
}

.accordion-content-inner {
    padding: 0 0 1rem 0;
}

/* Accordion Animations */
@keyframes accordion-down {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: var(--radix-accordion-content-height, 1000px);
        opacity: 1;
    }
}

@keyframes accordion-up {
    from {
        max-height: var(--radix-accordion-content-height, 1000px);
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

.accordion-content.animate-accordion-down {
    animation: accordion-down 0.2s ease-out forwards;
}

.accordion-content.animate-accordion-up {
    animation: accordion-up 0.2s ease-out forwards;
}

/* Bordered Accordion Variant */
.accordion.accordion-bordered .accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.accordion.accordion-bordered .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion.accordion-bordered .accordion-trigger {
    padding: 1rem;
}

.accordion.accordion-bordered .accordion-trigger:hover {
    text-decoration: none;
    background-color: #f9fafb;
}

.accordion.accordion-bordered .accordion-content-inner {
    padding: 1rem;
    padding-top: 0;
    border-top: 1px solid var(--border);
    background-color: #f9fafb;
}

.accordion.accordion-bordered .accordion-item.open .accordion-content-inner {
    padding-top: 1rem;
}

/* Card Accordion Variant (for toolbar panels) */
.accordion.accordion-card .accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    background-color: var(--card);
}

.accordion.accordion-card .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion.accordion-card .accordion-trigger {
    padding: 1rem;
    gap: 0.75rem;
}

.accordion.accordion-card .accordion-trigger:hover {
    text-decoration: none;
    background-color: #f9fafb;
}

.accordion.accordion-card .accordion-trigger-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.accordion.accordion-card .accordion-trigger-icon {
    font-size: 1.25rem;
    color: #15803d;
}

.accordion.accordion-card .accordion-trigger-text {
    font-weight: 700;
    color: var(--foreground);
}

.accordion.accordion-card .accordion-content-inner {
    padding: 1rem;
    border-top: 1px solid var(--border);
    background-color: #f9fafb;
}

/* FAQ Accordion Variant */
.accordion.accordion-faq .accordion-item {
    border-bottom: 1px solid var(--border);
    padding: 0;
}

.accordion.accordion-faq .accordion-trigger {
    padding: 1.25rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.accordion.accordion-faq .accordion-content-inner {
    padding-bottom: 1.25rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}

/* Dark Mode Accordion */
.dark .accordion-trigger:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .accordion.accordion-bordered .accordion-trigger:hover,
.dark .accordion.accordion-card .accordion-trigger:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .accordion.accordion-bordered .accordion-content-inner,
.dark .accordion.accordion-card .accordion-content-inner {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ========================================
   ALERT DIALOG COMPONENT STYLES
   ======================================== */

/* Alert Dialog Overlay */
.alert-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.alert-dialog-overlay[data-state="open"] {
    opacity: 1;
    visibility: visible;
}

.alert-dialog-overlay[data-state="closed"] {
    opacity: 0;
    visibility: hidden;
}

/* Alert Dialog Content */
.alert-dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 50;
    display: grid;
    width: 100%;
    max-width: calc(100% - 2rem);
    gap: 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

@media (min-width: 640px) {
    .alert-dialog-content {
        max-width: 32rem;
    }
}

.alert-dialog-content[data-state="open"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.alert-dialog-content[data-state="closed"] {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.95);
}

/* Alert Dialog Header */
.alert-dialog-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .alert-dialog-header {
        text-align: left;
    }
}

/* Alert Dialog Title */
.alert-dialog-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

/* Alert Dialog Description */
.alert-dialog-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
}

/* Alert Dialog Footer */
.alert-dialog-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .alert-dialog-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Alert Dialog Buttons */
.alert-dialog-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #15803d;
    color: white;
}

.alert-dialog-action:hover {
    background-color: #166534;
}

.alert-dialog-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #15803d;
}

.alert-dialog-action.destructive {
    background-color: #dc2626;
}

.alert-dialog-action.destructive:hover {
    background-color: #b91c1c;
}

.alert-dialog-action.destructive:focus-visible {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #dc2626;
}

.alert-dialog-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert-dialog-cancel:hover {
    background-color: #f3f4f6;
}

.alert-dialog-cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring);
}

/* Alert Dialog Animations */
@keyframes alert-dialog-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes alert-dialog-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes alert-dialog-zoom-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes alert-dialog-zoom-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

.alert-dialog-overlay.animate-in {
    animation: alert-dialog-fade-in 0.2s ease forwards;
}

.alert-dialog-overlay.animate-out {
    animation: alert-dialog-fade-out 0.2s ease forwards;
}

.alert-dialog-content.animate-in {
    animation: alert-dialog-zoom-in 0.2s ease forwards;
}

.alert-dialog-content.animate-out {
    animation: alert-dialog-zoom-out 0.2s ease forwards;
}

/* Alert Dialog Variants */
.alert-dialog-content.alert-warning .alert-dialog-icon {
    color: #f59e0b;
}

.alert-dialog-content.alert-error .alert-dialog-icon {
    color: #dc2626;
}

.alert-dialog-content.alert-success .alert-dialog-icon {
    color: #15803d;
}

.alert-dialog-content.alert-info .alert-dialog-icon {
    color: #3b82f6;
}

.alert-dialog-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.alert-dialog-header.with-icon {
    align-items: center;
}

/* Dark Mode Alert Dialog */
.dark .alert-dialog-content {
    background-color: var(--card);
    border-color: var(--border);
}

.dark .alert-dialog-cancel:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   ALERT (INLINE) COMPONENT STYLES
   ======================================== */

/* Base Alert */
.alert {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    display: grid;
    grid-template-columns: 0 1fr;
    gap: 0.125rem 0;
    align-items: start;
}

.alert.has-icon {
    grid-template-columns: 1rem 1fr;
    gap: 0.125rem 0.75rem;
}

/* Alert Icon */
.alert-icon {
    width: 1rem;
    height: 1rem;
    transform: translateY(0.125rem);
    color: currentColor;
    grid-row: span 2;
}

/* Alert Title */
.alert-title {
    grid-column-start: 2;
    min-height: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 0;
}

/* Alert Description */
.alert-description {
    grid-column-start: 2;
    display: grid;
    justify-items: start;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
}

.alert-description p {
    line-height: 1.6;
    margin: 0;
}

/* Alert Variants */
.alert.alert-default {
    background-color: var(--card);
    color: var(--foreground);
}

.alert.alert-destructive {
    background-color: var(--card);
    color: #dc2626;
    border-color: #fecaca;
}

.alert.alert-destructive .alert-icon {
    color: #dc2626;
}

.alert.alert-destructive .alert-description {
    color: rgba(220, 38, 38, 0.9);
}

.alert.alert-warning {
    background-color: #fffbeb;
    color: #b45309;
    border-color: #fcd34d;
}

.alert.alert-warning .alert-icon {
    color: #f59e0b;
}

.alert.alert-warning .alert-description {
    color: rgba(180, 83, 9, 0.9);
}

.alert.alert-success {
    background-color: #f0fdf4;
    color: #15803d;
    border-color: #86efac;
}

.alert.alert-success .alert-icon {
    color: #22c55e;
}

.alert.alert-success .alert-description {
    color: rgba(21, 128, 61, 0.9);
}

.alert.alert-info {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.alert.alert-info .alert-icon {
    color: #3b82f6;
}

.alert.alert-info .alert-description {
    color: rgba(29, 78, 216, 0.9);
}

/* Alert with Actions */
.alert-actions {
    grid-column-start: 2;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.alert-action-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert-action-btn.primary {
    background-color: currentColor;
    color: white;
}

.alert-action-btn.secondary {
    background-color: transparent;
    color: currentColor;
    border: 1px solid currentColor;
}

.alert-action-btn.secondary:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Dismissible Alert */
.alert.dismissible {
    padding-right: 2.5rem;
}

.alert-dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.alert-dismiss:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--foreground);
}

/* Alert Animations */
@keyframes alert-slide-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes alert-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

.alert.animate-in {
    animation: alert-slide-in 0.2s ease forwards;
}

.alert.animate-out {
    animation: alert-slide-out 0.2s ease forwards;
}

/* Alert Container (for stacking multiple alerts) */
.alert-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Dark Mode Alerts */
.dark .alert.alert-default {
    background-color: var(--card);
}

.dark .alert.alert-destructive {
    background-color: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

.dark .alert.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.dark .alert.alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.dark .alert.alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark .alert-dismiss:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   ASPECT RATIO COMPONENT STYLES
   ======================================== */

/* Base Aspect Ratio Container */
.aspect-ratio {
    position: relative;
    width: 100%;
}

.aspect-ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Common Aspect Ratios */
.aspect-ratio-square,
.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-video,
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-3-2 {
    aspect-ratio: 3 / 2;
}

.aspect-ratio-2-1 {
    aspect-ratio: 2 / 1;
}

.aspect-ratio-21-9 {
    aspect-ratio: 21 / 9;
}

.aspect-ratio-9-16 {
    aspect-ratio: 9 / 16;
}

.aspect-ratio-3-4 {
    aspect-ratio: 3 / 4;
}

.aspect-ratio-2-3 {
    aspect-ratio: 2 / 3;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    .aspect-ratio-square::before,
    .aspect-ratio-1-1::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    .aspect-ratio-video::before,
    .aspect-ratio-16-9::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }

    .aspect-ratio-4-3::before {
        content: "";
        display: block;
        padding-top: 75%;
    }

    .aspect-ratio-3-2::before {
        content: "";
        display: block;
        padding-top: 66.67%;
    }

    .aspect-ratio-2-1::before {
        content: "";
        display: block;
        padding-top: 50%;
    }

    .aspect-ratio-21-9::before {
        content: "";
        display: block;
        padding-top: 42.86%;
    }

    .aspect-ratio-9-16::before {
        content: "";
        display: block;
        padding-top: 177.78%;
    }

    .aspect-ratio-3-4::before {
        content: "";
        display: block;
        padding-top: 133.33%;
    }

    .aspect-ratio-2-3::before {
        content: "";
        display: block;
        padding-top: 150%;
    }
}

/* Aspect Ratio with Image */
.aspect-ratio img,
.aspect-ratio video,
.aspect-ratio iframe {
    object-fit: cover;
}

.aspect-ratio-contain img,
.aspect-ratio-contain video,
.aspect-ratio-contain iframe {
    object-fit: contain;
}

.aspect-ratio-fill img,
.aspect-ratio-fill video,
.aspect-ratio-fill iframe {
    object-fit: fill;
}

/* Aspect Ratio Card */
.aspect-ratio-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.aspect-ratio-card img {
    transition: transform 0.3s ease;
}

.aspect-ratio-card:hover img {
    transform: scale(1.05);
}

.aspect-ratio-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}

.aspect-ratio-card-title {
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.aspect-ratio-card-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

/* Responsive Aspect Ratios */
@media (max-width: 768px) {
    .md\:aspect-ratio-square {
        aspect-ratio: 1 / 1;
    }
    
    .md\:aspect-ratio-video {
        aspect-ratio: 16 / 9;
    }
    
    .md\:aspect-ratio-4-3 {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 640px) {
    .sm\:aspect-ratio-square {
        aspect-ratio: 1 / 1;
    }
    
    .sm\:aspect-ratio-video {
        aspect-ratio: 16 / 9;
    }
    
    .sm\:aspect-ratio-4-3 {
        aspect-ratio: 4 / 3;
    }
}

/* ========================================
   AVATAR COMPONENT STYLES
   ======================================== */

/* Base Avatar */
.avatar {
    position: relative;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
}

/* Avatar Image */
.avatar-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar Fallback */
.avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* Avatar Sizes */
.avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
}

.avatar-xs .avatar-fallback {
    font-size: 0.625rem;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
}

.avatar-sm .avatar-fallback {
    font-size: 0.75rem;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
}

.avatar-lg .avatar-fallback {
    font-size: 1rem;
}

.avatar-xl {
    width: 4rem;
    height: 4rem;
}

.avatar-xl .avatar-fallback {
    font-size: 1.25rem;
}

.avatar-2xl {
    width: 5rem;
    height: 5rem;
}

.avatar-2xl .avatar-fallback {
    font-size: 1.5rem;
}

.avatar-3xl {
    width: 6rem;
    height: 6rem;
}

.avatar-3xl .avatar-fallback {
    font-size: 1.75rem;
}

/* Avatar Shapes */
.avatar-rounded {
    border-radius: var(--radius-lg);
}

.avatar-square {
    border-radius: 0;
}

/* Avatar Border */
.avatar-bordered {
    border: 2px solid var(--background);
    box-shadow: 0 0 0 2px var(--border);
}

.avatar-bordered-primary {
    border: 2px solid var(--background);
    box-shadow: 0 0 0 2px #15803d;
}

/* Avatar Status Indicator */
.avatar-with-status {
    position: relative;
}

.avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    border: 2px solid var(--background);
}

.avatar-status-online {
    background-color: #22c55e;
}

.avatar-status-offline {
    background-color: #9ca3af;
}

.avatar-status-busy {
    background-color: #ef4444;
}

.avatar-status-away {
    background-color: #f59e0b;
}

/* Avatar with different size status indicators */
.avatar-lg .avatar-status,
.avatar-xl .avatar-status {
    width: 1rem;
    height: 1rem;
}

.avatar-2xl .avatar-status,
.avatar-3xl .avatar-status {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 3px;
}

/* Avatar Group */
.avatar-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.avatar-group .avatar {
    border: 2px solid var(--background);
    margin-left: -0.75rem;
}

.avatar-group .avatar:last-child {
    margin-left: 0;
}

.avatar-group .avatar-more {
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
}

/* Avatar with Badge */
.avatar-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #dc2626;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border: 2px solid var(--background);
}

/* Fallback Colors */
.avatar-fallback-primary {
    background-color: #dcfce7;
    color: #15803d;
}

.avatar-fallback-blue {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.avatar-fallback-purple {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.avatar-fallback-amber {
    background-color: #fef3c7;
    color: #b45309;
}

.avatar-fallback-red {
    background-color: #fee2e2;
    color: #dc2626;
}

.avatar-fallback-gray {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Avatar Hover Effects */
.avatar-interactive {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar-interactive:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-interactive:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px #15803d;
}

/* Avatar Stack (for displaying multiple avatars with names) */
.avatar-stack {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar-stack-info {
    display: flex;
    flex-direction: column;
}

.avatar-stack-name {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    font-size: 0.875rem;
}

.avatar-stack-meta {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

/* Dark Mode Avatar */
.dark .avatar-fallback {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.dark .avatar-bordered {
    border-color: var(--card);
    box-shadow: 0 0 0 2px var(--border);
}

.dark .avatar-group .avatar {
    border-color: var(--card);
}

.dark .avatar-status {
    border-color: var(--card);
}

.dark .avatar-badge {
    border-color: var(--card);
}

/* ========================================
   BADGE COMPONENT STYLES
   ======================================== */

/* Base Badge */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    width: fit-content;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 0.25rem;
    transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    overflow: hidden;
}

.badge svg,
.badge i {
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
}

.badge:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2);
}

/* Badge Variants */
.badge-default,
.badge-primary {
    border-color: transparent;
    background-color: #15803d;
    color: white;
}

a.badge-default:hover,
a.badge-primary:hover,
button.badge-default:hover,
button.badge-primary:hover {
    background-color: rgba(21, 128, 61, 0.9);
}

.badge-secondary {
    border-color: transparent;
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

a.badge-secondary:hover,
button.badge-secondary:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.badge-destructive {
    border-color: transparent;
    background-color: #dc2626;
    color: white;
}

a.badge-destructive:hover,
button.badge-destructive:hover {
    background-color: rgba(220, 38, 38, 0.9);
}

.badge-destructive:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.badge-outline {
    border-color: var(--border);
    background-color: transparent;
    color: var(--foreground);
}

a.badge-outline:hover,
button.badge-outline:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Additional Badge Color Variants */
.badge-success {
    border-color: transparent;
    background-color: #22c55e;
    color: white;
}

.badge-warning {
    border-color: transparent;
    background-color: #f59e0b;
    color: white;
}

.badge-info {
    border-color: transparent;
    background-color: #3b82f6;
    color: white;
}

/* Soft/Light Badge Variants */
.badge-soft-primary {
    background-color: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

.badge-soft-destructive {
    background-color: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.badge-soft-warning {
    background-color: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}

.badge-soft-success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.badge-soft-info {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.badge-soft-secondary {
    background-color: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}

/* Badge Sizes */
.badge-xs {
    padding: 0 0.375rem;
    font-size: 0.625rem;
    border-radius: var(--radius-sm);
}

.badge-sm {
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
}

.badge-lg {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.badge-xl {
    padding: 0.375rem 1rem;
    font-size: 1rem;
}

/* Badge Shapes */
.badge-pill {
    border-radius: 9999px;
}

.badge-square {
    border-radius: 0;
}

/* Badge with Dot Indicator */
.badge-dot {
    position: relative;
    padding-left: 1rem;
}

.badge-dot::before {
    content: "";
    position: absolute;
    left: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: currentColor;
}

/* Badge with Close Button */
.badge-dismissible {
    padding-right: 0.25rem;
}

.badge-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.125rem;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.badge-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

.badge-close i,
.badge-close svg {
    width: 0.625rem;
    height: 0.625rem;
}

/* Badge Group */
.badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Animated Badge */
.badge-pulse {
    animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Badge as Link */
a.badge {
    text-decoration: none;
    cursor: pointer;
}

a.badge:hover {
    text-decoration: none;
}

/* Badge as Button */
button.badge {
    cursor: pointer;
}

/* Dark Mode Badges */
.dark .badge-default,
.dark .badge-primary {
    background-color: #166534;
}

.dark .badge-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.dark .badge-destructive {
    background-color: rgba(220, 38, 38, 0.6);
}

.dark .badge-outline {
    border-color: var(--border);
    color: var(--foreground);
}

.dark .badge-soft-primary {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.dark .badge-soft-destructive {
    background-color: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

.dark .badge-soft-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

.dark .badge-soft-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.dark .badge-soft-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.dark .badge-soft-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .badge-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   BREADCRUMB COMPONENT
   ======================================== */

/* Breadcrumb Container */
[data-slot="breadcrumb"] {
    /* Navigation wrapper with aria-label="breadcrumb" */
}

/* Breadcrumb List */
[data-slot="breadcrumb-list"],
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--muted-foreground);
    word-break: break-word;
}

@media (min-width: 640px) {
    [data-slot="breadcrumb-list"],
    .breadcrumb-list {
        gap: 0.625rem;
    }
}

/* Breadcrumb Item */
[data-slot="breadcrumb-item"],
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Breadcrumb Link */
[data-slot="breadcrumb-link"],
.breadcrumb-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

[data-slot="breadcrumb-link"]:hover,
.breadcrumb-link:hover {
    color: var(--foreground);
}

/* Breadcrumb Page (Current) */
[data-slot="breadcrumb-page"],
.breadcrumb-page {
    color: var(--foreground);
    font-weight: 400;
}

/* Breadcrumb Separator */
[data-slot="breadcrumb-separator"],
.breadcrumb-separator {
    display: flex;
    align-items: center;
    list-style: none;
}

[data-slot="breadcrumb-separator"] svg,
.breadcrumb-separator svg,
[data-slot="breadcrumb-separator"] i,
.breadcrumb-separator i {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--muted-foreground);
}

/* Breadcrumb Ellipsis */
[data-slot="breadcrumb-ellipsis"],
.breadcrumb-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}

[data-slot="breadcrumb-ellipsis"] svg,
.breadcrumb-ellipsis svg,
[data-slot="breadcrumb-ellipsis"] i,
.breadcrumb-ellipsis i {
    width: 1rem;
    height: 1rem;
}

.breadcrumb-ellipsis .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   BUTTON COMPONENT
   ======================================== */

/* Base Button Styles */
[data-slot="button"],
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    outline: none;
    border: 1px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

[data-slot="button"]:disabled,
.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="button"] svg,
.btn svg,
[data-slot="button"] i,
.btn i {
    pointer-events: none;
    flex-shrink: 0;
}

[data-slot="button"] svg:not([class*="size-"]),
.btn svg:not([class*="size-"]),
[data-slot="button"] i,
.btn i {
    width: 1rem;
    height: 1rem;
}

/* Focus Visible */
[data-slot="button"]:focus-visible,
.btn:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Aria Invalid */
[data-slot="button"][aria-invalid="true"],
.btn[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.dark [data-slot="button"][aria-invalid="true"],
.dark .btn[aria-invalid="true"] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.4);
}

/* Button Variants */

/* Default - Primary */
.btn-default,
.btn-primary,
[data-slot="button"]:not([class*="btn-"]) {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-default:hover,
.btn-primary:hover,
[data-slot="button"]:not([class*="btn-"]):hover {
    background-color: rgba(21, 128, 61, 0.9);
}

/* Destructive */
.btn-destructive {
    background-color: var(--destructive);
    color: white;
}

.btn-destructive:hover {
    background-color: rgba(220, 38, 38, 0.9);
}

.btn-destructive:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.dark .btn-destructive {
    background-color: rgba(220, 38, 38, 0.6);
}

.dark .btn-destructive:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.4);
}

/* Outline */
.btn-outline {
    border: 1px solid var(--border);
    background-color: var(--background);
    color: var(--foreground);
}

.btn-outline:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.dark .btn-outline {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--input);
}

.dark .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Secondary */
.btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:hover {
    background-color: rgba(var(--secondary-rgb, 243, 244, 246), 0.8);
}

/* Ghost */
.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
}

.btn-ghost:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.dark .btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Link */
.btn-link {
    background-color: transparent;
    color: var(--primary);
    text-underline-offset: 4px;
    border: none;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Button Sizes */

/* Default Size */
.btn,
.btn-md,
[data-slot="button"] {
    height: 2.25rem;
    padding: 0.5rem 1rem;
}

.btn:has(svg),
.btn-md:has(svg),
[data-slot="button"]:has(svg) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Small */
.btn-sm {
    height: 2rem;
    gap: 0.375rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
}

.btn-sm:has(svg) {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

/* Large */
.btn-lg {
    height: 2.5rem;
    padding: 0 1.5rem;
    border-radius: 0.375rem;
}

.btn-lg:has(svg) {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Icon Only */
.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.375rem;
}

.btn-icon.btn-sm {
    width: 2rem;
    height: 2rem;
}

.btn-icon.btn-lg {
    width: 2.5rem;
    height: 2.5rem;
}

/* ========================================
   CALENDAR COMPONENT
   ======================================== */

/* Calendar Container */
[data-slot="calendar"],
.calendar {
    padding: 0.75rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

/* Months Container */
.calendar-months {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .calendar-months {
        flex-direction: row;
    }
}

/* Individual Month */
.calendar-month {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Caption - Month/Year Header */
.calendar-caption {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    width: 100%;
    padding-top: 0.25rem;
}

.calendar-caption-label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Navigation Buttons */
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.calendar-nav-button:hover {
    opacity: 1;
    background-color: var(--accent);
}

.calendar-nav-button svg,
.calendar-nav-button i {
    width: 1rem;
    height: 1rem;
}

.calendar-nav-button-previous {
    position: absolute;
    left: 0.25rem;
}

.calendar-nav-button-next {
    position: absolute;
    right: 0.25rem;
}

/* Calendar Table */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

/* Head Row */
.calendar-head-row {
    display: flex;
}

.calendar-head-cell {
    color: var(--muted-foreground);
    border-radius: 0.375rem;
    width: 2rem;
    font-weight: 400;
    font-size: 0.8rem;
    text-align: center;
}

/* Calendar Row */
.calendar-row {
    display: flex;
    width: 100%;
    margin-top: 0.5rem;
}

/* Calendar Cell */
.calendar-cell {
    position: relative;
    padding: 0;
    text-align: center;
    font-size: 0.875rem;
}

.calendar-cell:focus-within {
    position: relative;
    z-index: 20;
}

.calendar-cell:has([aria-selected]) {
    background-color: var(--accent);
}

.calendar-cell:has([aria-selected].day-range-end) {
    border-radius: 0 0.375rem 0.375rem 0;
}

.calendar-cell:has([aria-selected]) {
    border-radius: 0.375rem;
}

/* Range Mode Specific */
.calendar-cell.range-mode:has(.day-range-end) {
    border-radius: 0 0.375rem 0.375rem 0;
}

.calendar-cell.range-mode:has(.day-range-start) {
    border-radius: 0.375rem 0 0 0.375rem;
}

.calendar-cell.range-mode:first-child:has([aria-selected]) {
    border-radius: 0.375rem 0 0 0.375rem;
}

.calendar-cell.range-mode:last-child:has([aria-selected]) {
    border-radius: 0 0.375rem 0.375rem 0;
}

/* Day Button */
.calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-weight: 400;
    background-color: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.calendar-day:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.calendar-day[aria-selected="true"] {
    opacity: 1;
}

/* Day States */
.calendar-day-today {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.calendar-day-selected {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.calendar-day-selected:hover {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.calendar-day-selected:focus {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.calendar-day-outside {
    color: var(--muted-foreground);
}

.calendar-day-outside[aria-selected="true"] {
    color: var(--muted-foreground);
}

.calendar-day-disabled {
    color: var(--muted-foreground);
    opacity: 0.5;
    pointer-events: none;
}

.calendar-day-hidden {
    visibility: hidden;
}

/* Range Start/End */
.calendar-day-range-start[aria-selected="true"],
.calendar-day-range-end[aria-selected="true"] {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Range Middle */
.calendar-day-range-middle[aria-selected="true"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* ========================================
   CARD COMPONENT
   ======================================== */

/* Card Container */
[data-slot="card"],
.card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--card-foreground);
}

/* Card Header */
[data-slot="card-header"],
.card-header {
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.375rem;
    padding: 1.5rem 1.5rem 0;
}

[data-slot="card-header"]:has([data-slot="card-action"]),
.card-header:has(.card-action) {
    grid-template-columns: 1fr auto;
}

.card-header.border-b {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

/* Card Title */
[data-slot="card-title"],
.card-title {
    line-height: 1;
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
}

/* Card Description */
[data-slot="card-description"],
.card-description {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin: 0;
}

/* Card Action */
[data-slot="card-action"],
.card-action {
    grid-column-start: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
}

/* Card Content */
[data-slot="card-content"],
.card-content {
    padding: 0 1.5rem;
}

[data-slot="card-content"]:last-child,
.card-content:last-child {
    padding-bottom: 1.5rem;
}

/* Card Footer */
[data-slot="card-footer"],
.card-footer {
    display: flex;
    align-items: center;
    padding: 0 1.5rem 1.5rem;
}

.card-footer.border-t {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Card Variants */
.card-interactive {
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-interactive:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.card-compact .card-header {
    padding: 1rem 1rem 0;
}

.card-compact .card-content {
    padding: 0 1rem;
}

.card-compact .card-content:last-child {
    padding-bottom: 1rem;
}

.card-compact .card-footer {
    padding: 0 1rem 1rem;
}

/* ========================================
   CAROUSEL COMPONENT
   ======================================== */

/* Carousel Container */
[data-slot="carousel"],
.carousel {
    position: relative;
}

/* Carousel Content Wrapper (Embla viewport) */
[data-slot="carousel-content"],
.carousel-content {
    overflow: hidden;
}

/* Carousel Content Inner (Embla container) */
.carousel-content-inner {
    display: flex;
}

.carousel-content-inner.horizontal {
    margin-left: -1rem;
}

.carousel-content-inner.vertical {
    flex-direction: column;
    margin-top: -1rem;
}

/* Carousel Item */
[data-slot="carousel-item"],
.carousel-item {
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
}

.carousel-item.horizontal {
    padding-left: 1rem;
}

.carousel-item.vertical {
    padding-top: 1rem;
}

/* Carousel Navigation Buttons */
[data-slot="carousel-previous"],
[data-slot="carousel-next"],
.carousel-previous,
.carousel-next {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--background);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

[data-slot="carousel-previous"]:hover,
[data-slot="carousel-next"]:hover,
.carousel-previous:hover,
.carousel-next:hover {
    background-color: var(--accent);
}

[data-slot="carousel-previous"]:disabled,
[data-slot="carousel-next"]:disabled,
.carousel-previous:disabled,
.carousel-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-slot="carousel-previous"] svg,
[data-slot="carousel-next"] svg,
.carousel-previous svg,
.carousel-next svg,
[data-slot="carousel-previous"] i,
[data-slot="carousel-next"] i,
.carousel-previous i,
.carousel-next i {
    width: 1rem;
    height: 1rem;
}

/* Horizontal Navigation */
.carousel.horizontal [data-slot="carousel-previous"],
.carousel.horizontal .carousel-previous {
    top: 50%;
    left: -3rem;
    transform: translateY(-50%);
}

.carousel.horizontal [data-slot="carousel-next"],
.carousel.horizontal .carousel-next {
    top: 50%;
    right: -3rem;
    transform: translateY(-50%);
}

/* Vertical Navigation */
.carousel.vertical [data-slot="carousel-previous"],
.carousel.vertical .carousel-previous {
    top: -3rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.carousel.vertical [data-slot="carousel-next"],
.carousel.vertical .carousel-next {
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.carousel-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--muted);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.carousel-indicator.active,
.carousel-indicator[data-active="true"] {
    background-color: var(--primary);
}

.carousel-indicator:hover {
    background-color: var(--primary);
    opacity: 0.8;
}

/* ========================================
   CHART COMPONENT
   ======================================== */

/* Chart Container */
[data-slot="chart"],
.chart-container {
    display: flex;
    justify-content: center;
    aspect-ratio: 16 / 9;
    font-size: 0.75rem;
}

/* Recharts Overrides */
.chart-container .recharts-cartesian-axis-tick text {
    fill: var(--muted-foreground);
}

.chart-container .recharts-cartesian-grid line[stroke="#ccc"] {
    stroke: rgba(var(--border-rgb, 229, 231, 235), 0.5);
}

.chart-container .recharts-curve.recharts-tooltip-cursor {
    stroke: var(--border);
}

.chart-container .recharts-polar-grid [stroke="#ccc"] {
    stroke: var(--border);
}

.chart-container .recharts-radial-bar-background-sector {
    fill: var(--muted);
}

.chart-container .recharts-rectangle.recharts-tooltip-cursor {
    fill: var(--muted);
}

.chart-container .recharts-reference-line [stroke="#ccc"] {
    stroke: var(--border);
}

.chart-container .recharts-dot[stroke="#fff"] {
    stroke: transparent;
}

.chart-container .recharts-layer,
.chart-container .recharts-sector {
    outline: none;
}

.chart-container .recharts-sector[stroke="#fff"] {
    stroke: transparent;
}

.chart-container .recharts-surface {
    outline: none;
}

/* Chart Tooltip */
.chart-tooltip {
    display: grid;
    min-width: 8rem;
    align-items: flex-start;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--border-rgb, 229, 231, 235), 0.5);
    background-color: var(--background);
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.chart-tooltip-label {
    font-weight: 500;
}

.chart-tooltip-content {
    display: grid;
    gap: 0.375rem;
}

.chart-tooltip-item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.chart-tooltip-item svg {
    width: 0.625rem;
    height: 0.625rem;
    color: var(--muted-foreground);
}

/* Chart Tooltip Indicators */
.chart-tooltip-indicator {
    flex-shrink: 0;
    border-radius: 2px;
}

.chart-tooltip-indicator.dot {
    width: 0.625rem;
    height: 0.625rem;
}

.chart-tooltip-indicator.line {
    width: 0.25rem;
}

.chart-tooltip-indicator.dashed {
    width: 0;
    border-width: 1.5px;
    border-style: dashed;
    background-color: transparent;
}

.chart-tooltip-value {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
}

.chart-tooltip-name {
    color: var(--muted-foreground);
}

.chart-tooltip-number {
    color: var(--foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Chart Legend */
.chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.75rem;
}

.chart-legend.top {
    padding-top: 0;
    padding-bottom: 0.75rem;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chart-legend-item svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--muted-foreground);
}

.chart-legend-indicator {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 2px;
}

/* ========================================
   CHECKBOX COMPONENT
   ======================================== */

/* Checkbox Base */
[data-slot="checkbox"],
.checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--border);
    background-color: var(--input-background, var(--background));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.dark [data-slot="checkbox"],
.dark .checkbox {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Checked State */
[data-slot="checkbox"][data-state="checked"],
[data-slot="checkbox"]:checked,
.checkbox[data-state="checked"],
.checkbox:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.dark [data-slot="checkbox"][data-state="checked"],
.dark [data-slot="checkbox"]:checked,
.dark .checkbox[data-state="checked"],
.dark .checkbox:checked {
    background-color: var(--primary);
}

/* Focus Visible */
[data-slot="checkbox"]:focus-visible,
.checkbox:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
    outline: none;
}

/* Invalid State */
[data-slot="checkbox"][aria-invalid="true"],
.checkbox[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.dark [data-slot="checkbox"][aria-invalid="true"],
.dark .checkbox[aria-invalid="true"] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.4);
}

/* Disabled State */
[data-slot="checkbox"]:disabled,
.checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Checkbox Indicator (Check Icon) */
[data-slot="checkbox-indicator"],
.checkbox-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

[data-slot="checkbox-indicator"] svg,
.checkbox-indicator svg,
[data-slot="checkbox-indicator"] i,
.checkbox-indicator i {
    width: 0.875rem;
    height: 0.875rem;
}

/* Custom Checkbox with Label */
.checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-label {
    font-size: 0.875rem;
    color: var(--foreground);
    cursor: pointer;
    user-select: none;
}

.checkbox:disabled + .checkbox-label {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Checkbox using ::before for check mark */
.checkbox::before {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.25rem;
    border-left: 2px solid var(--primary-foreground);
    border-bottom: 2px solid var(--primary-foreground);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.15s ease;
}

.checkbox:checked::before,
.checkbox[data-state="checked"]::before {
    transform: rotate(-45deg) scale(1);
}

/* ========================================
   COLLAPSIBLE COMPONENT
   ======================================== */

/* Collapsible Container */
[data-slot="collapsible"],
.collapsible {
    /* Container for collapsible content */
}

/* Collapsible Trigger */
[data-slot="collapsible-trigger"],
.collapsible-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    transition: background-color 0.15s ease;
}

[data-slot="collapsible-trigger"]:hover,
.collapsible-trigger:hover {
    background-color: var(--accent);
}

/* Collapsible Trigger Icon */
.collapsible-trigger-icon {
    transition: transform 0.2s ease;
}

[data-slot="collapsible"][data-state="open"] .collapsible-trigger-icon,
.collapsible[data-state="open"] .collapsible-trigger-icon,
.collapsible.open .collapsible-trigger-icon {
    transform: rotate(180deg);
}

/* Collapsible Content */
[data-slot="collapsible-content"],
.collapsible-content {
    overflow: hidden;
    transition: height 0.2s ease, opacity 0.2s ease;
}

[data-slot="collapsible"][data-state="closed"] [data-slot="collapsible-content"],
.collapsible[data-state="closed"] .collapsible-content,
.collapsible:not(.open) .collapsible-content {
    height: 0;
    opacity: 0;
}

[data-slot="collapsible"][data-state="open"] [data-slot="collapsible-content"],
.collapsible[data-state="open"] .collapsible-content,
.collapsible.open .collapsible-content {
    height: auto;
    opacity: 1;
}

/* Collapsible Content Inner */
.collapsible-content-inner {
    padding: 0.75rem 1rem;
}

/* ========================================
   COMMAND COMPONENT
   ======================================== */

/* Command Container */
[data-slot="command"],
.command {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: var(--popover);
    color: var(--popover-foreground);
}

/* Command Input Wrapper */
[data-slot="command-input-wrapper"],
.command-input-wrapper {
    display: flex;
    height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding: 0 0.75rem;
}

/* Command Dialog has larger input */
.command-dialog [data-slot="command-input-wrapper"],
.command-dialog .command-input-wrapper {
    height: 3rem;
}

.command-input-wrapper svg,
.command-input-wrapper i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.5;
}

.command-dialog .command-input-wrapper svg,
.command-dialog .command-input-wrapper i {
    width: 1.25rem;
    height: 1.25rem;
}

/* Command Input */
[data-slot="command-input"],
.command-input {
    display: flex;
    height: 2.5rem;
    width: 100%;
    border-radius: 0.375rem;
    background-color: transparent;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    border: none;
    outline: none;
}

[data-slot="command-input"]::placeholder,
.command-input::placeholder {
    color: var(--muted-foreground);
}

[data-slot="command-input"]:disabled,
.command-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Command List */
[data-slot="command-list"],
.command-list {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding: 0.25rem;
}

/* Command Empty */
[data-slot="command-empty"],
.command-empty {
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Command Group */
[data-slot="command-group"],
.command-group {
    overflow: hidden;
    padding: 0.25rem;
    color: var(--foreground);
}

/* Command Group Heading */
.command-group-heading,
[cmdk-group-heading] {
    padding: 0.5rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

/* Command Separator */
[data-slot="command-separator"],
.command-separator {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background-color: var(--border);
}

/* Command Item */
[data-slot="command-item"],
.command-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: default;
    user-select: none;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="command-item"][data-selected="true"],
.command-item[data-selected="true"],
.command-item:hover,
.command-item.selected {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="command-item"][data-disabled="true"],
.command-item[data-disabled="true"],
.command-item:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.command-item svg,
.command-item i {
    pointer-events: none;
    flex-shrink: 0;
}

.command-item svg:not([class*="size-"]),
.command-item i {
    width: 1rem;
    height: 1rem;
}

.command-item svg:not([class*="text-"]),
.command-item i:not([class*="text-"]) {
    color: var(--muted-foreground);
}

.command-dialog .command-item {
    padding: 0.5rem 0.75rem;
}

.command-dialog .command-item svg,
.command-dialog .command-item i {
    width: 1.25rem;
    height: 1.25rem;
}

/* Command Shortcut */
[data-slot="command-shortcut"],
.command-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

/* ========================================
   CONTEXT MENU COMPONENT
   ======================================== */

/* Context Menu Content */
[data-slot="context-menu-content"],
.context-menu-content {
    z-index: 50;
    max-height: var(--radix-context-menu-content-available-height, 300px);
    min-width: 8rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Context Menu Animations */
.context-menu-content[data-state="open"] {
    animation: contextMenuFadeIn 0.15s ease;
}

.context-menu-content[data-state="closed"] {
    animation: contextMenuFadeOut 0.1s ease;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes contextMenuFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Context Menu Sub Content */
[data-slot="context-menu-sub-content"],
.context-menu-sub-content {
    z-index: 50;
    min-width: 8rem;
    overflow: hidden;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Context Menu Item */
[data-slot="context-menu-item"],
.context-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: default;
    user-select: none;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="context-menu-item"]:focus,
.context-menu-item:focus,
[data-slot="context-menu-item"]:hover,
.context-menu-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="context-menu-item"][data-disabled],
.context-menu-item[data-disabled],
[data-slot="context-menu-item"]:disabled,
.context-menu-item:disabled {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="context-menu-item"][data-inset],
.context-menu-item[data-inset] {
    padding-left: 2rem;
}

.context-menu-item svg,
.context-menu-item i {
    pointer-events: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.context-menu-item svg:not([class*="text-"]),
.context-menu-item i:not([class*="text-"]) {
    color: var(--muted-foreground);
}

/* Destructive Variant */
[data-slot="context-menu-item"][data-variant="destructive"],
.context-menu-item[data-variant="destructive"],
.context-menu-item-destructive {
    color: var(--destructive);
}

[data-slot="context-menu-item"][data-variant="destructive"]:focus,
.context-menu-item[data-variant="destructive"]:focus,
.context-menu-item-destructive:focus,
[data-slot="context-menu-item"][data-variant="destructive"]:hover,
.context-menu-item[data-variant="destructive"]:hover,
.context-menu-item-destructive:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--destructive);
}

.dark [data-slot="context-menu-item"][data-variant="destructive"]:focus,
.dark .context-menu-item[data-variant="destructive"]:focus,
.dark .context-menu-item-destructive:focus,
.dark [data-slot="context-menu-item"][data-variant="destructive"]:hover,
.dark .context-menu-item[data-variant="destructive"]:hover,
.dark .context-menu-item-destructive:hover {
    background-color: rgba(220, 38, 38, 0.2);
}

[data-slot="context-menu-item"][data-variant="destructive"] svg,
.context-menu-item[data-variant="destructive"] svg,
.context-menu-item-destructive svg,
[data-slot="context-menu-item"][data-variant="destructive"] i,
.context-menu-item[data-variant="destructive"] i,
.context-menu-item-destructive i {
    color: var(--destructive) !important;
}

/* Context Menu Sub Trigger */
[data-slot="context-menu-sub-trigger"],
.context-menu-sub-trigger {
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    cursor: default;
    user-select: none;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="context-menu-sub-trigger"]:focus,
.context-menu-sub-trigger:focus,
[data-slot="context-menu-sub-trigger"][data-state="open"],
.context-menu-sub-trigger[data-state="open"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="context-menu-sub-trigger"][data-inset],
.context-menu-sub-trigger[data-inset] {
    padding-left: 2rem;
}

.context-menu-sub-trigger svg,
.context-menu-sub-trigger i {
    pointer-events: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.context-menu-sub-trigger-icon {
    margin-left: auto;
}

/* Context Menu Checkbox Item */
[data-slot="context-menu-checkbox-item"],
.context-menu-checkbox-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    cursor: default;
    user-select: none;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="context-menu-checkbox-item"]:focus,
.context-menu-checkbox-item:focus,
[data-slot="context-menu-checkbox-item"]:hover,
.context-menu-checkbox-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="context-menu-checkbox-item"][data-disabled],
.context-menu-checkbox-item[data-disabled] {
    pointer-events: none;
    opacity: 0.5;
}

.context-menu-checkbox-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    pointer-events: none;
}

.context-menu-checkbox-indicator svg,
.context-menu-checkbox-indicator i {
    width: 1rem;
    height: 1rem;
}

/* Context Menu Radio Item */
[data-slot="context-menu-radio-item"],
.context-menu-radio-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    cursor: default;
    user-select: none;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="context-menu-radio-item"]:focus,
.context-menu-radio-item:focus,
[data-slot="context-menu-radio-item"]:hover,
.context-menu-radio-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="context-menu-radio-item"][data-disabled],
.context-menu-radio-item[data-disabled] {
    pointer-events: none;
    opacity: 0.5;
}

.context-menu-radio-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    pointer-events: none;
}

.context-menu-radio-indicator svg,
.context-menu-radio-indicator i {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
}

/* Context Menu Label */
[data-slot="context-menu-label"],
.context-menu-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

[data-slot="context-menu-label"][data-inset],
.context-menu-label[data-inset] {
    padding-left: 2rem;
}

/* Context Menu Separator */
[data-slot="context-menu-separator"],
.context-menu-separator {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background-color: var(--border);
}

/* Context Menu Shortcut */
[data-slot="context-menu-shortcut"],
.context-menu-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

/* ========================================
   SWITCH COMPONENT
   ======================================== */

/* Switch Base */
[data-slot="switch"],
.switch {
    display: inline-flex;
    align-items: center;
    width: 2rem;
    height: 1.15rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid transparent;
    background-color: var(--switch-background, var(--muted));
    transition: all 0.15s ease;
    cursor: pointer;
    outline: none;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
}

/* Unchecked State */
[data-slot="switch"][data-state="unchecked"],
.switch:not(:checked),
.switch[data-state="unchecked"] {
    background-color: var(--switch-background, var(--muted));
}

/* Checked State */
[data-slot="switch"][data-state="checked"],
.switch:checked,
.switch[data-state="checked"] {
    background-color: var(--primary);
}

/* Focus Visible */
[data-slot="switch"]:focus-visible,
.switch:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Disabled State */
[data-slot="switch"]:disabled,
.switch:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Switch Thumb */
[data-slot="switch-thumb"],
.switch-thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--card);
    pointer-events: none;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Thumb Position - Unchecked */
[data-slot="switch"][data-state="unchecked"] [data-slot="switch-thumb"],
.switch[data-state="unchecked"] .switch-thumb,
.switch:not(:checked) .switch-thumb {
    transform: translateX(0);
}

/* Thumb Position - Checked */
[data-slot="switch"][data-state="checked"] [data-slot="switch-thumb"],
.switch[data-state="checked"] .switch-thumb,
.switch:checked .switch-thumb {
    transform: translateX(calc(100% - 2px));
}

/* Native Checkbox as Switch */
input[type="checkbox"].switch {
    width: 2rem;
    height: 1.15rem;
    position: relative;
}

input[type="checkbox"].switch::before {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--card);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: left 0.15s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

input[type="checkbox"].switch:checked::before {
    left: calc(100% - 1rem);
}

/* Switch with Label */
.switch-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.switch-label {
    font-size: 0.875rem;
    color: var(--foreground);
    cursor: pointer;
    user-select: none;
}

.switch:disabled + .switch-label {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Switch Sizes */
.switch-sm {
    width: 1.5rem;
    height: 0.875rem;
}

.switch-sm [data-slot="switch-thumb"],
.switch-sm .switch-thumb {
    width: 0.75rem;
    height: 0.75rem;
}

.switch-lg {
    width: 2.75rem;
    height: 1.5rem;
}

.switch-lg [data-slot="switch-thumb"],
.switch-lg .switch-thumb {
    width: 1.25rem;
    height: 1.25rem;
}

/* Dark Mode */
.dark [data-slot="switch"][data-state="unchecked"],
.dark .switch:not(:checked),
.dark .switch[data-state="unchecked"] {
    background-color: rgba(255, 255, 255, 0.08);
}

.dark [data-slot="switch-thumb"][data-state="unchecked"],
.dark .switch:not(:checked) .switch-thumb,
.dark .switch[data-state="unchecked"] .switch-thumb {
    background-color: var(--card-foreground);
}

.dark [data-slot="switch"][data-state="checked"] [data-slot="switch-thumb"],
.dark .switch:checked .switch-thumb,
.dark .switch[data-state="checked"] .switch-thumb {
    background-color: var(--primary-foreground);
}

.dark input[type="checkbox"].switch::before {
    background-color: var(--card-foreground);
}

.dark input[type="checkbox"].switch:checked::before {
    background-color: var(--primary-foreground);
}

/* ========================================
   DIALOG COMPONENT
   ======================================== */

/* Dialog Overlay */
[data-slot="dialog-overlay"],
.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Dialog Overlay Animations */
[data-slot="dialog-overlay"][data-state="open"],
.dialog-overlay[data-state="open"],
.dialog-overlay.open {
    animation: dialogFadeIn 0.15s ease;
}

[data-slot="dialog-overlay"][data-state="closed"],
.dialog-overlay[data-state="closed"] {
    animation: dialogFadeOut 0.15s ease;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dialogFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Dialog Content */
[data-slot="dialog-content"],
.dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: grid;
    width: 100%;
    max-width: calc(100% - 2rem);
    gap: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background-color: var(--background);
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
    [data-slot="dialog-content"],
    .dialog-content {
        max-width: 32rem;
    }
}

/* Dialog Content Animations */
[data-slot="dialog-content"][data-state="open"],
.dialog-content[data-state="open"],
.dialog-content.open {
    animation: dialogZoomIn 0.2s ease;
}

[data-slot="dialog-content"][data-state="closed"],
.dialog-content[data-state="closed"] {
    animation: dialogZoomOut 0.2s ease;
}

@keyframes dialogZoomIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes dialogZoomOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* Dialog Close Button */
[data-slot="dialog-close"],
.dialog-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.125rem;
    opacity: 0.7;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

[data-slot="dialog-close"]:hover,
.dialog-close:hover {
    opacity: 1;
}

[data-slot="dialog-close"]:focus,
.dialog-close:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
}

[data-slot="dialog-close"]:disabled,
.dialog-close:disabled {
    pointer-events: none;
}

[data-slot="dialog-close"] svg,
.dialog-close svg,
[data-slot="dialog-close"] i,
.dialog-close i {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    flex-shrink: 0;
}

/* Dialog Header */
[data-slot="dialog-header"],
.dialog-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    [data-slot="dialog-header"],
    .dialog-header {
        text-align: left;
    }
}

/* Dialog Footer */
[data-slot="dialog-footer"],
.dialog-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    [data-slot="dialog-footer"],
    .dialog-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Dialog Title */
[data-slot="dialog-title"],
.dialog-title {
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 600;
    margin: 0;
}

/* Dialog Description */
[data-slot="dialog-description"],
.dialog-description {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin: 0;
}

/* ========================================
   DRAWER COMPONENT
   ======================================== */

/* Drawer Overlay */
[data-slot="drawer-overlay"],
.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Drawer Overlay Animations */
[data-slot="drawer-overlay"][data-state="open"],
.drawer-overlay[data-state="open"],
.drawer-overlay.open {
    animation: drawerFadeIn 0.15s ease;
}

[data-slot="drawer-overlay"][data-state="closed"],
.drawer-overlay[data-state="closed"] {
    animation: drawerFadeOut 0.15s ease;
}

@keyframes drawerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Drawer Content Base */
[data-slot="drawer-content"],
.drawer-content {
    position: fixed;
    z-index: 50;
    display: flex;
    height: auto;
    flex-direction: column;
    background-color: var(--background);
}

/* Drawer Direction - Top */
[data-slot="drawer-content"][data-direction="top"],
.drawer-content[data-direction="top"],
.drawer-content.drawer-top {
    inset: 0 0 auto 0;
    top: 0;
    margin-bottom: 6rem;
    max-height: 80vh;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom: 1px solid var(--border);
}

[data-slot="drawer-content"][data-direction="top"][data-state="open"],
.drawer-content[data-direction="top"][data-state="open"],
.drawer-content.drawer-top.open {
    animation: drawerSlideInFromTop 0.3s ease;
}

[data-slot="drawer-content"][data-direction="top"][data-state="closed"],
.drawer-content[data-direction="top"][data-state="closed"] {
    animation: drawerSlideOutToTop 0.3s ease;
}

@keyframes drawerSlideInFromTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes drawerSlideOutToTop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

/* Drawer Direction - Bottom */
[data-slot="drawer-content"][data-direction="bottom"],
.drawer-content[data-direction="bottom"],
.drawer-content.drawer-bottom {
    inset: auto 0 0 0;
    bottom: 0;
    margin-top: 6rem;
    max-height: 80vh;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-top: 1px solid var(--border);
}

[data-slot="drawer-content"][data-direction="bottom"][data-state="open"],
.drawer-content[data-direction="bottom"][data-state="open"],
.drawer-content.drawer-bottom.open {
    animation: drawerSlideInFromBottom 0.3s ease;
}

[data-slot="drawer-content"][data-direction="bottom"][data-state="closed"],
.drawer-content[data-direction="bottom"][data-state="closed"] {
    animation: drawerSlideOutToBottom 0.3s ease;
}

@keyframes drawerSlideInFromBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes drawerSlideOutToBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* Drawer Direction - Left */
[data-slot="drawer-content"][data-direction="left"],
.drawer-content[data-direction="left"],
.drawer-content.drawer-left {
    inset: 0 auto 0 0;
    left: 0;
    width: 75%;
    border-right: 1px solid var(--border);
}

@media (min-width: 640px) {
    [data-slot="drawer-content"][data-direction="left"],
    .drawer-content[data-direction="left"],
    .drawer-content.drawer-left {
        max-width: 24rem;
    }
}

[data-slot="drawer-content"][data-direction="left"][data-state="open"],
.drawer-content[data-direction="left"][data-state="open"],
.drawer-content.drawer-left.open {
    animation: drawerSlideInFromLeft 0.3s ease;
}

[data-slot="drawer-content"][data-direction="left"][data-state="closed"],
.drawer-content[data-direction="left"][data-state="closed"] {
    animation: drawerSlideOutToLeft 0.3s ease;
}

@keyframes drawerSlideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes drawerSlideOutToLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Drawer Direction - Right */
[data-slot="drawer-content"][data-direction="right"],
.drawer-content[data-direction="right"],
.drawer-content.drawer-right {
    inset: 0 0 0 auto;
    right: 0;
    width: 75%;
    border-left: 1px solid var(--border);
}

@media (min-width: 640px) {
    [data-slot="drawer-content"][data-direction="right"],
    .drawer-content[data-direction="right"],
    .drawer-content.drawer-right {
        max-width: 24rem;
    }
}

[data-slot="drawer-content"][data-direction="right"][data-state="open"],
.drawer-content[data-direction="right"][data-state="open"],
.drawer-content.drawer-right.open {
    animation: drawerSlideInFromRight 0.3s ease;
}

[data-slot="drawer-content"][data-direction="right"][data-state="closed"],
.drawer-content[data-direction="right"][data-state="closed"] {
    animation: drawerSlideOutToRight 0.3s ease;
}

@keyframes drawerSlideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes drawerSlideOutToRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Drawer Handle (for bottom drawer) */
.drawer-handle {
    display: none;
    width: 100px;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--muted);
    margin: 1rem auto 0;
}

[data-slot="drawer-content"][data-direction="bottom"] .drawer-handle,
.drawer-content[data-direction="bottom"] .drawer-handle,
.drawer-content.drawer-bottom .drawer-handle {
    display: block;
}

/* Drawer Header */
[data-slot="drawer-header"],
.drawer-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
}

/* Drawer Footer */
[data-slot="drawer-footer"],
.drawer-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

/* Drawer Title */
[data-slot="drawer-title"],
.drawer-title {
    color: var(--foreground);
    font-weight: 600;
    margin: 0;
}

/* Drawer Description */
[data-slot="drawer-description"],
.drawer-description {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin: 0;
}

/* Drawer Body */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem;
}

/* Drawer Close Button */
[data-slot="drawer-close"],
.drawer-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.125rem;
    opacity: 0.7;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

[data-slot="drawer-close"]:hover,
.drawer-close:hover {
    opacity: 1;
}

[data-slot="drawer-close"] svg,
.drawer-close svg,
[data-slot="drawer-close"] i,
.drawer-close i {
    width: 1rem;
    height: 1rem;
}

/* ========================================
   DROPDOWN MENU COMPONENT
   ======================================== */

/* Dropdown Menu Trigger */
[data-slot="dropdown-menu-trigger"],
.dropdown-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Dropdown Menu Content */
[data-slot="dropdown-menu-content"],
.dropdown-menu-content {
    position: absolute;
    z-index: 50;
    min-width: 8rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Dropdown Menu Animations */
[data-slot="dropdown-menu-content"][data-state="open"],
.dropdown-menu-content[data-state="open"],
.dropdown-menu-content.open {
    animation: dropdownFadeIn 0.15s ease, dropdownZoomIn 0.15s ease;
}

[data-slot="dropdown-menu-content"][data-state="closed"],
.dropdown-menu-content[data-state="closed"] {
    animation: dropdownFadeOut 0.15s ease, dropdownZoomOut 0.15s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dropdownFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes dropdownZoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes dropdownZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Side-specific slide animations */
[data-slot="dropdown-menu-content"][data-side="bottom"],
.dropdown-menu-content[data-side="bottom"] {
    animation: dropdownSlideFromTop 0.15s ease, dropdownFadeIn 0.15s ease;
}

[data-slot="dropdown-menu-content"][data-side="top"],
.dropdown-menu-content[data-side="top"] {
    animation: dropdownSlideFromBottom 0.15s ease, dropdownFadeIn 0.15s ease;
}

[data-slot="dropdown-menu-content"][data-side="left"],
.dropdown-menu-content[data-side="left"] {
    animation: dropdownSlideFromRight 0.15s ease, dropdownFadeIn 0.15s ease;
}

[data-slot="dropdown-menu-content"][data-side="right"],
.dropdown-menu-content[data-side="right"] {
    animation: dropdownSlideFromLeft 0.15s ease, dropdownFadeIn 0.15s ease;
}

@keyframes dropdownSlideFromTop {
    from { transform: translateY(-0.5rem); }
    to { transform: translateY(0); }
}

@keyframes dropdownSlideFromBottom {
    from { transform: translateY(0.5rem); }
    to { transform: translateY(0); }
}

@keyframes dropdownSlideFromLeft {
    from { transform: translateX(-0.5rem); }
    to { transform: translateX(0); }
}

@keyframes dropdownSlideFromRight {
    from { transform: translateX(0.5rem); }
    to { transform: translateX(0); }
}

/* Dropdown Menu Group */
[data-slot="dropdown-menu-group"],
.dropdown-menu-group {
    display: flex;
    flex-direction: column;
}

/* Dropdown Menu Label */
[data-slot="dropdown-menu-label"],
.dropdown-menu-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

[data-slot="dropdown-menu-label"][data-inset="true"],
.dropdown-menu-label[data-inset="true"],
.dropdown-menu-label.inset {
    padding-left: 2rem;
}

/* Dropdown Menu Item */
[data-slot="dropdown-menu-item"],
.dropdown-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="dropdown-menu-item"]:focus,
[data-slot="dropdown-menu-item"]:hover,
.dropdown-menu-item:focus,
.dropdown-menu-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="dropdown-menu-item"][data-disabled],
[data-slot="dropdown-menu-item"].disabled,
.dropdown-menu-item[data-disabled],
.dropdown-menu-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="dropdown-menu-item"][data-inset="true"],
.dropdown-menu-item[data-inset="true"],
.dropdown-menu-item.inset {
    padding-left: 2rem;
}

/* Dropdown Menu Item - Destructive Variant */
[data-slot="dropdown-menu-item"][data-variant="destructive"],
.dropdown-menu-item[data-variant="destructive"],
.dropdown-menu-item.destructive {
    color: var(--destructive);
}

[data-slot="dropdown-menu-item"][data-variant="destructive"]:focus,
[data-slot="dropdown-menu-item"][data-variant="destructive"]:hover,
.dropdown-menu-item[data-variant="destructive"]:focus,
.dropdown-menu-item[data-variant="destructive"]:hover {
    background-color: rgba(var(--destructive-rgb, 220, 38, 38), 0.1);
    color: var(--destructive);
}

.dark [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus,
.dark [data-slot="dropdown-menu-item"][data-variant="destructive"]:hover,
.dark .dropdown-menu-item[data-variant="destructive"]:focus,
.dark .dropdown-menu-item[data-variant="destructive"]:hover {
    background-color: rgba(var(--destructive-rgb, 220, 38, 38), 0.2);
}

/* Dropdown Menu Item Icons */
[data-slot="dropdown-menu-item"] svg,
[data-slot="dropdown-menu-item"] i,
.dropdown-menu-item svg,
.dropdown-menu-item i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
    color: var(--muted-foreground);
}

[data-slot="dropdown-menu-item"][data-variant="destructive"] svg,
[data-slot="dropdown-menu-item"][data-variant="destructive"] i,
.dropdown-menu-item[data-variant="destructive"] svg,
.dropdown-menu-item[data-variant="destructive"] i {
    color: var(--destructive);
}

/* Dropdown Menu Checkbox Item */
[data-slot="dropdown-menu-checkbox-item"],
.dropdown-menu-checkbox-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="dropdown-menu-checkbox-item"]:focus,
[data-slot="dropdown-menu-checkbox-item"]:hover,
.dropdown-menu-checkbox-item:focus,
.dropdown-menu-checkbox-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="dropdown-menu-checkbox-item"][data-disabled],
.dropdown-menu-checkbox-item[data-disabled],
.dropdown-menu-checkbox-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Checkbox Item Indicator */
.dropdown-menu-checkbox-item .dropdown-item-indicator,
[data-slot="dropdown-menu-checkbox-item"] .dropdown-item-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    width: 0.875rem;
    height: 0.875rem;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-menu-checkbox-item .dropdown-item-indicator svg,
.dropdown-menu-checkbox-item .dropdown-item-indicator i,
[data-slot="dropdown-menu-checkbox-item"] .dropdown-item-indicator svg,
[data-slot="dropdown-menu-checkbox-item"] .dropdown-item-indicator i {
    width: 1rem;
    height: 1rem;
}

/* Hide indicator when not checked */
[data-slot="dropdown-menu-checkbox-item"]:not([data-checked="true"]) .dropdown-item-indicator,
.dropdown-menu-checkbox-item:not(.checked) .dropdown-item-indicator {
    visibility: hidden;
}

[data-slot="dropdown-menu-checkbox-item"][data-checked="true"] .dropdown-item-indicator,
.dropdown-menu-checkbox-item.checked .dropdown-item-indicator {
    visibility: visible;
}

/* Dropdown Menu Radio Group */
[data-slot="dropdown-menu-radio-group"],
.dropdown-menu-radio-group {
    display: flex;
    flex-direction: column;
}

/* Dropdown Menu Radio Item */
[data-slot="dropdown-menu-radio-item"],
.dropdown-menu-radio-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="dropdown-menu-radio-item"]:focus,
[data-slot="dropdown-menu-radio-item"]:hover,
.dropdown-menu-radio-item:focus,
.dropdown-menu-radio-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="dropdown-menu-radio-item"][data-disabled],
.dropdown-menu-radio-item[data-disabled],
.dropdown-menu-radio-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Radio Item Indicator */
.dropdown-menu-radio-item .dropdown-item-indicator,
[data-slot="dropdown-menu-radio-item"] .dropdown-item-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    width: 0.875rem;
    height: 0.875rem;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dropdown-menu-radio-item .dropdown-item-indicator svg,
.dropdown-menu-radio-item .dropdown-item-indicator i,
[data-slot="dropdown-menu-radio-item"] .dropdown-item-indicator svg,
[data-slot="dropdown-menu-radio-item"] .dropdown-item-indicator i {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
}

/* Hide indicator when not selected */
[data-slot="dropdown-menu-radio-item"]:not([data-checked="true"]) .dropdown-item-indicator,
.dropdown-menu-radio-item:not(.checked) .dropdown-item-indicator {
    visibility: hidden;
}

[data-slot="dropdown-menu-radio-item"][data-checked="true"] .dropdown-item-indicator,
.dropdown-menu-radio-item.checked .dropdown-item-indicator {
    visibility: visible;
}

/* Dropdown Menu Separator */
[data-slot="dropdown-menu-separator"],
.dropdown-menu-separator {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background-color: var(--border);
}

/* Dropdown Menu Shortcut */
[data-slot="dropdown-menu-shortcut"],
.dropdown-menu-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

/* Dropdown Menu Sub Trigger */
[data-slot="dropdown-menu-sub-trigger"],
.dropdown-menu-sub-trigger {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="dropdown-menu-sub-trigger"]:focus,
[data-slot="dropdown-menu-sub-trigger"]:hover,
.dropdown-menu-sub-trigger:focus,
.dropdown-menu-sub-trigger:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="dropdown-menu-sub-trigger"][data-state="open"],
.dropdown-menu-sub-trigger[data-state="open"],
.dropdown-menu-sub-trigger.open {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="dropdown-menu-sub-trigger"][data-inset="true"],
.dropdown-menu-sub-trigger[data-inset="true"],
.dropdown-menu-sub-trigger.inset {
    padding-left: 2rem;
}

/* Sub Trigger Chevron */
[data-slot="dropdown-menu-sub-trigger"] .dropdown-chevron,
.dropdown-menu-sub-trigger .dropdown-chevron {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
}

/* Dropdown Menu Sub Content */
[data-slot="dropdown-menu-sub-content"],
.dropdown-menu-sub-content {
    position: absolute;
    z-index: 50;
    min-width: 8rem;
    overflow: hidden;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

[data-slot="dropdown-menu-sub-content"][data-state="open"],
.dropdown-menu-sub-content[data-state="open"],
.dropdown-menu-sub-content.open {
    animation: dropdownFadeIn 0.15s ease, dropdownZoomIn 0.15s ease;
}

[data-slot="dropdown-menu-sub-content"][data-state="closed"],
.dropdown-menu-sub-content[data-state="closed"] {
    animation: dropdownFadeOut 0.15s ease, dropdownZoomOut 0.15s ease;
}

/* ========================================
   FORM COMPONENT
   ======================================== */

/* Form Container */
[data-slot="form"],
.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Item - Container for each form field */
[data-slot="form-item"],
.form-item {
    display: grid;
    gap: 0.5rem;
}

/* Form Item Row Layout */
.form-item.form-item-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

/* Form Item with Horizontal Layout */
.form-item.form-item-horizontal {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    align-items: start;
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-item.form-item-horizontal {
        grid-template-columns: 1fr;
    }
}

/* Form Label */
[data-slot="form-label"],
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1;
}

[data-slot="form-label"][data-error="true"],
.form-label[data-error="true"],
.form-label.error {
    color: var(--destructive);
}

/* Form Label Required Indicator */
[data-slot="form-label"][data-required="true"]::after,
.form-label[data-required="true"]::after,
.form-label.required::after {
    content: " *";
    color: var(--destructive);
}

/* Form Control - Wrapper for form inputs */
[data-slot="form-control"],
.form-control {
    display: flex;
    flex-direction: column;
}

/* Form Control with Error */
[data-slot="form-control"][aria-invalid="true"] input,
[data-slot="form-control"][aria-invalid="true"] textarea,
[data-slot="form-control"][aria-invalid="true"] select,
.form-control[aria-invalid="true"] input,
.form-control[aria-invalid="true"] textarea,
.form-control[aria-invalid="true"] select,
.form-control.error input,
.form-control.error textarea,
.form-control.error select {
    border-color: var(--destructive);
}

[data-slot="form-control"][aria-invalid="true"] input:focus,
[data-slot="form-control"][aria-invalid="true"] textarea:focus,
[data-slot="form-control"][aria-invalid="true"] select:focus,
.form-control[aria-invalid="true"] input:focus,
.form-control[aria-invalid="true"] textarea:focus,
.form-control[aria-invalid="true"] select:focus,
.form-control.error input:focus,
.form-control.error textarea:focus,
.form-control.error select:focus {
    border-color: var(--destructive);
    box-shadow: 0 0 0 2px rgba(var(--destructive-rgb, 220, 38, 38), 0.2);
}

/* Form Description */
[data-slot="form-description"],
.form-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Form Message (Error/Success) */
[data-slot="form-message"],
.form-message {
    font-size: 0.875rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Form Message - Error */
[data-slot="form-message"][data-type="error"],
.form-message[data-type="error"],
.form-message.error {
    color: var(--destructive);
}

/* Form Message - Success */
[data-slot="form-message"][data-type="success"],
.form-message[data-type="success"],
.form-message.success {
    color: var(--success, #16a34a);
}

/* Form Message - Warning */
[data-slot="form-message"][data-type="warning"],
.form-message[data-type="warning"],
.form-message.warning {
    color: var(--warning, #ca8a04);
}

/* Form Message Icons */
[data-slot="form-message"] i,
[data-slot="form-message"] svg,
.form-message i,
.form-message svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/* Form Actions - Button container */
.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.form-actions.form-actions-right {
    justify-content: flex-end;
}

.form-actions.form-actions-center {
    justify-content: center;
}

.form-actions.form-actions-between {
    justify-content: space-between;
}

/* Form Section */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Form Section Title */
.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

/* Form Section Description */
.form-section-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Form Grid Layouts */
.form-grid {
    display: grid;
    gap: 1rem;
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   HOVER CARD COMPONENT
   ======================================== */

/* Hover Card Trigger */
[data-slot="hover-card-trigger"],
.hover-card-trigger {
    display: inline-block;
    cursor: pointer;
}

/* Hover Card Content */
[data-slot="hover-card-content"],
.hover-card-content {
    position: absolute;
    z-index: 50;
    width: 16rem;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Hover Card Animations */
[data-slot="hover-card-content"][data-state="open"],
.hover-card-content[data-state="open"],
.hover-card-content.open {
    animation: hoverCardFadeIn 0.15s ease, hoverCardZoomIn 0.15s ease;
}

[data-slot="hover-card-content"][data-state="closed"],
.hover-card-content[data-state="closed"] {
    animation: hoverCardFadeOut 0.15s ease, hoverCardZoomOut 0.15s ease;
}

@keyframes hoverCardFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hoverCardFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hoverCardZoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes hoverCardZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Side-specific slide animations */
[data-slot="hover-card-content"][data-side="bottom"],
.hover-card-content[data-side="bottom"] {
    animation: hoverCardSlideFromTop 0.15s ease, hoverCardFadeIn 0.15s ease;
}

[data-slot="hover-card-content"][data-side="top"],
.hover-card-content[data-side="top"] {
    animation: hoverCardSlideFromBottom 0.15s ease, hoverCardFadeIn 0.15s ease;
}

[data-slot="hover-card-content"][data-side="left"],
.hover-card-content[data-side="left"] {
    animation: hoverCardSlideFromRight 0.15s ease, hoverCardFadeIn 0.15s ease;
}

[data-slot="hover-card-content"][data-side="right"],
.hover-card-content[data-side="right"] {
    animation: hoverCardSlideFromLeft 0.15s ease, hoverCardFadeIn 0.15s ease;
}

@keyframes hoverCardSlideFromTop {
    from { transform: translateY(-0.5rem); }
    to { transform: translateY(0); }
}

@keyframes hoverCardSlideFromBottom {
    from { transform: translateY(0.5rem); }
    to { transform: translateY(0); }
}

@keyframes hoverCardSlideFromLeft {
    from { transform: translateX(-0.5rem); }
    to { transform: translateX(0); }
}

@keyframes hoverCardSlideFromRight {
    from { transform: translateX(0.5rem); }
    to { transform: translateX(0); }
}

/* Hover Card Alignment */
[data-slot="hover-card-content"][data-align="start"],
.hover-card-content[data-align="start"] {
    /* Aligned to start */
}

[data-slot="hover-card-content"][data-align="center"],
.hover-card-content[data-align="center"] {
    /* Centered */
}

[data-slot="hover-card-content"][data-align="end"],
.hover-card-content[data-align="end"] {
    /* Aligned to end */
}

/* ========================================
   INPUT OTP COMPONENT
   ======================================== */

/* Input OTP Container */
[data-slot="input-otp"],
.input-otp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-slot="input-otp"].disabled,
.input-otp.disabled,
.input-otp:has(:disabled) {
    opacity: 0.5;
}

/* Input OTP Group */
[data-slot="input-otp-group"],
.input-otp-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Input OTP Slot */
[data-slot="input-otp-slot"],
.input-otp-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--input);
    border-left: none;
    background-color: var(--input-background, var(--background));
    font-size: 0.875rem;
    transition: all 0.15s ease;
    outline: none;
}

.dark [data-slot="input-otp-slot"],
.dark .input-otp-slot {
    background-color: rgba(var(--input-rgb, 39, 39, 42), 0.3);
}

[data-slot="input-otp-slot"]:first-child,
.input-otp-slot:first-child {
    border-left: 1px solid var(--input);
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

[data-slot="input-otp-slot"]:last-child,
.input-otp-slot:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Active Slot */
[data-slot="input-otp-slot"][data-active="true"],
.input-otp-slot[data-active="true"],
.input-otp-slot.active {
    z-index: 10;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Invalid Slot */
[data-slot="input-otp-slot"][aria-invalid="true"],
.input-otp-slot[aria-invalid="true"],
.input-otp-slot.invalid {
    border-color: var(--destructive);
}

[data-slot="input-otp-slot"][data-active="true"][aria-invalid="true"],
.input-otp-slot[data-active="true"][aria-invalid="true"],
.input-otp-slot.active.invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 220, 38, 38), 0.2);
}

.dark [data-slot="input-otp-slot"][data-active="true"][aria-invalid="true"],
.dark .input-otp-slot[data-active="true"][aria-invalid="true"],
.dark .input-otp-slot.active.invalid {
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 220, 38, 38), 0.4);
}

/* Caret Animation */
.input-otp-caret {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.input-otp-caret-line {
    width: 1px;
    height: 1rem;
    background-color: var(--foreground);
    animation: caretBlink 1s step-end infinite;
}

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Input OTP Separator */
[data-slot="input-otp-separator"],
.input-otp-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
}

[data-slot="input-otp-separator"] svg,
[data-slot="input-otp-separator"] i,
.input-otp-separator svg,
.input-otp-separator i {
    width: 1rem;
    height: 1rem;
}

/* ========================================
   INPUT COMPONENT
   ======================================== */

/* Base Input */
[data-slot="input"],
input.input,
.input-field {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 2.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--input-background, var(--background));
    border: 1px solid var(--input);
    border-radius: 0.375rem;
    color: var(--foreground);
    transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    outline: none;
}

@media (min-width: 768px) {
    [data-slot="input"],
    input.input,
    .input-field {
        font-size: 0.875rem;
    }
}

.dark [data-slot="input"],
.dark input.input,
.dark .input-field {
    background-color: rgba(var(--input-rgb, 39, 39, 42), 0.3);
}

/* Placeholder */
[data-slot="input"]::placeholder,
input.input::placeholder,
.input-field::placeholder {
    color: var(--muted-foreground);
}

/* Selection */
[data-slot="input"]::selection,
input.input::selection,
.input-field::selection {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Focus State */
[data-slot="input"]:focus-visible,
input.input:focus-visible,
.input-field:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Invalid State */
[data-slot="input"][aria-invalid="true"],
input.input[aria-invalid="true"],
.input-field[aria-invalid="true"],
[data-slot="input"].invalid,
input.input.invalid,
.input-field.invalid {
    border-color: var(--destructive);
}

[data-slot="input"][aria-invalid="true"]:focus-visible,
input.input[aria-invalid="true"]:focus-visible,
.input-field[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 220, 38, 38), 0.2);
}

.dark [data-slot="input"][aria-invalid="true"]:focus-visible,
.dark input.input[aria-invalid="true"]:focus-visible,
.dark .input-field[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 220, 38, 38), 0.4);
}

/* Disabled State */
[data-slot="input"]:disabled,
input.input:disabled,
.input-field:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

/* File Input */
[data-slot="input"][type="file"],
input.input[type="file"],
.input-field[type="file"] {
    color: var(--foreground);
}

[data-slot="input"][type="file"]::file-selector-button,
input.input[type="file"]::file-selector-button,
.input-field[type="file"]::file-selector-button {
    display: inline-flex;
    height: 1.75rem;
    border: 0;
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    cursor: pointer;
}

/* Input Sizes */
[data-slot="input"].input-sm,
input.input.input-sm,
.input-field.input-sm {
    height: 2rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
}

[data-slot="input"].input-lg,
input.input.input-lg,
.input-field.input-lg {
    height: 2.75rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* ========================================
   LABEL COMPONENT
   ======================================== */

/* Base Label */
[data-slot="label"],
label.label,
.label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
    user-select: none;
}

/* Label in disabled group */
[data-disabled="true"] [data-slot="label"],
.group[data-disabled="true"] .label,
.disabled [data-slot="label"],
.disabled .label {
    pointer-events: none;
    opacity: 0.5;
}

/* Label when peer is disabled */
:disabled + [data-slot="label"],
:disabled + .label,
:disabled ~ [data-slot="label"],
:disabled ~ .label {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Required indicator */
[data-slot="label"][data-required="true"]::after,
.label[data-required="true"]::after,
.label.required::after {
    content: " *";
    color: var(--destructive);
}

/* Error state */
[data-slot="label"][data-error="true"],
.label[data-error="true"],
.label.error {
    color: var(--destructive);
}

/* ========================================
   MENUBAR COMPONENT
   ======================================== */

/* Menubar Root */
[data-slot="menubar"],
.menubar {
    display: flex;
    height: 2.25rem;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Menubar Menu */
[data-slot="menubar-menu"],
.menubar-menu {
    position: relative;
}

/* Menubar Trigger */
[data-slot="menubar-trigger"],
.menubar-trigger {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.125rem;
    outline: none;
    user-select: none;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="menubar-trigger"]:focus,
[data-slot="menubar-trigger"]:hover,
.menubar-trigger:focus,
.menubar-trigger:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="menubar-trigger"][data-state="open"],
.menubar-trigger[data-state="open"],
.menubar-trigger.open {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Menubar Content */
[data-slot="menubar-content"],
.menubar-content {
    position: absolute;
    z-index: 50;
    min-width: 12rem;
    overflow: hidden;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Menubar Content Animations */
[data-slot="menubar-content"][data-state="open"],
.menubar-content[data-state="open"],
.menubar-content.open {
    animation: menubarFadeIn 0.15s ease, menubarZoomIn 0.15s ease;
}

[data-slot="menubar-content"][data-state="closed"],
.menubar-content[data-state="closed"] {
    animation: menubarFadeOut 0.15s ease, menubarZoomOut 0.15s ease;
}

@keyframes menubarFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes menubarFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes menubarZoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes menubarZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Side-specific animations */
[data-slot="menubar-content"][data-side="bottom"],
.menubar-content[data-side="bottom"] {
    animation: menubarSlideFromTop 0.15s ease, menubarFadeIn 0.15s ease;
}

[data-slot="menubar-content"][data-side="top"],
.menubar-content[data-side="top"] {
    animation: menubarSlideFromBottom 0.15s ease, menubarFadeIn 0.15s ease;
}

@keyframes menubarSlideFromTop {
    from { transform: translateY(-0.5rem); }
    to { transform: translateY(0); }
}

@keyframes menubarSlideFromBottom {
    from { transform: translateY(0.5rem); }
    to { transform: translateY(0); }
}

/* Menubar Group */
[data-slot="menubar-group"],
.menubar-group {
    display: flex;
    flex-direction: column;
}

/* Menubar Label */
[data-slot="menubar-label"],
.menubar-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

[data-slot="menubar-label"][data-inset="true"],
.menubar-label[data-inset="true"],
.menubar-label.inset {
    padding-left: 2rem;
}

/* Menubar Item */
[data-slot="menubar-item"],
.menubar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="menubar-item"]:focus,
[data-slot="menubar-item"]:hover,
.menubar-item:focus,
.menubar-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="menubar-item"][data-disabled],
.menubar-item[data-disabled],
.menubar-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="menubar-item"][data-inset="true"],
.menubar-item[data-inset="true"],
.menubar-item.inset {
    padding-left: 2rem;
}

/* Menubar Item - Destructive Variant */
[data-slot="menubar-item"][data-variant="destructive"],
.menubar-item[data-variant="destructive"],
.menubar-item.destructive {
    color: var(--destructive);
}

[data-slot="menubar-item"][data-variant="destructive"]:focus,
[data-slot="menubar-item"][data-variant="destructive"]:hover,
.menubar-item[data-variant="destructive"]:focus,
.menubar-item[data-variant="destructive"]:hover {
    background-color: rgba(var(--destructive-rgb, 220, 38, 38), 0.1);
    color: var(--destructive);
}

.dark [data-slot="menubar-item"][data-variant="destructive"]:focus,
.dark [data-slot="menubar-item"][data-variant="destructive"]:hover,
.dark .menubar-item[data-variant="destructive"]:focus,
.dark .menubar-item[data-variant="destructive"]:hover {
    background-color: rgba(var(--destructive-rgb, 220, 38, 38), 0.2);
}

/* Menubar Item Icons */
[data-slot="menubar-item"] svg,
[data-slot="menubar-item"] i,
.menubar-item svg,
.menubar-item i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
    color: var(--muted-foreground);
}

[data-slot="menubar-item"][data-variant="destructive"] svg,
[data-slot="menubar-item"][data-variant="destructive"] i,
.menubar-item[data-variant="destructive"] svg,
.menubar-item[data-variant="destructive"] i {
    color: var(--destructive);
}

/* Menubar Checkbox Item */
[data-slot="menubar-checkbox-item"],
.menubar-checkbox-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="menubar-checkbox-item"]:focus,
[data-slot="menubar-checkbox-item"]:hover,
.menubar-checkbox-item:focus,
.menubar-checkbox-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="menubar-checkbox-item"][data-disabled],
.menubar-checkbox-item[data-disabled],
.menubar-checkbox-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Checkbox Item Indicator */
.menubar-checkbox-item .menubar-item-indicator,
[data-slot="menubar-checkbox-item"] .menubar-item-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    width: 0.875rem;
    height: 0.875rem;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.menubar-checkbox-item .menubar-item-indicator svg,
.menubar-checkbox-item .menubar-item-indicator i,
[data-slot="menubar-checkbox-item"] .menubar-item-indicator svg,
[data-slot="menubar-checkbox-item"] .menubar-item-indicator i {
    width: 1rem;
    height: 1rem;
}

/* Hide indicator when not checked */
[data-slot="menubar-checkbox-item"]:not([data-checked="true"]) .menubar-item-indicator,
.menubar-checkbox-item:not(.checked) .menubar-item-indicator {
    visibility: hidden;
}

[data-slot="menubar-checkbox-item"][data-checked="true"] .menubar-item-indicator,
.menubar-checkbox-item.checked .menubar-item-indicator {
    visibility: visible;
}

/* Menubar Radio Group */
[data-slot="menubar-radio-group"],
.menubar-radio-group {
    display: flex;
    flex-direction: column;
}

/* Menubar Radio Item */
[data-slot="menubar-radio-item"],
.menubar-radio-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 2rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="menubar-radio-item"]:focus,
[data-slot="menubar-radio-item"]:hover,
.menubar-radio-item:focus,
.menubar-radio-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="menubar-radio-item"][data-disabled],
.menubar-radio-item[data-disabled],
.menubar-radio-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Radio Item Indicator */
.menubar-radio-item .menubar-item-indicator,
[data-slot="menubar-radio-item"] .menubar-item-indicator {
    position: absolute;
    left: 0.5rem;
    display: flex;
    width: 0.875rem;
    height: 0.875rem;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.menubar-radio-item .menubar-item-indicator svg,
.menubar-radio-item .menubar-item-indicator i,
[data-slot="menubar-radio-item"] .menubar-item-indicator svg,
[data-slot="menubar-radio-item"] .menubar-item-indicator i {
    width: 0.5rem;
    height: 0.5rem;
    fill: currentColor;
}

/* Hide indicator when not selected */
[data-slot="menubar-radio-item"]:not([data-checked="true"]) .menubar-item-indicator,
.menubar-radio-item:not(.checked) .menubar-item-indicator {
    visibility: hidden;
}

[data-slot="menubar-radio-item"][data-checked="true"] .menubar-item-indicator,
.menubar-radio-item.checked .menubar-item-indicator {
    visibility: visible;
}

/* Menubar Separator */
[data-slot="menubar-separator"],
.menubar-separator {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background-color: var(--border);
}

/* Menubar Shortcut */
[data-slot="menubar-shortcut"],
.menubar-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

/* Menubar Sub Trigger */
[data-slot="menubar-sub-trigger"],
.menubar-sub-trigger {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    cursor: default;
    outline: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="menubar-sub-trigger"]:focus,
[data-slot="menubar-sub-trigger"]:hover,
.menubar-sub-trigger:focus,
.menubar-sub-trigger:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="menubar-sub-trigger"][data-state="open"],
.menubar-sub-trigger[data-state="open"],
.menubar-sub-trigger.open {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="menubar-sub-trigger"][data-inset="true"],
.menubar-sub-trigger[data-inset="true"],
.menubar-sub-trigger.inset {
    padding-left: 2rem;
}

/* Sub Trigger Chevron */
[data-slot="menubar-sub-trigger"] .menubar-chevron,
.menubar-sub-trigger .menubar-chevron {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
}

/* Menubar Sub Content */
[data-slot="menubar-sub-content"],
.menubar-sub-content {
    position: absolute;
    z-index: 50;
    min-width: 8rem;
    overflow: hidden;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

[data-slot="menubar-sub-content"][data-state="open"],
.menubar-sub-content[data-state="open"],
.menubar-sub-content.open {
    animation: menubarFadeIn 0.15s ease, menubarZoomIn 0.15s ease;
}

[data-slot="menubar-sub-content"][data-state="closed"],
.menubar-sub-content[data-state="closed"] {
    animation: menubarFadeOut 0.15s ease, menubarZoomOut 0.15s ease;
}

/* ========================================
   NAVIGATION MENU COMPONENT
   ======================================== */

/* Navigation Menu Root */
[data-slot="navigation-menu"],
.navigation-menu {
    position: relative;
    display: flex;
    max-width: max-content;
    flex: 1;
    align-items: center;
    justify-content: center;
}

/* Navigation Menu List */
[data-slot="navigation-menu-list"],
.navigation-menu-list {
    display: flex;
    flex: 1;
    list-style: none;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

/* Navigation Menu Item */
[data-slot="navigation-menu-item"],
.navigation-menu-item {
    position: relative;
}

/* Navigation Menu Trigger */
[data-slot="navigation-menu-trigger"],
.navigation-menu-trigger {
    display: inline-flex;
    height: 2.25rem;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--background);
    border: none;
    border-radius: 0.375rem;
    outline: none;
    cursor: pointer;
    transition: color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

[data-slot="navigation-menu-trigger"]:hover,
.navigation-menu-trigger:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="navigation-menu-trigger"]:focus,
.navigation-menu-trigger:focus {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="navigation-menu-trigger"]:focus-visible,
.navigation-menu-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
    outline: 1px solid transparent;
}

[data-slot="navigation-menu-trigger"]:disabled,
.navigation-menu-trigger:disabled {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="navigation-menu-trigger"][data-state="open"],
.navigation-menu-trigger[data-state="open"],
.navigation-menu-trigger.open {
    background-color: rgba(var(--accent-rgb, 240, 240, 240), 0.5);
    color: var(--accent-foreground);
}

[data-slot="navigation-menu-trigger"][data-state="open"]:hover,
[data-slot="navigation-menu-trigger"][data-state="open"]:focus,
.navigation-menu-trigger[data-state="open"]:hover,
.navigation-menu-trigger[data-state="open"]:focus {
    background-color: var(--accent);
}

/* Trigger Chevron */
[data-slot="navigation-menu-trigger"] .nav-chevron,
.navigation-menu-trigger .nav-chevron {
    position: relative;
    top: 1px;
    margin-left: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.3s ease;
}

[data-slot="navigation-menu-trigger"][data-state="open"] .nav-chevron,
.navigation-menu-trigger[data-state="open"] .nav-chevron,
.navigation-menu-trigger.open .nav-chevron {
    transform: rotate(180deg);
}

/* Navigation Menu Content */
[data-slot="navigation-menu-content"],
.navigation-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem;
    padding-right: 0.625rem;
}

@media (min-width: 768px) {
    [data-slot="navigation-menu-content"],
    .navigation-menu-content {
        position: absolute;
        width: auto;
    }
}

/* Content Animations */
[data-slot="navigation-menu-content"][data-motion="from-start"],
.navigation-menu-content[data-motion="from-start"] {
    animation: navSlideInFromLeft 0.2s ease;
}

[data-slot="navigation-menu-content"][data-motion="from-end"],
.navigation-menu-content[data-motion="from-end"] {
    animation: navSlideInFromRight 0.2s ease;
}

[data-slot="navigation-menu-content"][data-motion="to-start"],
.navigation-menu-content[data-motion="to-start"] {
    animation: navSlideOutToLeft 0.2s ease;
}

[data-slot="navigation-menu-content"][data-motion="to-end"],
.navigation-menu-content[data-motion="to-end"] {
    animation: navSlideOutToRight 0.2s ease;
}

@keyframes navSlideInFromLeft {
    from { opacity: 0; transform: translateX(-13rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes navSlideInFromRight {
    from { opacity: 0; transform: translateX(13rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes navSlideOutToLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-13rem); }
}

@keyframes navSlideOutToRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(13rem); }
}

/* Content when viewport is disabled */
[data-slot="navigation-menu"][data-viewport="false"] [data-slot="navigation-menu-content"],
.navigation-menu[data-viewport="false"] .navigation-menu-content {
    background-color: var(--popover);
    color: var(--popover-foreground);
    top: 100%;
    margin-top: 0.375rem;
    overflow: hidden;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

[data-slot="navigation-menu"][data-viewport="false"] [data-slot="navigation-menu-content"][data-state="open"],
.navigation-menu[data-viewport="false"] .navigation-menu-content[data-state="open"] {
    animation: navFadeIn 0.2s ease, navZoomIn 0.2s ease;
}

[data-slot="navigation-menu"][data-viewport="false"] [data-slot="navigation-menu-content"][data-state="closed"],
.navigation-menu[data-viewport="false"] .navigation-menu-content[data-state="closed"] {
    animation: navFadeOut 0.2s ease, navZoomOut 0.2s ease;
}

@keyframes navFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes navFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes navZoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes navZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Navigation Menu Viewport Container */
.navigation-menu-viewport-container {
    position: absolute;
    top: 100%;
    left: 0;
    isolation: isolate;
    z-index: 50;
    display: flex;
    justify-content: center;
}

/* Navigation Menu Viewport */
[data-slot="navigation-menu-viewport"],
.navigation-menu-viewport {
    position: relative;
    transform-origin: top center;
    margin-top: 0.375rem;
    width: 100%;
    overflow: hidden;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: var(--navigation-menu-viewport-height, auto);
}

@media (min-width: 768px) {
    [data-slot="navigation-menu-viewport"],
    .navigation-menu-viewport {
        width: var(--navigation-menu-viewport-width, auto);
    }
}

[data-slot="navigation-menu-viewport"][data-state="open"],
.navigation-menu-viewport[data-state="open"],
.navigation-menu-viewport.open {
    animation: navFadeIn 0.2s ease, navViewportZoomIn 0.2s ease;
}

[data-slot="navigation-menu-viewport"][data-state="closed"],
.navigation-menu-viewport[data-state="closed"] {
    animation: navFadeOut 0.2s ease, navViewportZoomOut 0.2s ease;
}

@keyframes navViewportZoomIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

@keyframes navViewportZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Navigation Menu Link */
[data-slot="navigation-menu-link"],
.navigation-menu-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    outline: none;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

[data-slot="navigation-menu-link"]:hover,
.navigation-menu-link:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="navigation-menu-link"]:focus,
.navigation-menu-link:focus {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="navigation-menu-link"]:focus-visible,
.navigation-menu-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
    outline: 1px solid transparent;
}

[data-slot="navigation-menu-link"][data-active="true"],
.navigation-menu-link[data-active="true"],
.navigation-menu-link.active {
    background-color: rgba(var(--accent-rgb, 240, 240, 240), 0.5);
    color: var(--accent-foreground);
}

[data-slot="navigation-menu-link"][data-active="true"]:hover,
[data-slot="navigation-menu-link"][data-active="true"]:focus,
.navigation-menu-link[data-active="true"]:hover,
.navigation-menu-link[data-active="true"]:focus {
    background-color: var(--accent);
}

/* Link Icons */
[data-slot="navigation-menu-link"] svg,
[data-slot="navigation-menu-link"] i,
.navigation-menu-link svg,
.navigation-menu-link i {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
}

/* Navigation Menu Indicator */
[data-slot="navigation-menu-indicator"],
.navigation-menu-indicator {
    display: flex;
    height: 0.375rem;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    top: 100%;
    z-index: 1;
}

[data-slot="navigation-menu-indicator"][data-state="visible"],
.navigation-menu-indicator[data-state="visible"],
.navigation-menu-indicator.visible {
    animation: navFadeIn 0.2s ease;
}

[data-slot="navigation-menu-indicator"][data-state="hidden"],
.navigation-menu-indicator[data-state="hidden"] {
    animation: navFadeOut 0.2s ease;
}

/* Indicator Arrow */
.navigation-menu-indicator-arrow {
    position: relative;
    top: 60%;
    width: 0.5rem;
    height: 0.5rem;
    transform: rotate(45deg);
    border-top-left-radius: 0.125rem;
    background-color: var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ========================================
   PAGINATION COMPONENT
   ======================================== */

/* Pagination Container */
[data-slot="pagination"],
.pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* Pagination Content */
[data-slot="pagination-content"],
.pagination-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Pagination Item */
[data-slot="pagination-item"],
.pagination-item {
    list-style: none;
}

/* Pagination Link */
[data-slot="pagination-link"],
.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background: transparent;
    border: none;
    color: var(--foreground);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="pagination-link"]:hover,
.pagination-link:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="pagination-link"]:focus-visible,
.pagination-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Active Pagination Link */
[data-slot="pagination-link"][data-active="true"],
[data-slot="pagination-link"][aria-current="page"],
.pagination-link[data-active="true"],
.pagination-link.active {
    border: 1px solid var(--border);
    background-color: var(--background);
}

[data-slot="pagination-link"][data-active="true"]:hover,
[data-slot="pagination-link"][aria-current="page"]:hover,
.pagination-link[data-active="true"]:hover,
.pagination-link.active:hover {
    background-color: var(--accent);
}

/* Pagination Previous/Next */
.pagination-previous,
.pagination-next {
    gap: 0.25rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

@media (min-width: 640px) {
    .pagination-previous {
        padding-left: 0.625rem;
    }
    
    .pagination-next {
        padding-right: 0.625rem;
    }
}

.pagination-previous span,
.pagination-next span {
    display: none;
}

@media (min-width: 640px) {
    .pagination-previous span,
    .pagination-next span {
        display: block;
    }
}

/* Pagination Previous/Next Icons */
.pagination-previous i,
.pagination-previous svg,
.pagination-next i,
.pagination-next svg {
    width: 1rem;
    height: 1rem;
}

/* Pagination Ellipsis */
[data-slot="pagination-ellipsis"],
.pagination-ellipsis {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
}

[data-slot="pagination-ellipsis"] i,
[data-slot="pagination-ellipsis"] svg,
.pagination-ellipsis i,
.pagination-ellipsis svg {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
}

/* Screen reader only text */
.pagination-ellipsis .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   POPOVER COMPONENT
   ======================================== */

/* Popover Trigger */
[data-slot="popover-trigger"],
.popover-trigger {
    display: inline-flex;
    cursor: pointer;
}

/* Popover Anchor */
[data-slot="popover-anchor"],
.popover-anchor {
    display: inline-block;
}

/* Popover Content */
[data-slot="popover-content"],
.popover-content {
    position: absolute;
    z-index: 50;
    width: 18rem;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Popover Animations */
[data-slot="popover-content"][data-state="open"],
.popover-content[data-state="open"],
.popover-content.open {
    animation: popoverFadeIn 0.15s ease, popoverZoomIn 0.15s ease;
}

[data-slot="popover-content"][data-state="closed"],
.popover-content[data-state="closed"] {
    animation: popoverFadeOut 0.15s ease, popoverZoomOut 0.15s ease;
}

@keyframes popoverFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popoverFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes popoverZoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes popoverZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Side-specific slide animations */
[data-slot="popover-content"][data-side="bottom"],
.popover-content[data-side="bottom"] {
    animation: popoverSlideFromTop 0.15s ease, popoverFadeIn 0.15s ease;
}

[data-slot="popover-content"][data-side="top"],
.popover-content[data-side="top"] {
    animation: popoverSlideFromBottom 0.15s ease, popoverFadeIn 0.15s ease;
}

[data-slot="popover-content"][data-side="left"],
.popover-content[data-side="left"] {
    animation: popoverSlideFromRight 0.15s ease, popoverFadeIn 0.15s ease;
}

[data-slot="popover-content"][data-side="right"],
.popover-content[data-side="right"] {
    animation: popoverSlideFromLeft 0.15s ease, popoverFadeIn 0.15s ease;
}

@keyframes popoverSlideFromTop {
    from { transform: translateY(-0.5rem); }
    to { transform: translateY(0); }
}

@keyframes popoverSlideFromBottom {
    from { transform: translateY(0.5rem); }
    to { transform: translateY(0); }
}

@keyframes popoverSlideFromLeft {
    from { transform: translateX(-0.5rem); }
    to { transform: translateX(0); }
}

@keyframes popoverSlideFromRight {
    from { transform: translateX(0.5rem); }
    to { transform: translateX(0); }
}

/* Popover Alignment */
[data-slot="popover-content"][data-align="start"],
.popover-content[data-align="start"] {
    /* Left aligned */
}

[data-slot="popover-content"][data-align="center"],
.popover-content[data-align="center"] {
    /* Center aligned */
}

[data-slot="popover-content"][data-align="end"],
.popover-content[data-align="end"] {
    /* Right aligned */
}

/* Popover Arrow (optional) */
.popover-arrow {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--popover);
    border: 1px solid var(--border);
    transform: rotate(45deg);
}

.popover-content[data-side="bottom"] .popover-arrow {
    top: -0.25rem;
    border-right: none;
    border-bottom: none;
}

.popover-content[data-side="top"] .popover-arrow {
    bottom: -0.25rem;
    border-left: none;
    border-top: none;
}

.popover-content[data-side="left"] .popover-arrow {
    right: -0.25rem;
    border-left: none;
    border-bottom: none;
}

.popover-content[data-side="right"] .popover-arrow {
    left: -0.25rem;
    border-right: none;
    border-top: none;
}

/* ========================================
   PROGRESS COMPONENT
   ======================================== */

/* Progress Container */
[data-slot="progress"],
.progress {
    position: relative;
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background-color: rgba(var(--primary-rgb, 21, 128, 61), 0.2);
}

/* Progress Indicator */
[data-slot="progress-indicator"],
.progress-indicator {
    height: 100%;
    width: 100%;
    flex: 1 1 0%;
    background-color: var(--primary);
    transition: transform 0.3s ease;
}

/* Progress Variants */
.progress-sm {
    height: 0.25rem;
}

.progress-md {
    height: 0.5rem;
}

.progress-lg {
    height: 0.75rem;
}

.progress-xl {
    height: 1rem;
}

/* Progress Colors */
.progress-secondary {
    background-color: rgba(var(--secondary-rgb, 100, 116, 139), 0.2);
}

.progress-secondary .progress-indicator {
    background-color: var(--secondary);
}

.progress-destructive {
    background-color: rgba(var(--destructive-rgb, 239, 68, 68), 0.2);
}

.progress-destructive .progress-indicator {
    background-color: var(--destructive);
}

.progress-success {
    background-color: rgba(34, 197, 94, 0.2);
}

.progress-success .progress-indicator {
    background-color: #22c55e;
}

.progress-warning {
    background-color: rgba(234, 179, 8, 0.2);
}

.progress-warning .progress-indicator {
    background-color: #eab308;
}

/* Progress with Label */
.progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.progress-label-text {
    font-weight: 500;
    color: var(--foreground);
}

.progress-label-value {
    font-weight: 500;
}

/* Indeterminate Progress */
.progress-indeterminate .progress-indicator {
    width: 50%;
    animation: progressIndeterminate 1.5s ease-in-out infinite;
}

@keyframes progressIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Striped Progress */
.progress-striped .progress-indicator {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.progress-striped.progress-animated .progress-indicator {
    animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* ========================================
   RADIO GROUP COMPONENT
   ======================================== */

/* Radio Group Container */
[data-slot="radio-group"],
.radio-group {
    display: grid;
    gap: 0.75rem;
}

/* Radio Group Horizontal */
.radio-group-horizontal {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* Radio Group Item Wrapper */
.radio-group-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Radio Group Item */
[data-slot="radio-group-item"],
.radio-group-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid var(--input);
    background-color: transparent;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dark [data-slot="radio-group-item"],
.dark .radio-group-item {
    background-color: rgba(var(--input-rgb, 55, 65, 81), 0.3);
}

/* Radio Group Item Focus */
[data-slot="radio-group-item"]:focus-visible,
.radio-group-item:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Radio Group Item Checked */
[data-slot="radio-group-item"]:checked,
[data-slot="radio-group-item"][data-state="checked"],
.radio-group-item:checked,
.radio-group-item[data-state="checked"] {
    border-color: var(--primary);
}

/* Radio Group Item Disabled */
[data-slot="radio-group-item"]:disabled,
.radio-group-item:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Radio Group Item Invalid */
[data-slot="radio-group-item"][aria-invalid="true"],
.radio-group-item[aria-invalid="true"],
.radio-group-item.invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 239, 68, 68), 0.2);
}

.dark [data-slot="radio-group-item"][aria-invalid="true"],
.dark .radio-group-item[aria-invalid="true"],
.dark .radio-group-item.invalid {
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 239, 68, 68), 0.4);
}

/* Radio Group Indicator */
[data-slot="radio-group-indicator"],
.radio-group-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Radio Group Indicator Inner Circle */
[data-slot="radio-group-item"]:checked::after,
[data-slot="radio-group-item"][data-state="checked"]::after,
.radio-group-item:checked::after,
.radio-group-item[data-state="checked"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--primary);
    transform: translate(-50%, -50%);
}

/* Radio Group Label */
.radio-group-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
    cursor: pointer;
}

.radio-group-label.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Radio Group Description */
.radio-group-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}

/* ========================================
   RESIZABLE COMPONENT
   ======================================== */

/* Resizable Panel Group */
[data-slot="resizable-panel-group"],
.resizable-panel-group {
    display: flex;
    height: 100%;
    width: 100%;
}

[data-slot="resizable-panel-group"][data-panel-group-direction="vertical"],
.resizable-panel-group[data-direction="vertical"],
.resizable-panel-group-vertical {
    flex-direction: column;
}

/* Resizable Panel */
[data-slot="resizable-panel"],
.resizable-panel {
    overflow: auto;
}

/* Resizable Handle */
[data-slot="resizable-handle"],
.resizable-handle {
    position: relative;
    display: flex;
    width: 1px;
    align-items: center;
    justify-content: center;
    background-color: var(--border);
    outline: none;
    cursor: col-resize;
}

[data-slot="resizable-handle"]::after,
.resizable-handle::after {
    content: '';
    position: absolute;
    inset: 0 auto;
    left: 50%;
    width: 0.25rem;
    transform: translateX(-50%);
}

/* Resizable Handle Focus */
[data-slot="resizable-handle"]:focus-visible,
.resizable-handle:focus-visible {
    box-shadow: 0 0 0 1px var(--ring);
    outline: none;
}

/* Vertical Direction Handle */
[data-slot="resizable-handle"][data-panel-group-direction="vertical"],
.resizable-handle[data-direction="vertical"],
.resizable-handle-vertical {
    width: 100%;
    height: 1px;
    cursor: row-resize;
}

[data-slot="resizable-handle"][data-panel-group-direction="vertical"]::after,
.resizable-handle[data-direction="vertical"]::after,
.resizable-handle-vertical::after {
    left: 0;
    width: 100%;
    height: 0.25rem;
    transform: translateY(-50%);
}

/* Resizable Handle with Grip */
.resizable-handle-grip {
    z-index: 10;
    display: flex;
    height: 1rem;
    width: 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.125rem;
    border: 1px solid var(--border);
    background-color: var(--border);
}

.resizable-handle-grip i,
.resizable-handle-grip svg {
    width: 0.625rem;
    height: 0.625rem;
    color: var(--muted-foreground);
}

/* Vertical Handle Grip Rotation */
[data-slot="resizable-handle"][data-panel-group-direction="vertical"] .resizable-handle-grip,
.resizable-handle[data-direction="vertical"] .resizable-handle-grip,
.resizable-handle-vertical .resizable-handle-grip {
    transform: rotate(90deg);
}

/* Resizable Handle Hover */
[data-slot="resizable-handle"]:hover,
.resizable-handle:hover {
    background-color: var(--primary);
}

[data-slot="resizable-handle"]:hover .resizable-handle-grip,
.resizable-handle:hover .resizable-handle-grip {
    background-color: var(--primary);
    border-color: var(--primary);
}

[data-slot="resizable-handle"]:hover .resizable-handle-grip i,
[data-slot="resizable-handle"]:hover .resizable-handle-grip svg,
.resizable-handle:hover .resizable-handle-grip i,
.resizable-handle:hover .resizable-handle-grip svg {
    color: var(--primary-foreground);
}

/* ========================================
   SCROLL AREA COMPONENT
   ======================================== */

/* Scroll Area Container */
[data-slot="scroll-area"],
.scroll-area {
    position: relative;
    overflow: hidden;
}

/* Scroll Area Viewport */
[data-slot="scroll-area-viewport"],
.scroll-area-viewport {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    transition: color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

[data-slot="scroll-area-viewport"]::-webkit-scrollbar,
.scroll-area-viewport::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

[data-slot="scroll-area-viewport"]:focus-visible,
.scroll-area-viewport:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
    outline: 1px solid transparent;
}

/* Scroll Area Scrollbar */
[data-slot="scroll-area-scrollbar"],
.scroll-area-scrollbar {
    display: flex;
    touch-action: none;
    padding: 1px;
    transition: background-color 0.15s ease;
    user-select: none;
}

/* Vertical Scrollbar */
[data-slot="scroll-area-scrollbar"][data-orientation="vertical"],
.scroll-area-scrollbar-vertical {
    height: 100%;
    width: 0.625rem;
    border-left: 1px solid transparent;
    position: absolute;
    right: 0;
    top: 0;
}

/* Horizontal Scrollbar */
[data-slot="scroll-area-scrollbar"][data-orientation="horizontal"],
.scroll-area-scrollbar-horizontal {
    height: 0.625rem;
    width: 100%;
    flex-direction: column;
    border-top: 1px solid transparent;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Scroll Area Thumb */
[data-slot="scroll-area-thumb"],
.scroll-area-thumb {
    position: relative;
    flex: 1;
    border-radius: 9999px;
    background-color: var(--border);
    transition: background-color 0.15s ease;
}

[data-slot="scroll-area-thumb"]:hover,
.scroll-area-thumb:hover {
    background-color: var(--muted-foreground);
}

/* Scroll Area Corner */
.scroll-area-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--border);
}

/* ========================================
   SELECT COMPONENT
   ======================================== */

/* Select Trigger */
[data-slot="select-trigger"],
.select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--input);
    background-color: var(--input-background, transparent);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    outline: none;
    cursor: pointer;
}

[data-slot="select-trigger"][data-size="default"],
.select-trigger {
    height: 2.25rem;
}

[data-slot="select-trigger"][data-size="sm"],
.select-trigger-sm {
    height: 2rem;
}

.dark [data-slot="select-trigger"],
.dark .select-trigger {
    background-color: rgba(var(--input-rgb, 55, 65, 81), 0.3);
}

.dark [data-slot="select-trigger"]:hover,
.dark .select-trigger:hover {
    background-color: rgba(var(--input-rgb, 55, 65, 81), 0.5);
}

/* Select Trigger Placeholder */
[data-slot="select-trigger"][data-placeholder],
.select-trigger.placeholder {
    color: var(--muted-foreground);
}

/* Select Trigger Focus */
[data-slot="select-trigger"]:focus-visible,
.select-trigger:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Select Trigger Disabled */
[data-slot="select-trigger"]:disabled,
.select-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Select Trigger Invalid */
[data-slot="select-trigger"][aria-invalid="true"],
.select-trigger.invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 239, 68, 68), 0.2);
}

.dark [data-slot="select-trigger"][aria-invalid="true"],
.dark .select-trigger.invalid {
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 239, 68, 68), 0.4);
}

/* Select Trigger Icon */
[data-slot="select-trigger"] i,
[data-slot="select-trigger"] svg,
.select-trigger i,
.select-trigger svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
    color: var(--muted-foreground);
}

.select-trigger-icon {
    opacity: 0.5;
}

/* Select Value */
[data-slot="select-value"],
.select-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

/* Select Content */
[data-slot="select-content"],
.select-content {
    position: absolute;
    z-index: 50;
    min-width: 8rem;
    max-height: 20rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Select Content Animations */
[data-slot="select-content"][data-state="open"],
.select-content[data-state="open"],
.select-content.open {
    animation: selectFadeIn 0.15s ease, selectZoomIn 0.15s ease;
}

[data-slot="select-content"][data-state="closed"],
.select-content[data-state="closed"] {
    animation: selectFadeOut 0.15s ease, selectZoomOut 0.15s ease;
}

@keyframes selectFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes selectFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes selectZoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

@keyframes selectZoomOut {
    from { transform: scale(1); }
    to { transform: scale(0.95); }
}

/* Select Content Slide Animations */
[data-slot="select-content"][data-side="bottom"],
.select-content[data-side="bottom"] {
    animation: selectSlideFromTop 0.15s ease, selectFadeIn 0.15s ease;
    transform: translateY(0.25rem);
}

[data-slot="select-content"][data-side="top"],
.select-content[data-side="top"] {
    animation: selectSlideFromBottom 0.15s ease, selectFadeIn 0.15s ease;
    transform: translateY(-0.25rem);
}

@keyframes selectSlideFromTop {
    from { transform: translateY(-0.5rem); }
    to { transform: translateY(0.25rem); }
}

@keyframes selectSlideFromBottom {
    from { transform: translateY(0.5rem); }
    to { transform: translateY(-0.25rem); }
}

/* Select Viewport */
.select-viewport {
    padding: 0.25rem;
}

/* Select Group */
[data-slot="select-group"],
.select-group {
    /* Group container */
}

/* Select Label */
[data-slot="select-label"],
.select-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Select Item */
[data-slot="select-item"],
.select-item {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.125rem;
    outline: none;
    cursor: default;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-slot="select-item"]:focus,
[data-slot="select-item"]:hover,
.select-item:focus,
.select-item:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="select-item"][data-disabled],
.select-item[data-disabled],
.select-item.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Select Item Icon */
[data-slot="select-item"] i,
[data-slot="select-item"] svg,
.select-item i,
.select-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
    color: var(--muted-foreground);
}

/* Select Item Indicator */
.select-item-indicator {
    position: absolute;
    right: 0.5rem;
    display: flex;
    width: 0.875rem;
    height: 0.875rem;
    align-items: center;
    justify-content: center;
}

.select-item-indicator i,
.select-item-indicator svg {
    width: 1rem;
    height: 1rem;
    color: var(--foreground);
}

/* Select Separator */
[data-slot="select-separator"],
.select-separator {
    height: 1px;
    background-color: var(--border);
    margin: 0.25rem -0.25rem;
    pointer-events: none;
}

/* Select Scroll Buttons */
[data-slot="select-scroll-up-button"],
[data-slot="select-scroll-down-button"],
.select-scroll-up-button,
.select-scroll-down-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    cursor: default;
}

[data-slot="select-scroll-up-button"] i,
[data-slot="select-scroll-up-button"] svg,
[data-slot="select-scroll-down-button"] i,
[data-slot="select-scroll-down-button"] svg,
.select-scroll-up-button i,
.select-scroll-up-button svg,
.select-scroll-down-button i,
.select-scroll-down-button svg {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
}

/* ========================================
   SEPARATOR COMPONENT
   ======================================== */

/* Separator Root */
[data-slot="separator-root"],
.separator {
    flex-shrink: 0;
    background-color: var(--border);
}

/* Horizontal Separator */
[data-slot="separator-root"][data-orientation="horizontal"],
.separator[data-orientation="horizontal"],
.separator-horizontal {
    height: 1px;
    width: 100%;
}

/* Vertical Separator */
[data-slot="separator-root"][data-orientation="vertical"],
.separator[data-orientation="vertical"],
.separator-vertical {
    height: 100%;
    width: 1px;
}

/* ========================================
   SHEET COMPONENT
   ======================================== */

/* Sheet Overlay */
[data-slot="sheet-overlay"],
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5);
}

[data-slot="sheet-overlay"][data-state="open"],
.sheet-overlay[data-state="open"],
.sheet-overlay.open {
    animation: sheetOverlayFadeIn 0.3s ease;
}

[data-slot="sheet-overlay"][data-state="closed"],
.sheet-overlay[data-state="closed"] {
    animation: sheetOverlayFadeOut 0.3s ease;
}

@keyframes sheetOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheetOverlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Sheet Content */
[data-slot="sheet-content"],
.sheet-content {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--background);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform 0.5s ease-in-out;
}

/* Sheet Content Open/Closed States */
[data-slot="sheet-content"][data-state="open"],
.sheet-content[data-state="open"],
.sheet-content.open {
    /* Animation handled per side */
}

[data-slot="sheet-content"][data-state="closed"],
.sheet-content[data-state="closed"] {
    /* Animation handled per side */
}

/* Sheet Right Side */
[data-slot="sheet-content"][data-side="right"],
.sheet-content[data-side="right"],
.sheet-content-right {
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 75%;
    max-width: 24rem;
    border-left: 1px solid var(--border);
}

[data-slot="sheet-content"][data-side="right"][data-state="open"],
.sheet-content[data-side="right"][data-state="open"],
.sheet-content-right.open {
    animation: sheetSlideInFromRight 0.5s ease;
}

[data-slot="sheet-content"][data-side="right"][data-state="closed"],
.sheet-content[data-side="right"][data-state="closed"] {
    animation: sheetSlideOutToRight 0.3s ease;
}

@keyframes sheetSlideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes sheetSlideOutToRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Sheet Left Side */
[data-slot="sheet-content"][data-side="left"],
.sheet-content[data-side="left"],
.sheet-content-left {
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 75%;
    max-width: 24rem;
    border-right: 1px solid var(--border);
}

[data-slot="sheet-content"][data-side="left"][data-state="open"],
.sheet-content[data-side="left"][data-state="open"],
.sheet-content-left.open {
    animation: sheetSlideInFromLeft 0.5s ease;
}

[data-slot="sheet-content"][data-side="left"][data-state="closed"],
.sheet-content[data-side="left"][data-state="closed"] {
    animation: sheetSlideOutToLeft 0.3s ease;
}

@keyframes sheetSlideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes sheetSlideOutToLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Sheet Top Side */
[data-slot="sheet-content"][data-side="top"],
.sheet-content[data-side="top"],
.sheet-content-top {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border);
}

[data-slot="sheet-content"][data-side="top"][data-state="open"],
.sheet-content[data-side="top"][data-state="open"],
.sheet-content-top.open {
    animation: sheetSlideInFromTop 0.5s ease;
}

[data-slot="sheet-content"][data-side="top"][data-state="closed"],
.sheet-content[data-side="top"][data-state="closed"] {
    animation: sheetSlideOutToTop 0.3s ease;
}

@keyframes sheetSlideInFromTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes sheetSlideOutToTop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

/* Sheet Bottom Side */
[data-slot="sheet-content"][data-side="bottom"],
.sheet-content[data-side="bottom"],
.sheet-content-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-top: 1px solid var(--border);
}

[data-slot="sheet-content"][data-side="bottom"][data-state="open"],
.sheet-content[data-side="bottom"][data-state="open"],
.sheet-content-bottom.open {
    animation: sheetSlideInFromBottom 0.5s ease;
}

[data-slot="sheet-content"][data-side="bottom"][data-state="closed"],
.sheet-content[data-side="bottom"][data-state="closed"] {
    animation: sheetSlideOutToBottom 0.3s ease;
}

@keyframes sheetSlideInFromBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes sheetSlideOutToBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* Sheet Close Button */
[data-slot="sheet-close"],
.sheet-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.125rem;
    background: transparent;
    border: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

[data-slot="sheet-close"]:hover,
.sheet-close:hover {
    opacity: 1;
}

[data-slot="sheet-close"]:focus,
.sheet-close:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
}

[data-slot="sheet-close"]:disabled,
.sheet-close:disabled {
    pointer-events: none;
}

[data-slot="sheet-close"] i,
[data-slot="sheet-close"] svg,
.sheet-close i,
.sheet-close svg {
    width: 1rem;
    height: 1rem;
}

/* Sheet Header */
[data-slot="sheet-header"],
.sheet-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
}

/* Sheet Footer */
[data-slot="sheet-footer"],
.sheet-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

/* Sheet Title */
[data-slot="sheet-title"],
.sheet-title {
    color: var(--foreground);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0;
}

/* Sheet Description */
[data-slot="sheet-description"],
.sheet-description {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0;
}

/* ========================================
   SIDEBAR COMPONENT
   ======================================== */

/* CSS Variables for Sidebar */
:root {
    --sidebar-width: 16rem;
    --sidebar-width-mobile: 18rem;
    --sidebar-width-icon: 3rem;
    --sidebar-background: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-border: var(--border);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-ring: var(--ring);
}

/* Sidebar Wrapper */
[data-slot="sidebar-wrapper"],
.sidebar-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

[data-slot="sidebar-wrapper"].has-inset,
.sidebar-wrapper.has-inset {
    background-color: var(--sidebar-background);
}

/* Sidebar */
[data-slot="sidebar"],
.sidebar {
    display: none;
    color: var(--sidebar-foreground);
}

@media (min-width: 768px) {
    [data-slot="sidebar"],
    .sidebar {
        display: block;
    }
}

/* Sidebar Gap (placeholder for collapsed state) */
[data-slot="sidebar-gap"],
.sidebar-gap {
    position: relative;
    width: var(--sidebar-width);
    background-color: transparent;
    transition: width 0.2s ease-linear;
}

[data-slot="sidebar"][data-collapsible="offcanvas"] [data-slot="sidebar-gap"],
.sidebar[data-collapsible="offcanvas"] .sidebar-gap {
    width: 0;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-gap"],
.sidebar[data-collapsible="icon"] .sidebar-gap {
    width: var(--sidebar-width-icon);
}

/* Floating/Inset Variant Gap */
[data-slot="sidebar"][data-variant="floating"][data-collapsible="icon"] [data-slot="sidebar-gap"],
[data-slot="sidebar"][data-variant="inset"][data-collapsible="icon"] [data-slot="sidebar-gap"],
.sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-gap,
.sidebar[data-variant="inset"][data-collapsible="icon"] .sidebar-gap {
    width: calc(var(--sidebar-width-icon) + 1rem);
}

/* Sidebar Container */
[data-slot="sidebar-container"],
.sidebar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: none;
    height: 100vh;
    width: var(--sidebar-width);
    transition: left 0.2s ease-linear, right 0.2s ease-linear, width 0.2s ease-linear;
}

@media (min-width: 768px) {
    [data-slot="sidebar-container"],
    .sidebar-container {
        display: flex;
    }
}

/* Left Side */
[data-slot="sidebar"][data-side="left"] [data-slot="sidebar-container"],
.sidebar[data-side="left"] .sidebar-container,
.sidebar-container-left {
    left: 0;
    border-right: 1px solid var(--sidebar-border);
}

[data-slot="sidebar"][data-side="left"][data-collapsible="offcanvas"] [data-slot="sidebar-container"],
.sidebar[data-side="left"][data-collapsible="offcanvas"] .sidebar-container {
    left: calc(var(--sidebar-width) * -1);
}

/* Right Side */
[data-slot="sidebar"][data-side="right"] [data-slot="sidebar-container"],
.sidebar[data-side="right"] .sidebar-container,
.sidebar-container-right {
    right: 0;
    border-left: 1px solid var(--sidebar-border);
}

[data-slot="sidebar"][data-side="right"][data-collapsible="offcanvas"] [data-slot="sidebar-container"],
.sidebar[data-side="right"][data-collapsible="offcanvas"] .sidebar-container {
    right: calc(var(--sidebar-width) * -1);
}

/* Icon Collapsible */
[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-container"],
.sidebar[data-collapsible="icon"] .sidebar-container {
    width: var(--sidebar-width-icon);
}

/* Floating/Inset Variants */
[data-slot="sidebar"][data-variant="floating"] [data-slot="sidebar-container"],
[data-slot="sidebar"][data-variant="inset"] [data-slot="sidebar-container"],
.sidebar[data-variant="floating"] .sidebar-container,
.sidebar[data-variant="inset"] .sidebar-container {
    padding: 0.5rem;
    border: none;
}

[data-slot="sidebar"][data-variant="floating"][data-collapsible="icon"] [data-slot="sidebar-container"],
[data-slot="sidebar"][data-variant="inset"][data-collapsible="icon"] [data-slot="sidebar-container"] {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}

/* Sidebar Inner */
[data-slot="sidebar-inner"],
.sidebar-inner {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    background-color: var(--sidebar-background);
}

[data-slot="sidebar"][data-variant="floating"] [data-slot="sidebar-inner"],
.sidebar[data-variant="floating"] .sidebar-inner {
    border-radius: 0.5rem;
    border: 1px solid var(--sidebar-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sidebar State Expanded/Collapsed */
[data-slot="sidebar"][data-state="expanded"],
.sidebar[data-state="expanded"] {
    /* Expanded state */
}

[data-slot="sidebar"][data-state="collapsed"],
.sidebar[data-state="collapsed"] {
    /* Collapsed state */
}

[data-slot="sidebar"][data-state="collapsed"][data-collapsible="icon"] [data-slot="sidebar-container"],
.sidebar[data-state="collapsed"][data-collapsible="icon"] .sidebar-container {
    width: var(--sidebar-width-icon);
}

/* Sidebar Trigger */
[data-slot="sidebar-trigger"],
.sidebar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

[data-slot="sidebar-trigger"]:hover,
.sidebar-trigger:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="sidebar-trigger"] i,
[data-slot="sidebar-trigger"] svg,
.sidebar-trigger i,
.sidebar-trigger svg {
    width: 1rem;
    height: 1rem;
}

/* Sidebar Rail */
[data-slot="sidebar-rail"],
.sidebar-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 20;
    display: none;
    width: 1rem;
    transform: translateX(-50%);
    transition: all 0.2s ease-linear;
    background: transparent;
    border: none;
    cursor: ew-resize;
}

@media (min-width: 640px) {
    [data-slot="sidebar-rail"],
    .sidebar-rail {
        display: flex;
    }
}

[data-slot="sidebar-rail"]::after,
.sidebar-rail::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: transparent;
    transition: background-color 0.15s ease;
}

[data-slot="sidebar-rail"]:hover::after,
.sidebar-rail:hover::after {
    background-color: var(--sidebar-border);
}

[data-slot="sidebar"][data-side="left"] [data-slot="sidebar-rail"],
.sidebar[data-side="left"] .sidebar-rail {
    right: -1rem;
}

[data-slot="sidebar"][data-side="right"] [data-slot="sidebar-rail"],
.sidebar[data-side="right"] .sidebar-rail {
    left: 0;
}

/* Sidebar Inset */
[data-slot="sidebar-inset"],
.sidebar-inset {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    background-color: var(--background);
}

@media (min-width: 768px) {
    [data-slot="sidebar"][data-variant="inset"] ~ [data-slot="sidebar-inset"],
    .sidebar[data-variant="inset"] ~ .sidebar-inset {
        margin: 0.5rem;
        margin-left: 0;
        border-radius: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    [data-slot="sidebar"][data-variant="inset"][data-state="collapsed"] ~ [data-slot="sidebar-inset"],
    .sidebar[data-variant="inset"][data-state="collapsed"] ~ .sidebar-inset {
        margin-left: 0.5rem;
    }
}

/* Sidebar Header */
[data-slot="sidebar-header"],
.sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

/* Sidebar Footer */
[data-slot="sidebar-footer"],
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

/* Sidebar Content */
[data-slot="sidebar-content"],
.sidebar-content {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    overflow: auto;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-content"],
.sidebar[data-collapsible="icon"] .sidebar-content {
    overflow: hidden;
}

/* Sidebar Input */
[data-slot="sidebar-input"],
.sidebar-input {
    height: 2rem;
    width: 100%;
    background-color: var(--background);
    box-shadow: none;
}

/* Sidebar Separator */
[data-slot="sidebar-separator"],
.sidebar-separator {
    margin: 0 0.5rem;
    width: auto;
    background-color: var(--sidebar-border);
}

/* Sidebar Group */
[data-slot="sidebar-group"],
.sidebar-group {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    padding: 0.5rem;
}

/* Sidebar Group Label */
[data-slot="sidebar-group-label"],
.sidebar-group-label {
    display: flex;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--sidebar-foreground-rgb, 0, 0, 0), 0.7);
    outline: none;
    transition: margin 0.2s ease, opacity 0.2s ease;
}

[data-slot="sidebar-group-label"]:focus-visible,
.sidebar-group-label:focus-visible {
    box-shadow: 0 0 0 2px var(--sidebar-ring);
}

[data-slot="sidebar-group-label"] i,
[data-slot="sidebar-group-label"] svg,
.sidebar-group-label i,
.sidebar-group-label svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-group-label"],
.sidebar[data-collapsible="icon"] .sidebar-group-label {
    margin-top: -2rem;
    opacity: 0;
}

/* Sidebar Group Action */
[data-slot="sidebar-group-action"],
.sidebar-group-action {
    position: absolute;
    top: 0.875rem;
    right: 0.75rem;
    display: flex;
    aspect-ratio: 1 / 1;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--sidebar-foreground);
    outline: none;
    transition: transform 0.15s ease;
    cursor: pointer;
}

[data-slot="sidebar-group-action"]:hover,
.sidebar-group-action:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-group-action"]:focus-visible,
.sidebar-group-action:focus-visible {
    box-shadow: 0 0 0 2px var(--sidebar-ring);
}

[data-slot="sidebar-group-action"] i,
[data-slot="sidebar-group-action"] svg,
.sidebar-group-action i,
.sidebar-group-action svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-group-action"],
.sidebar[data-collapsible="icon"] .sidebar-group-action {
    display: none;
}

/* Sidebar Group Content */
[data-slot="sidebar-group-content"],
.sidebar-group-content {
    width: 100%;
    font-size: 0.875rem;
}

/* Sidebar Menu */
[data-slot="sidebar-menu"],
.sidebar-menu {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Sidebar Menu Item */
[data-slot="sidebar-menu-item"],
.sidebar-menu-item {
    position: relative;
    list-style: none;
}

/* Sidebar Menu Button */
[data-slot="sidebar-menu-button"],
.sidebar-menu-button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.375rem;
    padding: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    color: var(--sidebar-foreground);
    outline: none;
    transition: width 0.2s ease, height 0.2s ease, padding 0.2s ease, background-color 0.15s ease;
    cursor: pointer;
}

[data-slot="sidebar-menu-button"]:hover,
.sidebar-menu-button:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-button"]:focus-visible,
.sidebar-menu-button:focus-visible {
    box-shadow: 0 0 0 2px var(--sidebar-ring);
}

[data-slot="sidebar-menu-button"]:active,
.sidebar-menu-button:active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-button"]:disabled,
[data-slot="sidebar-menu-button"][aria-disabled="true"],
.sidebar-menu-button:disabled,
.sidebar-menu-button[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="sidebar-menu-button"][data-active="true"],
.sidebar-menu-button[data-active="true"],
.sidebar-menu-button.active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    font-weight: 500;
}

[data-slot="sidebar-menu-button"] i,
[data-slot="sidebar-menu-button"] svg,
.sidebar-menu-button i,
.sidebar-menu-button svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

[data-slot="sidebar-menu-button"] span:last-child,
.sidebar-menu-button span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu Button Sizes */
[data-slot="sidebar-menu-button"][data-size="sm"],
.sidebar-menu-button-sm {
    height: 1.75rem;
    font-size: 0.75rem;
}

[data-slot="sidebar-menu-button"][data-size="default"],
.sidebar-menu-button {
    height: 2rem;
}

[data-slot="sidebar-menu-button"][data-size="lg"],
.sidebar-menu-button-lg {
    height: 3rem;
}

/* Icon Collapsed State */
[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-menu-button"],
.sidebar[data-collapsible="icon"] .sidebar-menu-button {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.5rem !important;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-menu-button"][data-size="lg"],
.sidebar[data-collapsible="icon"] .sidebar-menu-button-lg {
    padding: 0 !important;
}

/* Menu Button Outline Variant */
[data-slot="sidebar-menu-button"][data-variant="outline"],
.sidebar-menu-button-outline {
    background-color: var(--background);
    box-shadow: 0 0 0 1px var(--sidebar-border);
}

[data-slot="sidebar-menu-button"][data-variant="outline"]:hover,
.sidebar-menu-button-outline:hover {
    background-color: var(--sidebar-accent);
    box-shadow: 0 0 0 1px var(--sidebar-accent);
}

/* Sidebar Menu Action */
[data-slot="sidebar-menu-action"],
.sidebar-menu-action {
    position: absolute;
    top: 0.375rem;
    right: 0.25rem;
    display: flex;
    aspect-ratio: 1 / 1;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--sidebar-foreground);
    outline: none;
    transition: transform 0.15s ease;
    cursor: pointer;
}

[data-slot="sidebar-menu-action"]:hover,
.sidebar-menu-action:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-action"]:focus-visible,
.sidebar-menu-action:focus-visible {
    box-shadow: 0 0 0 2px var(--sidebar-ring);
}

[data-slot="sidebar-menu-action"] i,
[data-slot="sidebar-menu-action"] svg,
.sidebar-menu-action i,
.sidebar-menu-action svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-menu-action"],
.sidebar[data-collapsible="icon"] .sidebar-menu-action {
    display: none;
}

/* Menu Action Show on Hover */
.sidebar-menu-action-hover {
    opacity: 0;
}

.sidebar-menu-item:hover .sidebar-menu-action-hover,
.sidebar-menu-item:focus-within .sidebar-menu-action-hover,
[data-slot="sidebar-menu-action"][data-state="open"] {
    opacity: 1;
}

/* Sidebar Menu Badge */
[data-slot="sidebar-menu-badge"],
.sidebar-menu-badge {
    position: absolute;
    right: 0.25rem;
    display: flex;
    height: 1.25rem;
    min-width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--sidebar-foreground);
    pointer-events: none;
    user-select: none;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-menu-badge"],
.sidebar[data-collapsible="icon"] .sidebar-menu-badge {
    display: none;
}

/* Sidebar Menu Skeleton */
[data-slot="sidebar-menu-skeleton"],
.sidebar-menu-skeleton {
    display: flex;
    height: 2rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding: 0 0.5rem;
}

/* Sidebar Menu Sub */
[data-slot="sidebar-menu-sub"],
.sidebar-menu-sub {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0 0.875rem;
    padding: 0.125rem 0 0.125rem 0.625rem;
    border-left: 1px solid var(--sidebar-border);
    list-style: none;
    transform: translateX(1px);
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-menu-sub"],
.sidebar[data-collapsible="icon"] .sidebar-menu-sub {
    display: none;
}

/* Sidebar Menu Sub Item */
[data-slot="sidebar-menu-sub-item"],
.sidebar-menu-sub-item {
    position: relative;
    list-style: none;
}

/* Sidebar Menu Sub Button */
[data-slot="sidebar-menu-sub-button"],
.sidebar-menu-sub-button {
    display: flex;
    height: 1.75rem;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.375rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: var(--sidebar-foreground);
    text-decoration: none;
    outline: none;
    transform: translateX(-1px);
    transition: background-color 0.15s ease;
}

[data-slot="sidebar-menu-sub-button"]:hover,
.sidebar-menu-sub-button:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-sub-button"]:active,
.sidebar-menu-sub-button:active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-sub-button"]:focus-visible,
.sidebar-menu-sub-button:focus-visible {
    box-shadow: 0 0 0 2px var(--sidebar-ring);
}

[data-slot="sidebar-menu-sub-button"]:disabled,
[data-slot="sidebar-menu-sub-button"][aria-disabled="true"],
.sidebar-menu-sub-button:disabled,
.sidebar-menu-sub-button[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
}

[data-slot="sidebar-menu-sub-button"][data-active="true"],
.sidebar-menu-sub-button[data-active="true"],
.sidebar-menu-sub-button.active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-sub-button"] i,
[data-slot="sidebar-menu-sub-button"] svg,
.sidebar-menu-sub-button i,
.sidebar-menu-sub-button svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--sidebar-accent-foreground);
}

[data-slot="sidebar-menu-sub-button"] span:last-child,
.sidebar-menu-sub-button span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sub Button Sizes */
[data-slot="sidebar-menu-sub-button"][data-size="sm"],
.sidebar-menu-sub-button-sm {
    font-size: 0.75rem;
}

[data-slot="sidebar-menu-sub-button"][data-size="md"],
.sidebar-menu-sub-button {
    font-size: 0.875rem;
}

[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-menu-sub-button"],
.sidebar[data-collapsible="icon"] .sidebar-menu-sub-button {
    display: none;
}

/* ========================================
   SKELETON COMPONENT
   ======================================== */

/* Skeleton */
[data-slot="skeleton"],
.skeleton {
    background-color: var(--accent);
    border-radius: 0.375rem;
    animation: skeletonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Skeleton Variants */
.skeleton-text {
    height: 1rem;
    width: 100%;
}

.skeleton-text-sm {
    height: 0.75rem;
}

.skeleton-text-lg {
    height: 1.25rem;
}

.skeleton-heading {
    height: 1.5rem;
    width: 60%;
}

.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
}

.skeleton-avatar-sm {
    width: 2rem;
    height: 2rem;
}

.skeleton-avatar-lg {
    width: 3rem;
    height: 3rem;
}

.skeleton-button {
    height: 2.25rem;
    width: 5rem;
}

.skeleton-card {
    height: 8rem;
    width: 100%;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* ========================================
   SLIDER COMPONENT
   ======================================== */

/* Slider Root */
[data-slot="slider"],
.slider {
    position: relative;
    display: flex;
    width: 100%;
    touch-action: none;
    align-items: center;
    user-select: none;
}

[data-slot="slider"][data-disabled],
.slider[data-disabled],
.slider.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Vertical Orientation */
[data-slot="slider"][data-orientation="vertical"],
.slider[data-orientation="vertical"],
.slider-vertical {
    height: 100%;
    min-height: 11rem;
    width: auto;
    flex-direction: column;
}

/* Slider Track */
[data-slot="slider-track"],
.slider-track {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--muted);
}

/* Horizontal Track */
[data-slot="slider-track"][data-orientation="horizontal"],
.slider-track[data-orientation="horizontal"],
.slider-track {
    height: 0.375rem;
    width: 100%;
}

/* Vertical Track */
[data-slot="slider-track"][data-orientation="vertical"],
.slider[data-orientation="vertical"] [data-slot="slider-track"],
.slider-vertical .slider-track {
    height: 100%;
    width: 0.375rem;
}

/* Slider Range (filled portion) */
[data-slot="slider-range"],
.slider-range {
    position: absolute;
    background-color: var(--primary);
}

/* Horizontal Range */
[data-slot="slider-range"][data-orientation="horizontal"],
.slider-range[data-orientation="horizontal"],
.slider-range {
    height: 100%;
}

/* Vertical Range */
[data-slot="slider-range"][data-orientation="vertical"],
.slider[data-orientation="vertical"] [data-slot="slider-range"],
.slider-vertical .slider-range {
    width: 100%;
}

/* Slider Thumb */
[data-slot="slider-thumb"],
.slider-thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 2px solid var(--primary);
    background-color: var(--background);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: color 0.15s ease, box-shadow 0.15s ease;
    cursor: grab;
}

[data-slot="slider-thumb"]:hover,
.slider-thumb:hover {
    box-shadow: 0 0 0 4px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

[data-slot="slider-thumb"]:focus-visible,
.slider-thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

[data-slot="slider-thumb"]:active,
.slider-thumb:active {
    cursor: grabbing;
}

[data-slot="slider-thumb"]:disabled,
.slider-thumb:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Slider with Marks */
.slider-marks {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    top: 1rem;
    padding: 0 0.5rem;
}

.slider-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.slider-mark-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: var(--muted-foreground);
    margin-bottom: 0.25rem;
}

/* Slider with Value Label */
.slider-value {
    position: absolute;
    top: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* ========================================
   SONNER / TOASTER COMPONENT
   ======================================== */

/* Toaster Container */
.toaster,
[data-sonner-toaster] {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
}

/* Toaster Positions */
.toaster[data-position="top-left"],
[data-sonner-toaster][data-position="top-left"] {
    top: 1rem;
    left: 1rem;
}

.toaster[data-position="top-center"],
[data-sonner-toaster][data-position="top-center"] {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.toaster[data-position="top-right"],
[data-sonner-toaster][data-position="top-right"] {
    top: 1rem;
    right: 1rem;
}

.toaster[data-position="bottom-left"],
[data-sonner-toaster][data-position="bottom-left"] {
    bottom: 1rem;
    left: 1rem;
}

.toaster[data-position="bottom-center"],
[data-sonner-toaster][data-position="bottom-center"] {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.toaster[data-position="bottom-right"],
[data-sonner-toaster][data-position="bottom-right"] {
    bottom: 1rem;
    right: 1rem;
}

/* Toast */
.toast,
[data-sonner-toast] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    margin-bottom: 0.5rem;
}

/* Toast Variants */
.toast-success,
[data-sonner-toast][data-type="success"] {
    border-color: #22c55e;
}

.toast-success .toast-icon,
[data-sonner-toast][data-type="success"] [data-icon] {
    color: #22c55e;
}

.toast-error,
[data-sonner-toast][data-type="error"] {
    border-color: var(--destructive);
}

.toast-error .toast-icon,
[data-sonner-toast][data-type="error"] [data-icon] {
    color: var(--destructive);
}

.toast-warning,
[data-sonner-toast][data-type="warning"] {
    border-color: #eab308;
}

.toast-warning .toast-icon,
[data-sonner-toast][data-type="warning"] [data-icon] {
    color: #eab308;
}

.toast-info,
[data-sonner-toast][data-type="info"] {
    border-color: #3b82f6;
}

.toast-info .toast-icon,
[data-sonner-toast][data-type="info"] [data-icon] {
    color: #3b82f6;
}

/* Toast Icon */
.toast-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

/* Toast Content */
.toast-content {
    flex: 1;
    min-width: 0;
}

/* Toast Title */
.toast-title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 0 0.25rem 0;
}

/* Toast Description */
.toast-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Toast Close Button */
.toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.toast-close:hover {
    opacity: 1;
}

.toast-close i,
.toast-close svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Toast Actions */
.toast-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.toast-action {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.toast-action:hover {
    background-color: rgba(var(--primary-rgb, 21, 128, 61), 0.9);
}

.toast-action-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.toast-action-secondary:hover {
    background-color: rgba(var(--secondary-rgb, 100, 116, 139), 0.9);
}

/* Toast Animations */
.toast[data-state="entering"],
[data-sonner-toast][data-state="entering"] {
    animation: toastSlideIn 0.3s ease;
}

.toast[data-state="exiting"],
[data-sonner-toast][data-state="exiting"] {
    animation: toastSlideOut 0.2s ease;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-1rem);
    }
}

/* Bottom position animations */
.toaster[data-position^="bottom"] .toast[data-state="entering"],
[data-sonner-toaster][data-position^="bottom"] [data-sonner-toast][data-state="entering"] {
    animation: toastSlideInBottom 0.3s ease;
}

.toaster[data-position^="bottom"] .toast[data-state="exiting"],
[data-sonner-toaster][data-position^="bottom"] [data-sonner-toast][data-state="exiting"] {
    animation: toastSlideOutBottom 0.2s ease;
}

@keyframes toastSlideInBottom {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOutBottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(1rem);
    }
}

/* Toast Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--primary);
    border-radius: 0 0 0.5rem 0.5rem;
    transition: width linear;
}

/* Stacked Toasts */
.toaster-stacked .toast:not(:first-child) {
    transform: scale(0.95);
    opacity: 0.8;
}

/* ========================================
   TABLE COMPONENT
   ======================================== */

/* Table Container */
[data-slot="table-container"],
.table-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

/* Table */
[data-slot="table"],
.table {
    width: 100%;
    caption-side: bottom;
    font-size: 0.875rem;
    border-collapse: collapse;
}

/* Table Header */
[data-slot="table-header"],
.table-header {
    /* Header container */
}

[data-slot="table-header"] tr,
.table-header tr {
    border-bottom: 1px solid var(--border);
}

/* Table Body */
[data-slot="table-body"],
.table-body {
    /* Body container */
}

[data-slot="table-body"] tr:last-child,
.table-body tr:last-child {
    border-bottom: none;
}

/* Table Footer */
[data-slot="table-footer"],
.table-footer {
    background-color: rgba(var(--muted-rgb, 100, 116, 139), 0.5);
    border-top: 1px solid var(--border);
    font-weight: 500;
}

[data-slot="table-footer"] tr:last-child,
.table-footer tr:last-child {
    border-bottom: none;
}

/* Table Row */
[data-slot="table-row"],
.table-row {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s ease;
}

[data-slot="table-row"]:hover,
.table-row:hover {
    background-color: rgba(var(--muted-rgb, 100, 116, 139), 0.5);
}

[data-slot="table-row"][data-state="selected"],
.table-row[data-state="selected"],
.table-row.selected {
    background-color: var(--muted);
}

/* Table Head Cell */
[data-slot="table-head"],
.table-head {
    height: 2.5rem;
    padding: 0 0.5rem;
    text-align: left;
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
    color: var(--foreground);
}

/* Checkbox alignment in header */
[data-slot="table-head"]:has([role="checkbox"]),
.table-head:has([role="checkbox"]) {
    padding-right: 0;
}

[data-slot="table-head"] [role="checkbox"],
.table-head [role="checkbox"] {
    transform: translateY(2px);
}

/* Table Cell */
[data-slot="table-cell"],
.table-cell {
    padding: 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Checkbox alignment in cells */
[data-slot="table-cell"]:has([role="checkbox"]),
.table-cell:has([role="checkbox"]) {
    padding-right: 0;
}

[data-slot="table-cell"] [role="checkbox"],
.table-cell [role="checkbox"] {
    transform: translateY(2px);
}

/* Table Caption */
[data-slot="table-caption"],
.table-caption {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Table Variants */
.table-striped [data-slot="table-body"] tr:nth-child(even),
.table-striped .table-body tr:nth-child(even) {
    background-color: rgba(var(--muted-rgb, 100, 116, 139), 0.25);
}

.table-bordered [data-slot="table-head"],
.table-bordered [data-slot="table-cell"],
.table-bordered .table-head,
.table-bordered .table-cell {
    border: 1px solid var(--border);
}

.table-compact [data-slot="table-head"],
.table-compact [data-slot="table-cell"],
.table-compact .table-head,
.table-compact .table-cell {
    padding: 0.25rem 0.5rem;
}

.table-compact [data-slot="table-head"],
.table-compact .table-head {
    height: 2rem;
}

/* Sortable Table Headers */
.table-head-sortable {
    cursor: pointer;
    user-select: none;
}

.table-head-sortable:hover {
    background-color: rgba(var(--muted-rgb, 100, 116, 139), 0.3);
}

.table-head-sortable i,
.table-head-sortable svg {
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 0.25rem;
    opacity: 0.5;
}

.table-head-sortable[data-sort="asc"] i,
.table-head-sortable[data-sort="asc"] svg,
.table-head-sortable[data-sort="desc"] i,
.table-head-sortable[data-sort="desc"] svg {
    opacity: 1;
}

/* Responsive Table */
@media (max-width: 640px) {
    .table-responsive {
        display: block;
    }
    
    .table-responsive [data-slot="table-header"],
    .table-responsive .table-header {
        display: none;
    }
    
    .table-responsive [data-slot="table-row"],
    .table-responsive .table-row {
        display: block;
        margin-bottom: 0.5rem;
        border: 1px solid var(--border);
        border-radius: 0.375rem;
    }
    
    .table-responsive [data-slot="table-cell"],
    .table-responsive .table-cell {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
        border-bottom: 1px solid var(--border);
    }
    
    .table-responsive [data-slot="table-cell"]:last-child,
    .table-responsive .table-cell:last-child {
        border-bottom: none;
    }
    
    .table-responsive [data-slot="table-cell"]::before,
    .table-responsive .table-cell::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--foreground);
    }
}

/* ========================================
   TABS COMPONENT
   ======================================== */

/* Tabs Container */
[data-slot="tabs"],
.tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tabs List */
[data-slot="tabs-list"],
.tabs-list {
    display: inline-flex;
    height: 2.25rem;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: var(--muted);
    color: var(--muted-foreground);
    padding: 3px;
}

/* Tabs Trigger */
[data-slot="tabs-trigger"],
.tabs-trigger {
    display: inline-flex;
    height: calc(100% - 1px);
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--foreground);
    background-color: transparent;
    cursor: pointer;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

/* Tabs Trigger Active State */
[data-slot="tabs-trigger"][data-state="active"],
.tabs-trigger[data-state="active"],
.tabs-trigger.active {
    background-color: var(--card);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Tabs Trigger Focus */
[data-slot="tabs-trigger"]:focus-visible,
.tabs-trigger:focus-visible {
    outline: 1px solid var(--ring);
    outline-offset: 0;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Tabs Trigger Disabled */
[data-slot="tabs-trigger"]:disabled,
.tabs-trigger:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Tabs Trigger Hover */
[data-slot="tabs-trigger"]:not([data-state="active"]):not(:disabled):hover,
.tabs-trigger:not([data-state="active"]):not(.active):not(:disabled):hover {
    color: var(--foreground);
    background-color: rgba(var(--muted-rgb, 100, 116, 139), 0.3);
}

/* Tabs Trigger Icons */
[data-slot="tabs-trigger"] svg,
[data-slot="tabs-trigger"] i,
.tabs-trigger svg,
.tabs-trigger i {
    pointer-events: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

/* Tabs Content */
[data-slot="tabs-content"],
.tabs-content {
    flex: 1;
    outline: none;
}

/* Hidden content */
[data-slot="tabs-content"]:not([data-state="active"]),
.tabs-content:not([data-state="active"]),
.tabs-content:not(.active) {
    display: none;
}

/* Active content */
[data-slot="tabs-content"][data-state="active"],
.tabs-content[data-state="active"],
.tabs-content.active {
    display: block;
}

/* Dark Mode Adjustments */
.dark [data-slot="tabs-trigger"],
.dark .tabs-trigger {
    color: var(--muted-foreground);
}

.dark [data-slot="tabs-trigger"][data-state="active"],
.dark .tabs-trigger[data-state="active"],
.dark .tabs-trigger.active {
    color: var(--foreground);
    border-color: var(--input);
    background-color: rgba(var(--input-rgb, 55, 65, 81), 0.3);
}

/* Tabs Variants */
.tabs-underline [data-slot="tabs-list"],
.tabs-underline .tabs-list {
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    padding: 0;
    height: auto;
}

.tabs-underline [data-slot="tabs-trigger"],
.tabs-underline .tabs-trigger {
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 1rem;
}

.tabs-underline [data-slot="tabs-trigger"][data-state="active"],
.tabs-underline .tabs-trigger[data-state="active"],
.tabs-underline .tabs-trigger.active {
    background-color: transparent;
    border-bottom-color: var(--primary);
    box-shadow: none;
}

/* Pills Variant */
.tabs-pills [data-slot="tabs-list"],
.tabs-pills .tabs-list {
    background-color: transparent;
    gap: 0.25rem;
}

.tabs-pills [data-slot="tabs-trigger"],
.tabs-pills .tabs-trigger {
    border-radius: 9999px;
}

.tabs-pills [data-slot="tabs-trigger"][data-state="active"],
.tabs-pills .tabs-trigger[data-state="active"],
.tabs-pills .tabs-trigger.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Vertical Tabs */
.tabs-vertical {
    flex-direction: row;
}

.tabs-vertical [data-slot="tabs-list"],
.tabs-vertical .tabs-list {
    flex-direction: column;
    height: auto;
    width: auto;
}

.tabs-vertical [data-slot="tabs-trigger"],
.tabs-vertical .tabs-trigger {
    width: 100%;
    justify-content: flex-start;
}

.tabs-vertical [data-slot="tabs-content"],
.tabs-vertical .tabs-content {
    padding-left: 1rem;
}

/* Full Width Tabs */
.tabs-full [data-slot="tabs-list"],
.tabs-full .tabs-list {
    width: 100%;
}

.tabs-full [data-slot="tabs-trigger"],
.tabs-full .tabs-trigger {
    flex: 1;
}

/* ========================================
   TEXTAREA COMPONENT
   ======================================== */

/* Textarea */
[data-slot="textarea"],
.textarea {
    display: flex;
    resize: none;
    field-sizing: content;
    min-height: 4rem;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--input);
    background-color: var(--input-background, transparent);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--foreground);
    outline: none;
    transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Medium screens and up */
@media (min-width: 768px) {
    [data-slot="textarea"],
    .textarea {
        font-size: 0.875rem;
    }
}

/* Placeholder */
[data-slot="textarea"]::placeholder,
.textarea::placeholder {
    color: var(--muted-foreground);
}

/* Focus State */
[data-slot="textarea"]:focus-visible,
.textarea:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Disabled State */
[data-slot="textarea"]:disabled,
.textarea:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Invalid State */
[data-slot="textarea"][aria-invalid="true"],
.textarea[aria-invalid="true"],
.textarea.invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 239, 68, 68), 0.2);
}

.dark [data-slot="textarea"][aria-invalid="true"],
.dark .textarea[aria-invalid="true"],
.dark .textarea.invalid {
    box-shadow: 0 0 0 3px rgba(var(--destructive-rgb, 239, 68, 68), 0.4);
}

/* Dark Mode */
.dark [data-slot="textarea"],
.dark .textarea {
    background-color: rgba(var(--input-rgb, 55, 65, 81), 0.3);
}

/* Textarea Sizes */
.textarea-sm {
    min-height: 3rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.textarea-lg {
    min-height: 6rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

/* Resizable Variants */
.textarea-resize-vertical {
    resize: vertical;
}

.textarea-resize-horizontal {
    resize: horizontal;
}

.textarea-resize-both {
    resize: both;
}

/* Auto-grow Textarea */
.textarea-auto-grow {
    overflow: hidden;
}

/* ========================================
   TOGGLE COMPONENT
   ======================================== */

/* Toggle Base */
[data-slot="toggle"],
.toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Toggle Focus */
[data-slot="toggle"]:focus-visible,
.toggle:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Toggle Disabled */
[data-slot="toggle"]:disabled,
.toggle:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Toggle Icons */
[data-slot="toggle"] svg,
[data-slot="toggle"] i,
.toggle svg,
.toggle i {
    pointer-events: none;
    flex-shrink: 0;
}

[data-slot="toggle"] svg:not([class*="size-"]),
[data-slot="toggle"] i:not([class*="size-"]),
.toggle svg:not([class*="size-"]),
.toggle i:not([class*="size-"]) {
    width: 1rem;
    height: 1rem;
}

/* Toggle Variant: Default */
[data-slot="toggle"][data-variant="default"],
[data-slot="toggle"]:not([data-variant]),
.toggle,
.toggle-default {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--foreground);
}

[data-slot="toggle"][data-variant="default"]:hover,
[data-slot="toggle"]:not([data-variant]):hover,
.toggle:hover,
.toggle-default:hover {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

[data-slot="toggle"][data-variant="default"][data-state="on"],
[data-slot="toggle"]:not([data-variant])[data-state="on"],
.toggle[data-state="on"],
.toggle.active,
.toggle-default[data-state="on"],
.toggle-default.active {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Toggle Variant: Outline */
[data-slot="toggle"][data-variant="outline"],
.toggle-outline {
    background-color: transparent;
    border: 1px solid var(--input);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-slot="toggle"][data-variant="outline"]:hover,
.toggle-outline:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="toggle"][data-variant="outline"][data-state="on"],
.toggle-outline[data-state="on"],
.toggle-outline.active {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Toggle Size: Default */
[data-slot="toggle"][data-size="default"],
[data-slot="toggle"]:not([data-size]),
.toggle,
.toggle-size-default {
    height: 2.25rem;
    padding: 0 0.625rem;
    min-width: 2.25rem;
}

/* Toggle Size: Small */
[data-slot="toggle"][data-size="sm"],
.toggle-sm {
    height: 2rem;
    padding: 0 0.5rem;
    min-width: 2rem;
}

/* Toggle Size: Large */
[data-slot="toggle"][data-size="lg"],
.toggle-lg {
    height: 2.5rem;
    padding: 0 0.75rem;
    min-width: 2.5rem;
}

/* ========================================
   TOGGLE GROUP COMPONENT
   ======================================== */

/* Toggle Group */
[data-slot="toggle-group"],
.toggle-group {
    display: flex;
    width: fit-content;
    align-items: center;
    border-radius: 0.375rem;
}

/* Toggle Group with Outline Variant */
[data-slot="toggle-group"][data-variant="outline"],
.toggle-group-outline {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Toggle Group Items */
[data-slot="toggle-group-item"],
.toggle-group-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    flex-shrink: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* First and Last Item Border Radius */
[data-slot="toggle-group-item"]:first-child,
.toggle-group-item:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

[data-slot="toggle-group-item"]:last-child,
.toggle-group-item:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Toggle Group Item Focus */
[data-slot="toggle-group-item"]:focus,
[data-slot="toggle-group-item"]:focus-visible,
.toggle-group-item:focus,
.toggle-group-item:focus-visible {
    z-index: 10;
}

[data-slot="toggle-group-item"]:focus-visible,
.toggle-group-item:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(var(--ring-rgb, 34, 197, 94), 0.5);
}

/* Toggle Group Item Disabled */
[data-slot="toggle-group-item"]:disabled,
.toggle-group-item:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Toggle Group Item Icons */
[data-slot="toggle-group-item"] svg,
[data-slot="toggle-group-item"] i,
.toggle-group-item svg,
.toggle-group-item i {
    pointer-events: none;
    flex-shrink: 0;
}

[data-slot="toggle-group-item"] svg:not([class*="size-"]),
[data-slot="toggle-group-item"] i:not([class*="size-"]),
.toggle-group-item svg:not([class*="size-"]),
.toggle-group-item i:not([class*="size-"]) {
    width: 1rem;
    height: 1rem;
}

/* Toggle Group Item Variant: Default */
[data-slot="toggle-group-item"][data-variant="default"],
[data-slot="toggle-group-item"]:not([data-variant]),
.toggle-group-item,
.toggle-group-item-default {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--foreground);
}

[data-slot="toggle-group-item"][data-variant="default"]:hover,
[data-slot="toggle-group-item"]:not([data-variant]):hover,
.toggle-group-item:hover,
.toggle-group-item-default:hover {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

[data-slot="toggle-group-item"][data-variant="default"][data-state="on"],
[data-slot="toggle-group-item"]:not([data-variant])[data-state="on"],
.toggle-group-item[data-state="on"],
.toggle-group-item.active,
.toggle-group-item-default[data-state="on"],
.toggle-group-item-default.active {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Toggle Group Item Variant: Outline */
[data-slot="toggle-group-item"][data-variant="outline"],
.toggle-group-item-outline {
    background-color: transparent;
    border: 1px solid var(--input);
    border-left-width: 0;
    color: var(--foreground);
}

[data-slot="toggle-group-item"][data-variant="outline"]:first-child,
.toggle-group-item-outline:first-child {
    border-left-width: 1px;
}

[data-slot="toggle-group-item"][data-variant="outline"]:hover,
.toggle-group-item-outline:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

[data-slot="toggle-group-item"][data-variant="outline"][data-state="on"],
.toggle-group-item-outline[data-state="on"],
.toggle-group-item-outline.active {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* Toggle Group Item Size: Default */
[data-slot="toggle-group-item"][data-size="default"],
[data-slot="toggle-group-item"]:not([data-size]),
.toggle-group-item,
.toggle-group-item-size-default {
    height: 2.25rem;
    padding: 0 0.625rem;
    min-width: 2.25rem;
}

/* Toggle Group Item Size: Small */
[data-slot="toggle-group-item"][data-size="sm"],
.toggle-group-item-sm {
    height: 2rem;
    padding: 0 0.5rem;
    min-width: 2rem;
}

/* Toggle Group Item Size: Large */
[data-slot="toggle-group-item"][data-size="lg"],
.toggle-group-item-lg {
    height: 2.5rem;
    padding: 0 0.75rem;
    min-width: 2.5rem;
}

/* ========================================
   TOOLTIP COMPONENT
   ======================================== */

/* Tooltip Content */
[data-slot="tooltip-content"],
.tooltip-content {
    position: absolute;
    z-index: 50;
    width: fit-content;
    border-radius: 0.375rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    text-wrap: balance;
    pointer-events: none;
    opacity: 0;
    transform-origin: var(--tooltip-transform-origin, center);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Tooltip Visible State */
[data-slot="tooltip-content"][data-state="open"],
[data-slot="tooltip-content"].visible,
.tooltip-content[data-state="open"],
.tooltip-content.visible {
    opacity: 1;
}

/* Tooltip Animations - Fade In */
[data-slot="tooltip-content"][data-state="open"],
.tooltip-content[data-state="open"] {
    animation: tooltip-fade-in 0.15s ease forwards;
}

[data-slot="tooltip-content"][data-state="closed"],
.tooltip-content[data-state="closed"] {
    animation: tooltip-fade-out 0.15s ease forwards;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tooltip-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Tooltip Side Animations */
[data-slot="tooltip-content"][data-side="top"],
.tooltip-content[data-side="top"] {
    --tooltip-transform-origin: bottom center;
}

[data-slot="tooltip-content"][data-side="top"][data-state="open"],
.tooltip-content[data-side="top"][data-state="open"] {
    animation: tooltip-slide-in-from-bottom 0.15s ease forwards;
}

[data-slot="tooltip-content"][data-side="bottom"],
.tooltip-content[data-side="bottom"] {
    --tooltip-transform-origin: top center;
}

[data-slot="tooltip-content"][data-side="bottom"][data-state="open"],
.tooltip-content[data-side="bottom"][data-state="open"] {
    animation: tooltip-slide-in-from-top 0.15s ease forwards;
}

[data-slot="tooltip-content"][data-side="left"],
.tooltip-content[data-side="left"] {
    --tooltip-transform-origin: right center;
}

[data-slot="tooltip-content"][data-side="left"][data-state="open"],
.tooltip-content[data-side="left"][data-state="open"] {
    animation: tooltip-slide-in-from-right 0.15s ease forwards;
}

[data-slot="tooltip-content"][data-side="right"],
.tooltip-content[data-side="right"] {
    --tooltip-transform-origin: left center;
}

[data-slot="tooltip-content"][data-side="right"][data-state="open"],
.tooltip-content[data-side="right"][data-state="open"] {
    animation: tooltip-slide-in-from-left 0.15s ease forwards;
}

@keyframes tooltip-slide-in-from-top {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tooltip-slide-in-from-bottom {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tooltip-slide-in-from-left {
    from {
        opacity: 0;
        transform: translateX(-0.5rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes tooltip-slide-in-from-right {
    from {
        opacity: 0;
        transform: translateX(0.5rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Tooltip Arrow */
[data-slot="tooltip-arrow"],
.tooltip-arrow {
    position: absolute;
    z-index: 50;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--primary);
    fill: var(--primary);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Arrow positioning based on side */
[data-slot="tooltip-content"][data-side="top"] [data-slot="tooltip-arrow"],
.tooltip-content[data-side="top"] .tooltip-arrow {
    bottom: -0.3125rem;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

[data-slot="tooltip-content"][data-side="bottom"] [data-slot="tooltip-arrow"],
.tooltip-content[data-side="bottom"] .tooltip-arrow {
    top: -0.3125rem;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

[data-slot="tooltip-content"][data-side="left"] [data-slot="tooltip-arrow"],
.tooltip-content[data-side="left"] .tooltip-arrow {
    right: -0.3125rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

[data-slot="tooltip-content"][data-side="right"] [data-slot="tooltip-arrow"],
.tooltip-content[data-side="right"] .tooltip-arrow {
    left: -0.3125rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* Tooltip Trigger */
[data-slot="tooltip-trigger"],
.tooltip-trigger {
    cursor: default;
}

/* Tooltip Variants */
.tooltip-dark [data-slot="tooltip-content"],
.tooltip-dark .tooltip-content {
    background-color: var(--foreground);
    color: var(--background);
}

.tooltip-dark [data-slot="tooltip-arrow"],
.tooltip-dark .tooltip-arrow {
    background-color: var(--foreground);
}

.tooltip-light [data-slot="tooltip-content"],
.tooltip-light .tooltip-content {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tooltip-light [data-slot="tooltip-arrow"],
.tooltip-light .tooltip-arrow {
    background-color: var(--card);
    border: 1px solid var(--border);
}