/* =================================================================================
   Beis Anytime - Swiss Typography Style v7 (Complete with Speakers Page)
   Based on International Typographic Style principles
================================================================================= */

/* --- 1. Design System (CSS Variables) --- */
:root {
    /* Rabbi Color Palette */
    --color-hartman: hsl(210, 100%, 45%);
    --color-hartman-light: hsl(210, 100%, 96%);
    --color-hartman-dark: hsl(210, 100%, 35%);
    
    --color-rosenfeld: hsl(145, 65%, 40%);
    --color-rosenfeld-light: hsl(145, 65%, 96%);
    --color-rosenfeld-dark: hsl(145, 65%, 30%);
    
    --color-golker: hsl(30, 95%, 50%);
    --color-golker-light: hsl(30, 95%, 96%);
    --color-golker-dark: hsl(30, 95%, 40%);
    
    --color-guests: hsl(280, 65%, 50%);
    --color-guests-light: hsl(280, 65%, 96%);
    --color-guests-dark: hsl(280, 65%, 40%);

    /* Base Colors */
    --color-primary: hsl(0, 0%, 10%);
    --color-accent: hsl(0, 85%, 45%);
    --color-accent-light: hsl(0, 85%, 96%);
    --color-accent-dark: hsl(0, 85%, 35%);
    
    --color-background: hsl(0, 0%, 97%); 
    --color-surface: hsl(0, 0%, 100%);
    --color-surface-elevated: hsl(0, 0%, 99%);
    
    --color-text-primary: hsl(0, 0%, 10%);
    --color-text-secondary: hsl(0, 0%, 45%);
    --color-text-tertiary: hsl(0, 0%, 60%);
    
    --color-border: hsl(0, 0%, 88%); 
    --color-border-medium: hsl(0, 0%, 75%);
    --color-border-strong: hsl(0, 0%, 20%);
    
    --color-success: hsl(145, 65%, 40%); 
    --color-danger: hsl(0, 85%, 45%);
    --color-warning: hsl(30, 95%, 50%);

    /* Typography */
    --font-family-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
    --font-weight-normal: 400; 
    --font-weight-medium: 500; 
    --font-weight-bold: 700;

    /* 8px Grid System */
    --grid: 8px;
    --space-xs: calc(var(--grid) * 1);
    --space-sm: calc(var(--grid) * 2);
    --space-md: calc(var(--grid) * 3);
    --space-lg: calc(var(--grid) * 4);
    --space-xl: calc(var(--grid) * 6);
    --space-xxl: calc(var(--grid) * 8);
    
    /* Layout */
    --sidebar-width: 280px; 
    --sidebar-width-collapsed: 80px; 
    --max-content-width: 1440px;
    
    /* Visual Elements */
    --border-width: 1px;
    --border-width-medium: 2px;
    --border-width-strong: 3px;
    
    --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.06); 
    --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
    --shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.1);

    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.333rem;
    --text-2xl: 1.777rem;
    --text-3xl: 2.369rem;
    --text-4xl: 3.157rem;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Transitions */
    --transition-speed: 0.2s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Dark Mode --- */
[data-theme="dark"] {
    --color-hartman: hsl(210, 100%, 60%);
    --color-hartman-light: hsla(210, 100%, 60%, 0.15);
    --color-hartman-dark: hsl(210, 100%, 50%);
    
    --color-rosenfeld: hsl(145, 65%, 55%);
    --color-rosenfeld-light: hsla(145, 65%, 55%, 0.15);
    --color-rosenfeld-dark: hsl(145, 65%, 45%);
    
    --color-golker: hsl(30, 95%, 60%);
    --color-golker-light: hsla(30, 95%, 60%, 0.15);
    --color-golker-dark: hsl(30, 95%, 50%);
    
    --color-guests: hsl(280, 65%, 60%);
    --color-guests-light: hsla(280, 65%, 60%, 0.15);
    --color-guests-dark: hsl(280, 65%, 50%);

    --color-primary: hsl(0, 0%, 95%);
    --color-accent: hsl(0, 85%, 60%);
    --color-accent-light: hsla(0, 85%, 60%, 0.15);
    --color-accent-dark: hsl(0, 85%, 50%);
    
    --color-background: hsl(0, 0%, 10%); 
    --color-surface: hsl(0, 0%, 14%);
    --color-surface-elevated: hsl(0, 0%, 16%);
    
    --color-text-primary: hsl(0, 0%, 95%); 
    --color-text-secondary: hsl(0, 0%, 65%);
    --color-text-tertiary: hsl(0, 0%, 50%);
    
    --color-border: hsl(0, 0%, 24%); 
    --color-border-medium: hsl(0, 0%, 35%);
    --color-border-strong: hsl(0, 0%, 80%);
    
    --color-success: hsl(145, 65%, 55%); 
    --color-danger: hsl(0, 85%, 60%);
    --color-warning: hsl(30, 95%, 60%);
}

/* --- 3. Reset & Base --- */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

body { 
    font-family: var(--font-family-sans); 
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    background-color: var(--color-background); 
    color: var(--color-text-primary); 
    transition: background-color var(--transition-speed) var(--transition-easing), 
                color var(--transition-speed) var(--transition-easing); 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    font-weight: var(--font-weight-bold);
}

.site-wrapper { 
    display: flex;
    min-height: 100vh;
}

/* --- 4. Sidebar --- */
.sidebar { 
    width: var(--sidebar-width); 
    background-color: var(--color-surface); 
    height: 100vh; 
    position: fixed; 
    top: 0; 
    left: 0; 
    display: flex; 
    flex-direction: column; 
    transition: width var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing); 
    z-index: 200;
    border-right: var(--border-width) solid var(--color-border);
}

.sidebar-header { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* slightly more vertical padding so the logo has breathing room */
    padding: calc(var(--space-md) * 1.2) var(--space-sm); 
    flex-shrink: 0; 
    border-bottom: var(--border-width) solid var(--color-border);
    height: 120px; /* increased header height to accommodate larger logo */
}

.logo-link {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none;
    width: 100%;
    display: block;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0; /* center the logo inside the header */
}

.logo-full { 
    display: inline-block;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    transition: color var(--transition-speed) var(--transition-easing);
    /* ensure the site name stays on one line next to the icon */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(var(--sidebar-width) - 92px);
}

.logo-full:hover {
    color: var(--color-accent);
}

.logo-icon {
    display: block;
    width: 96px; /* slightly larger width */
    height: auto;
    max-height: 112px; /* slightly larger max height */
    object-fit: contain;
    transition: transform var(--transition-speed) var(--transition-easing);
}

.logo-icon:hover {
    transform: translateY(-2px) scale(1.02);
}

/* --- 5. Sidebar Navigation --- */
.sidebar-nav { 
    padding: var(--space-md) 0; 
    flex-shrink: 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.sidebar-nav ul { 
    list-style: none; 
}

.sidebar-nav a.nav-link { 
    display: flex; 
    align-items: center; 
    gap: var(--space-sm); 
    padding: var(--space-sm) var(--space-md); 
    color: var(--color-text-secondary); 
    text-decoration: none; 
    font-weight: var(--font-weight-normal); 
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-normal);
    border-left: var(--border-width-strong) solid transparent;
    transition: all var(--transition-speed) var(--transition-easing);
    position: relative;
}

.sidebar-nav a.nav-link:hover { 
    color: var(--color-text-primary); 
    background-color: var(--color-background); 
    padding-left: var(--space-lg);
}

.sidebar-nav a.nav-link.active { 
    color: var(--color-text-primary); 
    background-color: var(--color-background); 
    font-weight: var(--font-weight-bold); 
    border-left-color: var(--color-accent);
}

.sidebar-nav .fa-fw { 
    width: 20px; 
    text-align: center; 
    flex-shrink: 0;
}

/* --- 6. Sidebar Search --- */
.sidebar-search {
    padding: var(--space-md);
    flex-grow: 1;
    overflow-y: auto;
}

.search-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
}

.search-bar { 
    display: flex; 
    align-items: center; 
    gap: var(--space-sm); 
    background-color: var(--color-background); 
    border: var(--border-width) solid var(--color-border); 
    padding: var(--space-sm) var(--space-md); 
    width: 100%; 
    transition: border-color var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
}

.search-bar:focus-within { 
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 1px var(--color-border-strong);
}

.search-bar input { 
    border: none; 
    outline: none; 
    background: transparent; 
    font-size: var(--text-sm); 
    line-height: var(--leading-normal);
    width: 100%; 
    color: var(--color-text-primary); 
    font-family: var(--font-family-sans);
}

.search-bar input::placeholder {
    color: var(--color-text-tertiary);
}

.search-bar i {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
}

/* --- 7. Sidebar Footer --- */
.sidebar-footer {
    border-top: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    width: 100%;
}

#theme-toggle { 
    background: transparent; 
    border: none;
    border-right: var(--border-width) solid var(--color-border);
    color: var(--color-text-secondary); 
    font-size: var(--text-base); 
    cursor: pointer; 
    height: 64px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed) var(--transition-easing);
}

#theme-toggle:hover { 
    color: var(--color-surface); 
    background-color: var(--color-text-primary);
}

#theme-toggle .fa-sun { 
    display: none; 
}

[data-theme="dark"] #theme-toggle .fa-sun { 
    display: block; 
} 

[data-theme="dark"] #theme-toggle .fa-moon { 
    display: none; 
}

/* --- 8. Profile Dropdown --- */
.profile-dropdown { 
    position: relative;
    flex: 1;
    display: flex;
}

.profile-toggle { 
    background: none; 
    border: none;
    padding: 0;
    width: 100%;
    height: 64px;
    cursor: pointer; 
    transition: all var(--transition-speed) var(--transition-easing);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-toggle:hover {
    background-color: var(--color-background);
}

#userAvatar { 
    width: 44px; 
    height: 44px; 
    display: block;
    border-radius: 50%;
}

.profile-dropdown .dropdown-menu {
    display: none; 
    position: absolute; 
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: var(--space-xs);
    background-color: var(--color-surface); 
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-lg); 
    z-index: 101;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing);
}

.profile-dropdown.is-active .dropdown-menu { 
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-user-info { 
    padding: var(--space-md); 
    border-bottom: var(--border-width) solid var(--color-border); 
    background-color: var(--color-background);
}

.dropdown-user-info strong { 
    display: block; 
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
    letter-spacing: var(--tracking-normal);
}

.dropdown-user-info span { 
    display: block; 
    font-size: var(--text-xs); 
    color: var(--color-text-secondary); 
    word-break: break-all; 
}

.dropdown-menu .dropdown-item {
    display: flex; 
    align-items: center; 
    gap: var(--space-sm); 
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-primary); 
    text-decoration: none;
    font-size: var(--text-sm);
    border-bottom: var(--border-width) solid var(--color-border);
    transition: all var(--transition-speed) var(--transition-easing);
}

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

.dropdown-menu .dropdown-item:hover { 
    background-color: var(--color-background); 
    padding-left: var(--space-lg);
}

.dropdown-menu .dropdown-item .fa-fw { 
    color: var(--color-text-tertiary); 
    width: 20px;
    text-align: center;
}

.g_id_signin {
    display: flex;
    align-items: center;
    border: none !important;
    height: 64px;
    width: 100%;
    flex: 1;
}

.g_id_signin > div {
    border-radius: 0 !important;
    width: 100%;
}

/* --- 8. Profile Dropdown --- */
.profile-dropdown { 
    position: relative;
    flex: 1;
    display: flex;
}

.profile-toggle { 
    background: none; 
    border: none;
    padding: 0;
    width: 100%;
    height: 64px;
    cursor: pointer; 
    transition: all var(--transition-speed) var(--transition-easing);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-toggle:hover {
    background-color: var(--color-background);
}

#userAvatar { 
    width: 44px; 
    height: 44px; 
    display: block;
    border-radius: 50%;
}

.profile-dropdown .dropdown-menu {
    display: none; 
    position: absolute; 
    bottom: 0;
    left: 100%;
    margin-left: var(--space-xs);
    min-width: 280px;
    background-color: var(--color-surface); 
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-lg); 
    z-index: 101;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing);
}

.profile-dropdown.is-active .dropdown-menu { 
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.dropdown-user-info { 
    padding: var(--space-md); 
    border-bottom: var(--border-width) solid var(--color-border); 
    background-color: var(--color-background);
}

.dropdown-user-info strong { 
    display: block; 
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
    letter-spacing: var(--tracking-normal);
}

.dropdown-user-info span { 
    display: block; 
    font-size: var(--text-xs); 
    color: var(--color-text-secondary); 
    word-break: break-all; 
}

.dropdown-menu .dropdown-item {
    display: flex; 
    align-items: center; 
    gap: var(--space-sm); 
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-primary); 
    text-decoration: none;
    font-size: var(--text-sm);
    border-bottom: var(--border-width) solid var(--color-border);
    transition: all var(--transition-speed) var(--transition-easing);
}

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

.dropdown-menu .dropdown-item:hover { 
    background-color: var(--color-background); 
    padding-left: var(--space-lg);
}

.dropdown-menu .dropdown-item .fa-fw { 
    color: var(--color-text-tertiary); 
    width: 20px;
    text-align: center;
}

.g_id_signin {
    display: flex;
    align-items: center;
    border: none !important;
    height: 64px;
    width: 100%;
    flex: 1;
}

.g_id_signin > div {
    border-radius: 0 !important;
    width: 100%;
}

/* --- 9. Main Content --- */
.main-content { 
    margin-left: var(--sidebar-width); 
    width: calc(100% - var(--sidebar-width)); 
    transition: margin-left var(--transition-speed) var(--transition-easing),
                width var(--transition-speed) var(--transition-easing); 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- 10. Page Content & Video Grid --- */
#app-content-wrapper { 
    padding: var(--space-xl);
    flex: 1;
    max-width: var(--max-content-width);
    width: 100%;
    margin: 0 auto;
}

.page-title { 
    font-size: var(--text-3xl); 
    font-weight: var(--font-weight-bold); 
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-xl); 
    text-transform: uppercase;
    padding-bottom: var(--space-md);
    border-bottom: var(--border-width-medium) solid var(--color-border-strong);
    position: relative;
}

.page-title::after {
    content: '';
    position: absolute;
    bottom: calc(var(--border-width-medium) * -1);
    left: 0;
    width: 80px;
    height: var(--border-width-medium);
    background-color: var(--color-accent);
}

/* --- Hero / Welcome Section --- */
.hero {
    background: linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    padding: calc(var(--space-xl) + var(--space-sm));
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.hero-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
}

.hero-title {
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-sm);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}

.hero-sub {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
}

.hero-actions { 
    display: flex; 
    gap: var(--space-sm); 
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: calc(var(--space-xs) + 2px) var(--space-md);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
}

.btn-ghost:hover {
    background: var(--color-accent);
    color: var(--color-surface);
    border-color: var(--color-accent-dark);
}

/* Ensure video grid spacing below hero */
.recent-videos .video-grid {
    margin-top: var(--space-md);
}

.video-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: var(--space-lg); 
}

.video-card { 
    display: block; 
    background-color: var(--color-surface); 
    text-decoration: none; 
    color: var(--color-text-primary); 
    border: var(--border-width) solid var(--color-border); 
    transition: all var(--transition-speed) var(--transition-easing); 
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: transparent;
    transition: background-color var(--transition-speed) var(--transition-easing);
}

/* Rabbi-specific card colors */
.video-card[data-rabbi="Rabbi_Hartman"]::before {
    background-color: var(--color-hartman);
}

.video-card[data-rabbi="Rabbi_Rosenfeld"]::before {
    background-color: var(--color-rosenfeld);
}

.video-card[data-rabbi="Rabbi_Golker"]::before {
    background-color: var(--color-golker);
}

.video-card[data-rabbi="guests"]::before {
    background-color: var(--color-guests);
}

.video-card:hover { 
    transform: translateY(-4px); 
    box-shadow: var(--shadow-md); 
    border-color: var(--color-border-medium);
}

.video-thumbnail { 
    width: 100%; 
    aspect-ratio: 16 / 9; 
    object-fit: cover; 
    background-color: var(--color-border); 
    display: block; 
    transition: opacity 0.3s var(--transition-easing), transform 0.3s var(--transition-easing);
}

.video-card:hover .video-thumbnail {
    transform: scale(1.02);
}

.video-thumbnail[data-src] {
    opacity: 0.5;
}

.video-info { 
    padding: var(--space-md); 
}

.video-title { 
    font-size: var(--text-base); 
    font-weight: var(--font-weight-bold); 
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    margin: 0 0 var(--space-xs); 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

.video-meta { 
    font-size: var(--text-xs); 
    line-height: var(--leading-normal);
    color: var(--color-text-secondary); 
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
}

/* Rabbi-specific meta colors */
.video-card[data-rabbi="Rabbi_Hartman"] .video-meta {
    color: var(--color-hartman);
}

.video-card[data-rabbi="Rabbi_Rosenfeld"] .video-meta {
    color: var(--color-rosenfeld);
}

.video-card[data-rabbi="Rabbi_Golker"] .video-meta {
    color: var(--color-golker);
}

.video-card[data-rabbi="guests"] .video-meta {
    color: var(--color-guests);
}

.loading, .info-message { 
    text-align: center;
    font-size: var(--text-base); 
    padding: var(--space-xxl); 
    color: var(--color-text-tertiary); 
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--font-weight-medium);
}

/* Loading skeleton */
.loading-skeleton {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- 11. Speakers Page --- */
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.speaker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-top: var(--border-width-strong) solid transparent;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--transition-speed) var(--transition-easing);
    position: relative;
    text-align: center;
}

.speaker-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-medium);
}

.speaker-card-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
    color: var(--color-surface);
    flex-shrink: 0;
    transition: all var(--transition-speed) var(--transition-easing);
}

.speaker-card-content {
    flex: 1;
}

.speaker-name {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-normal);
    display: block;
    text-transform: uppercase;
}

/* Rabbi-specific speaker card colors */
.speaker-card[data-rabbi="Rabbi_Hartman"] {
    border-top-color: var(--color-hartman);
}

.speaker-card[data-rabbi="Rabbi_Hartman"] .speaker-card-icon {
    background-color: var(--color-hartman);
}

.speaker-card[data-rabbi="Rabbi_Hartman"]:hover {
    background-color: var(--color-hartman-light);
}

.speaker-card[data-rabbi="Rabbi_Rosenfeld"] {
    border-top-color: var(--color-rosenfeld);
}

.speaker-card[data-rabbi="Rabbi_Rosenfeld"] .speaker-card-icon {
    background-color: var(--color-rosenfeld);
}

.speaker-card[data-rabbi="Rabbi_Rosenfeld"]:hover {
    background-color: var(--color-rosenfeld-light);
}

.speaker-card[data-rabbi="Rabbi_Golker"] {
    border-top-color: var(--color-golker);
}

.speaker-card[data-rabbi="Rabbi_Golker"] .speaker-card-icon {
    background-color: var(--color-golker);
}

.speaker-card[data-rabbi="Rabbi_Golker"]:hover {
    background-color: var(--color-golker-light);
}

.speaker-card[data-rabbi="guests"] {
    border-top-color: var(--color-guests);
}

.speaker-card[data-rabbi="guests"] .speaker-card-icon {
    background-color: var(--color-guests);
}

.speaker-card[data-rabbi="guests"]:hover {
    background-color: var(--color-guests-light);
}

/* --- 12. View Shiur Page --- */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-lg);
    background-color: transparent;
    color: var(--color-text-primary);
    text-decoration: none;
    border: var(--border-width) solid var(--color-border);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    transition: all var(--transition-speed) var(--transition-easing);
}

.btn-back:hover {
    background-color: var(--color-text-primary);
    color: var(--color-surface);
    border-color: var(--color-text-primary);
    transform: translateX(-4px);
}

.shiur-player-container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background-color: #000;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.video-player-wrapper video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.shiur-details {
    margin-top: var(--space-lg); 
    padding: var(--space-xl); 
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    position: relative;
}

/* Rabbi-specific details accent */
.shiur-details[data-rabbi="Rabbi_Hartman"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-hartman);
}

.shiur-details[data-rabbi="Rabbi_Rosenfeld"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-rosenfeld);
}

.shiur-details[data-rabbi="Rabbi_Golker"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-golker);
}

.shiur-details[data-rabbi="guests"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-guests);
}

.shiur-details h1 { 
    font-size: var(--text-2xl); 
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-sm); 
}

.shiur-details-meta { 
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-md); 
    font-weight: var(--font-weight-bold);
    padding-bottom: var(--space-sm);
    border-bottom: var(--border-width) solid var(--color-border);
}

/* Rabbi-specific meta color on shiur page */
.shiur-details[data-rabbi="Rabbi_Hartman"] .shiur-details-meta {
    color: var(--color-hartman);
}

.shiur-details[data-rabbi="Rabbi_Rosenfeld"] .shiur-details-meta {
    color: var(--color-rosenfeld);
}

.shiur-details[data-rabbi="Rabbi_Golker"] .shiur-details-meta {
    color: var(--color-golker);
}

.shiur-details[data-rabbi="guests"] .shiur-details-meta {
    color: var(--color-guests);
}

.shiur-description { 
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* Title row: title left, actions (like) right */
.shiur-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.shiur-title-row h1 {
    margin: 0;
    font-size: var(--text-2xl);
}

.shiur-title-actions { display: flex; align-items: center; gap: 8px; }

/* smaller inline like button variant next to title */
.like-inline {
    padding: 6px 10px;
    font-size: 0.95rem;
    border-radius: 999px;
    border: var(--border-width) solid var(--color-border);
}

.like-inline.liked {
    background-color: var(--color-accent);
    color: var(--color-surface);
    border-color: var(--color-accent-dark);
}

@media (max-width: 480px) {
    .shiur-title-row { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
    .shiur-title-actions { align-self: stretch; display: flex; justify-content: flex-end; width: 100%; }
}

/* --- 18. Interactions: Likes, Views, Comments --- */
.shiur-interactions {
    margin-top: var(--space-md);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-md);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.interactions-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#views-count {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.btn-like {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: var(--border-width) solid var(--color-border);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: all var(--transition-speed) var(--transition-easing);
}

.btn-like:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-like .fa, .btn-like span { pointer-events: none; }

.btn-like.liked {
    background-color: var(--color-accent);
    color: var(--color-surface);
    border-color: var(--color-accent-dark);
}

#likes-count { font-weight: var(--font-weight-bold); }

#display-name-area input#displayNameInput {
    padding: 8px 10px;
    border-radius: 6px;
    border: var(--border-width) solid var(--color-border);
    background: var(--color-background);
    color: var(--color-text-primary);
}

#display-name-area #saveDisplayNameBtn {
    height: 36px;
}

#comment-form-area textarea#commentText {
    width: 100%;
    padding: var(--space-sm);
    border-radius: 6px;
    border: var(--border-width) solid var(--color-border);
    resize: vertical;
    min-height: 72px;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-background);
}

#comments-section { margin-top: var(--space-md); }

#comments-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }

.comment-item {
    padding: var(--space-sm);
    background: var(--color-background);
    border-radius: 6px;
    border: var(--border-width) solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.comment-time { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.comment-text { color: var(--color-text-secondary); font-size: var(--text-base); white-space: pre-wrap; }

.btn-sm { padding: 6px 10px; font-size: 0.75rem; border-radius: 6px; }

.comment-item .btn { align-self: flex-end; margin-top: 6px; }

/* Focus styles for form inputs */
#display-name-area input:focus, #comment-form-area textarea:focus {
    outline: none;
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 2px var(--color-border-strong);
}

@media (max-width: 768px) {
    .shiur-interactions { padding: var(--space-md); }
    .interactions-stats { gap: 8px; }
    .btn-like { padding: 6px 10px; }
}

/* --- 13. Rabbi Page Header --- */
.rabbi-header {
    background-color: var(--color-surface); 
    border: var(--border-width) solid var(--color-border); 
    padding: var(--space-xl); 
    margin-bottom: var(--space-xl); 
    position: relative;
    overflow: hidden;
}

/* Rabbi-specific header accent */
.rabbi-header[data-rabbi="Rabbi_Hartman"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--color-hartman);
}

.rabbi-header[data-rabbi="Rabbi_Rosenfeld"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--color-rosenfeld);
}

.rabbi-header[data-rabbi="Rabbi_Golker"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--color-golker);
}

.rabbi-header[data-rabbi="guests"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--color-guests);
}

.rabbi-header h1 { 
    font-size: var(--text-3xl); 
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-sm); 
    text-transform: uppercase;
}

.rabbi-header p { 
    font-size: var(--text-sm); 
    line-height: var(--leading-normal);
    margin: 0; 
    max-width: 60ch;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--font-weight-medium);
}

/* Rabbi-specific count color */
.rabbi-header[data-rabbi="Rabbi_Hartman"] p {
    color: var(--color-hartman);
}

.rabbi-header[data-rabbi="Rabbi_Rosenfeld"] p {
    color: var(--color-rosenfeld);
}

.rabbi-header[data-rabbi="Rabbi_Golker"] p {
    color: var(--color-golker);
}

.rabbi-header[data-rabbi="guests"] p {
    color: var(--color-guests);
}

/* --- 14. Admin Panel --- */
.admin-table-container { 
    background-color: var(--color-surface); 
    border: var(--border-width) solid var(--color-border); 
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

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

.admin-table th, 
.admin-table td { 
    padding: var(--space-md); 
    text-align: left; 
    border-bottom: var(--border-width) solid var(--color-border); 
    font-size: var(--text-sm);
}

.admin-table th { 
    font-weight: var(--font-weight-bold); 
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-size: var(--text-xs);
    background-color: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-table tr:last-child td { 
    border-bottom: none; 
}

.admin-table tbody tr {
    transition: background-color var(--transition-speed) var(--transition-easing);
}

.admin-table tbody tr:hover {
    background-color: var(--color-background);
}

.admin-table img {
    border: var(--border-width) solid var(--color-border);
}

.btn-danger { 
    background-color: var(--color-danger); 
    color: white; 
    padding: var(--space-xs) var(--space-md); 
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border: var(--border-width) solid var(--color-danger);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-easing);
    font-family: var(--font-family-sans);
}

.btn-danger:hover { 
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* --- 15. Upload Form --- */
.upload-form { 
    max-width: 800px; 
    margin: 0 auto; 
    background: var(--color-surface); 
    padding: var(--space-xl); 
    border: var(--border-width) solid var(--color-border); 
    box-shadow: var(--shadow-sm);
}

.form-grid { 
    display: grid; 
    gap: var(--space-lg); 
}

.input-group { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-xs);
}

.input-group label { 
    font-weight: var(--font-weight-bold); 
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-primary);
}

.input-group input, 
.input-group select, 
.input-group textarea { 
    padding: var(--space-sm) var(--space-md); 
    border: var(--border-width) solid var(--color-border); 
    background-color: var(--color-background); 
    color: var(--color-text-primary); 
    font-size: var(--text-sm); 
    line-height: var(--leading-normal);
    font-family: var(--font-family-sans); 
    transition: all var(--transition-speed) var(--transition-easing); 
}

.input-group input:focus, 
.input-group select:focus, 
.input-group textarea:focus { 
    outline: none; 
    border-color: var(--color-border-strong); 
    box-shadow: 0 0 0 1px var(--color-border-strong);
}

.input-group textarea { 
    min-height: 120px; 
    resize: vertical; 
    line-height: var(--leading-relaxed);
}

.file-drop-zone { 
    border: var(--border-width-medium) dashed var(--color-border); 
    padding: var(--space-xl); 
    text-align: center; 
    cursor: pointer; 
    transition: all var(--transition-speed) var(--transition-easing);
    background-color: var(--color-background);
}

.file-drop-zone:hover {
    border-color: var(--color-border-medium);
    background-color: var(--color-surface);
}

.file-drop-zone.dragover { 
    border-color: var(--color-accent); 
    background-color: var(--color-accent-light); 
    border-style: solid;
}

#fileName { 
    font-weight: var(--font-weight-bold); 
    margin-top: var(--space-sm); 
    font-size: var(--text-sm);
}

#thumbnailPreview { 
    max-width: 100%; 
    margin-top: var(--space-md); 
    display: none; 
}

#thumbnailPreview img {
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

#thumbnail-controls { 
    display: none; 
    margin-top: var(--space-md); 
}

.form-actions { 
    display: flex; 
    justify-content: flex-start;
    gap: var(--space-md); 
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid var(--color-border);
}

.btn { 
    padding: var(--space-sm) var(--space-lg); 
    border: var(--border-width) solid transparent;
    font-size: var(--text-xs); 
    font-weight: var(--font-weight-bold); 
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    cursor: pointer; 
    transition: all var(--transition-speed) var(--transition-easing); 
    font-family: var(--font-family-sans);
}

.btn-primary { 
    background-color: var(--color-accent); 
    color: white; 
    border-color: var(--color-accent);
}

.btn-primary:hover { 
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-primary:disabled { 
    background-color: var(--color-text-secondary); 
    border-color: var(--color-text-secondary);
    cursor: not-allowed; 
    opacity: 0.6;
    transform: none;
}

.btn-secondary { 
    background-color: transparent; 
    color: var(--color-text-primary); 
    border-color: var(--color-border); 
}

.btn-secondary:hover { 
    background-color: var(--color-text-primary); 
    color: var(--color-surface);
    border-color: var(--color-text-primary);
}

.progress-bar { 
    width: 100%; 
    height: 8px; 
    background-color: var(--color-border); 
    overflow: hidden; 
    margin-top: var(--space-md); 
    display: none; 
    border: var(--border-width) solid var(--color-border);
}

.progress-bar-inner { 
    height: 100%; 
    width: 0%; 
    background-color: var(--color-accent); 
    transition: width 0.3s var(--transition-easing); 
}

/* Video preview */
#videoPreviewContainer {
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-md);
    background-color: var(--color-background);
}

#videoPreview {
    border: var(--border-width) solid var(--color-border);
    width: 100%;
    background: #000;
}

#videoScrubber {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-border);
    outline: none;
}

#videoScrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-speed) var(--transition-easing);
}

#videoScrubber::-webkit-slider-thumb:hover {
    background: var(--color-accent);
}

#videoScrubber::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-text-primary);
    cursor: pointer;
    border: none;
}

#videoScrubber::-moz-range-thumb:hover {
    background: var(--color-accent);
}

/* --- 16. Responsive Design --- */
@media (max-width: 1024px) { 
    .sidebar { 
        width: var(--sidebar-width-collapsed); 
    } 
    
    .sidebar .nav-text, 
    .sidebar .logo-full,
    .sidebar-search { 
        display: none; 
    } 
    
    .sidebar .logo-icon { 
        display: block; 
    } 
    
    .sidebar-nav a.nav-link { 
        justify-content: center; 
        padding: var(--space-md);
    }
    
    .sidebar-nav a.nav-link:hover {
        padding: var(--space-md);
    }
    
    .main-content { 
        margin-left: var(--sidebar-width-collapsed); 
        width: calc(100% - var(--sidebar-width-collapsed)); 
    } 

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .speakers-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) { 
    :root {
        --space-xl: calc(var(--grid) * 4);
        --space-xxl: calc(var(--grid) * 5);
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* On mobile, dropdown appears above */
    .profile-dropdown .dropdown-menu {
        left: 0;
        right: 0;
        bottom: 100%;
        margin-left: 0;
        margin-bottom: var(--space-xs);
        transform: translateY(8px);
    }

    .profile-dropdown.is-active .dropdown-menu {
        transform: translateY(0);
    }
    
    #app-content-wrapper { 
        padding: var(--space-md); 
    } 
    
    .page-title { 
        font-size: var(--text-2xl); 
    }
    
    .rabbi-header h1, 
    .shiur-details h1 { 
        font-size: var(--text-xl); 
    } 
    
    .video-grid { 
        grid-template-columns: 1fr; 
        gap: var(--space-md);
    }

    .speakers-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .upload-form,
    .rabbi-header,
    .shiur-details {
        padding: var(--space-md);
    }

    .form-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .video-grid {
        gap: var(--space-sm);
    }

    .speakers-grid {
        gap: var(--space-sm);
    }

    .page-title {
        font-size: var(--text-xl);
    }
}

/* --- 17. Utility Classes --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}