/* ============================================
   XRLAB - MODERN DESIGN SYSTEM
   Inspired by commercial showroom aesthetics
   ============================================ */

/* Import Design System Tokens */
@import url('../design-system/design-tokens.css');
@import url('hero-unified.css');

/* ========================
   CSS CUSTOM PROPERTIES
   Note: Colors, typography, and component tokens are in design-tokens.css
========================= */
:root {
    /* Layout-specific Spacing (app-specific, not in design tokens) */
    --sidebar-width: 70px;
    --sidebar-expanded: 290px;
    --navbar-height: 52px;
    --header-height: 110px;
    --logo-width: var(--sidebar-expanded);
    --content-padding: 24px;
}

/* ========================
   GLOBAL RESET & BASE
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    transition: font-size 0.2s ease-in-out;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ========================
   TYPOGRAPHY
   Uses design tokens from design-tokens.css
========================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
}

h1 {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    margin-bottom: var(--h1-margin-bottom);
}

h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    margin-bottom: var(--h2-margin-bottom);
}

h3 {
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    margin-bottom: var(--h3-margin-bottom);
}

h4 {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    margin-bottom: var(--h4-margin-bottom);
}

h5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    margin-bottom: var(--h5-margin-bottom);
}

h6 {
    font-size: var(--h6-size);
    font-weight: var(--h6-weight);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
    margin-bottom: var(--h6-margin-bottom);
}

p {
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Subheading utility class */
.subheading {
    font-size: var(--subheading-size);
    font-weight: var(--subheading-weight);
    line-height: var(--subheading-line-height);
    color: var(--text-secondary);
}

/* Caption utility class */
.caption {
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
    color: var(--text-tertiary);
}

/* Label styling */
label,
.form-label {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    color: var(--text-secondary);
    margin-bottom: var(--label-margin-bottom);
}

/* Overline utility class */
.overline {
    font-size: var(--overline-size);
    font-weight: var(--overline-weight);
    line-height: var(--overline-line-height);
    letter-spacing: var(--overline-letter-spacing);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Mobile typography adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: var(--h1-size-mobile);
    }

    h2 {
        font-size: var(--h2-size-mobile);
    }

    h3 {
        font-size: var(--h3-size-mobile);
    }

    h4 {
        font-size: var(--h4-size-mobile);
    }

    h5 {
        font-size: var(--h5-size-mobile);
    }

    h6 {
        font-size: var(--h6-size-mobile);
    }
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-secondary);
}

/* ========================
   APP LAYOUT STRUCTURE
========================= */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-primary);
}

/* ========================
   TOP HEADER WITH LOGO
========================= */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    z-index: 1100;
}

.header-logo {
    width: var(--sidebar-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border-right: 1px solid var(--border-subtle);
    padding: 12px;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
}

/* When sidebar is expanded, logo area expands too */
body.sidebar-expanded .header-logo {
    width: var(--sidebar-expanded);
}

.header-logo img {
    width: 42px;
    height: 42px;
    max-height: 42px;
    max-width: 42px;
    object-fit: contain;
    display: block;
}

/* Logo theme switching - Hide default Adiqu logos, show BUW logos */
.header-logo .logo-light,
.header-logo .logo-dark {
    display: none !important;
}

/* Hide mobile logo by default on desktop */
.header-logo .logo-mobile {
    display: none !important;
}

/* BUW Logo switching based on sidebar state */
.header-logo .logo-uni-collapsed {
    display: block !important;
}

.header-logo .logo-uni-expanded {
    display: none !important;
}

/* When sidebar is expanded, show full BUW logo, hide collapsed logo */
body.sidebar-expanded .header-logo .logo-uni-expanded {
    display: block !important;
}

body.sidebar-expanded .header-logo .logo-uni-collapsed {
    display: none !important;
}

/* When sidebar is expanded, logo gets bigger */
body.sidebar-expanded .header-logo img {
    width: 220px;
    height: 73px;
    max-height: 73px;
    max-width: 220px;
}

@media (max-width: 768px) {
    :root {
        --logo-width: 180px;
    }

    .header-logo img {
        width: 120px;
        height: 64px;
        max-height: 64px;
        max-width: 120px;
    }
}

.header-navbars {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.header-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    width: 100%;
}

.header-navbar-primary {
    height: 55px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.header-navbar-secondary {
    height: 55px;
    background-color: var(--bg-tertiary);
}

.header-navbar .navbar-left,
.header-navbar .navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}


/* Social Media Links */
.social-media-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--accent-primary);
    font-size: 1.1rem;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white !important;
    transform: translateY(-2px);
}

.social-link:hover i {
    color: white !important;
}

.social-link i {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: color var(--transition-fast);
    transition: color var(--transition-fast);
}

/* ========================
   SIDEBAR STYLES (Adjusted)
========================= */
.app-sidebar {
    position: fixed;
    left: 0;
    top: var(--header-height);
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Collapsed sidebar styling */
.app-sidebar:not(.expanded) {
    cursor: ew-resize;
}

/* Icons should show pointer when sidebar is collapsed */
.app-sidebar:not(.expanded) .sidebar-nav-icon {
    cursor: pointer;
}

/* Sidebar toggle button - absolutely positioned */
.sidebar-toggle-btn {
    position: absolute;
    top: 8px;
    right: 50%;
    transform: translateX(50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    z-index: 10;
    transition: background 0.2s ease, color 0.2s ease, right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Icon visibility - show expand icon when collapsed */
.sidebar-toggle-btn .icon-expand {
    display: block;
}

.sidebar-toggle-btn .icon-collapse {
    display: none;
}

/* When expanded - move button to right side */
.app-sidebar.expanded .sidebar-toggle-btn {
    right: 10px;
    transform: translateX(0);
}

.app-sidebar.expanded .sidebar-toggle-btn .icon-expand {
    display: none;
}

.app-sidebar.expanded .sidebar-toggle-btn .icon-collapse {
    display: block;
}

/* Sidebar expands on click (not hover) */
.app-sidebar.expanded {
    width: var(--sidebar-expanded);
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    transition: margin-left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Content shifts when sidebar is expanded */
.app-sidebar.expanded~.app-main {
    margin-left: var(--sidebar-expanded);
}

.app-navbar {
    position: sticky;
    top: 0;
    height: var(--navbar-height);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 var(--content-padding);
    z-index: 900;
}

.app-content {
    flex: 1;
    padding: var(--content-padding);
    background-color: var(--bg-primary);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Hero Section Wrapper - matches .app-content width so breadcrumb/slider align with content */
.hero-section-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--content-padding);
    padding-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Content container for very large screens */
@media (min-width: 1920px) {
    .app-main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .app-content {
        max-width: 1600px;
    }
}

/* ========================
   SIDEBAR STYLES
========================= */
.sidebar-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px;
    flex-shrink: 0;
}

.sidebar-logo img {
    max-height: 36px;
    max-width: 100%;
    object-fit: contain;
}

.sidebar-nav {
    flex: 1;
    padding: 56px 0 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 15px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.sidebar-nav-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-nav-item.active {
    background-color: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.15);
    color: var(--text-primary);
}

.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 36px;
    background-color: var(--accent-primary);
    border-radius: 0 4px 4px 0;
}

/* Icon container - centered in collapsed state */
.sidebar-nav-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-medium);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
}

.sidebar-nav-item:hover .sidebar-nav-icon {
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: scale(1.05);
}

.sidebar-nav-item.active .sidebar-nav-icon {
    border-color: var(--accent-primary);
    background-color: var(--accent-primary);
    color: white;
}

/* Label - slides in on expand */
.sidebar-nav-label {
    margin-left: 14px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s,
        width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        margin 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-10px);
}

.app-sidebar.expanded .sidebar-nav-label {
    opacity: 1;
    width: auto;
    transform: translateX(0);
}

.sidebar-nav-item.active .sidebar-nav-label {
    color: var(--text-primary);
}

.sidebar-divider {
    display: none;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

/* Sidebar Branding (Bottom Logos) */
.sidebar-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 12px;
    margin-top: auto;
    flex-shrink: 0;
    transition: gap 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        padding 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        flex-direction 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-brand-link:hover {
    opacity: 1;
    transform: scale(1.05);
}

.sidebar-brand-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: brightness(1);
    transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-brand-logo.medialab-logo {
    height: 40px;
}

.sidebar-brand-logo.zim-logo {
    height: 44px;
}

.sidebar-brand-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.4);
    transition: none;
}

/* Collapsed sidebar - hide branding text, show smaller logos */
.app-sidebar:not(.expanded) .sidebar-branding {
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px;
}

.app-sidebar:not(.expanded) .sidebar-brand-divider {
    width: 70%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.app-sidebar:not(.expanded) .sidebar-brand-logo {
    height: 32px;
}

.app-sidebar:not(.expanded) .sidebar-brand-logo.medialab-logo {
    height: 32px;
}

.app-sidebar:not(.expanded) .sidebar-brand-logo.zim-logo {
    height: 47px;
}

/* Expanded sidebar - full logos side by side */
.app-sidebar.expanded .sidebar-branding {
    gap: 20px;
    padding: 24px 20px;
}

.app-sidebar.expanded .sidebar-brand-logo {
    height: 48px;
}

.app-sidebar.expanded .sidebar-brand-logo.medialab-logo {
    height: 35px;
}

.app-sidebar.expanded .sidebar-brand-logo.zim-logo {
    height: 70px;
}

/* Light theme adjustments */

body.theme-light .sidebar-brand-logo {
    filter: brightness(0.2);
}

body.theme-light .sidebar-brand-divider {
    background: rgba(0, 0, 0, 0.3);
}

/* ========================
   SIDEBAR ADMIN PANEL
========================= */
.sidebar-admin-section {
    position: relative;
}

.sidebar-admin-trigger {
    cursor: pointer;
}

.sidebar-admin-dropdown {
    position: fixed;
    bottom: 60px;
    left: var(--sidebar-width);
    width: 320px;
    max-height: 75vh;
    overflow-y: auto;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px 0;
    display: none;
    z-index: 1100;
    transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Show dropdown on click via JavaScript */
.sidebar-admin-dropdown.show {
    display: block;
    animation: dropdownSlideIn 0.2s ease-out;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

/* When sidebar is expanded, adjust dropdown position */
.app-sidebar.expanded .sidebar-admin-dropdown.show {
    left: var(--sidebar-expanded);
}

.sidebar-admin-dropdown::-webkit-scrollbar {
    width: 6px;
}

.sidebar-admin-dropdown::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

.admin-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.admin-panel-header i {
    color: #ffffff;
    font-size: 1.1rem;
}

.admin-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.admin-dropdown-item,
a.admin-dropdown-item,
a.admin-dropdown-item:link,
a.admin-dropdown-item:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    color: #ffffff !important;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.admin-dropdown-item:hover,
a.admin-dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-secondary) !important;
    padding-left: 24px;
}

.admin-dropdown-item i {
    font-size: 1.1rem;
    width: 22px;
    text-align: center;
    color: var(--accent-primary);
}

.admin-dropdown-item:hover i {
    color: var(--accent-secondary);
}

.admin-dropdown-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 8px 0;
}

/* Logout button in sidebar */
.sidebar-logout-btn {
    color: #ef4444 !important;
}

.sidebar-logout-btn i {
    color: #ef4444 !important;
}

.sidebar-logout-btn:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* ========================
   RIGHT SIDEBAR STYLES
========================= */
.app-sidebar-right {
    position: fixed;
    right: 0;
    top: var(--header-height);
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Right sidebar nav - padding to match left sidebar exactly */
.app-sidebar-right .sidebar-nav {
    padding: 56px 0 12px 0;
}

/* Collapsed sidebar styling */
.app-sidebar-right:not(.expanded) {
    cursor: ew-resize;
}

/* Icons should show pointer when sidebar is collapsed */
.app-sidebar-right:not(.expanded) .sidebar-nav-icon {
    cursor: pointer;
}

/* Right sidebar toggle button - absolutely positioned like left sidebar */
.sidebar-right-toggle-btn {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, color 0.2s ease, left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-right-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* When expanded - move button to left edge */
.app-sidebar-right.expanded .sidebar-right-toggle-btn {
    left: 10px;
    transform: translateX(0);
}

/* Icon visibility - show expand icon when collapsed */
.sidebar-right-toggle-btn .icon-expand {
    display: block;
}

.sidebar-right-toggle-btn .icon-collapse {
    display: none;
}

/* When expanded - show collapse icon */
.app-sidebar-right.expanded .sidebar-right-toggle-btn .icon-expand {
    display: none;
}

.app-sidebar-right.expanded .sidebar-right-toggle-btn .icon-collapse {
    display: block;
}

/* Right sidebar expands on click */
.app-sidebar-right.expanded {
    width: var(--sidebar-expanded);
    box-shadow: var(--shadow-lg);
    cursor: default;
}

/* Right sidebar nav label visibility */
.app-sidebar-right .sidebar-nav-label {
    margin-left: 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s,
        width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        margin 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(10px);
}

.app-sidebar-right.expanded .sidebar-nav-label {
    opacity: 1;
    width: auto;
    transform: translateX(0);
}

/* Main content margin adjustment for right sidebar */
.app-main {
    margin-right: 0;
    transition: margin-left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        margin-right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* When user is authenticated, add right margin for collapsed right sidebar */
body[data-user-authenticated="true"] .app-main {
    margin-right: var(--sidebar-width);
}

/* Content shifts when right sidebar is expanded */
body.sidebar-right-expanded .app-main {
    margin-right: var(--sidebar-expanded);
}

/* Right sidebar admin dropdown positioning */
.sidebar-admin-dropdown-right {
    left: auto !important;
    right: var(--sidebar-width);
}

.app-sidebar-right.expanded .sidebar-admin-dropdown-right.show {
    right: var(--sidebar-expanded);
}

/* Animation for right sidebar dropdown */
.sidebar-admin-dropdown-right.show {
    animation: dropdownSlideInRight 0.2s ease-out;
}

@keyframes dropdownSlideInRight {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

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

/* ========================
   NAVBAR STYLES
========================= */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.navbar-brand img {
    height: 28px;
}

.navbar-nav-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 32px;
}

.navbar-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.navbar-nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.navbar-nav-link.active {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.navbar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.navbar-action-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.navbar-search {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 0 12px;
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.navbar-search:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.navbar-search input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 8px;
    font-size: 0.9rem;
    width: 200px;
    outline: none;
}

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

.navbar-search i {
    color: var(--text-tertiary);
}

/* ========================
   TOP TOOLBAR (Accessibility)
========================= */
.top-toolbar {
    height: 36px;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--content-padding);
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.toolbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.toolbar-link i,
.toolbar-link svg {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toolbar-link:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.toolbar-btn i,
.toolbar-btn svg {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toolbar-btn:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Leichte Sprache icon - bigger for accessibility */
.leichte-sprache-icon {
    width: 22px !important;
    height: 22px !important;
}

/* KI Labor Button - Accent color with white hover */
.ki-labor-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-right: 8px !important;
    background: var(--accent-primary);
    color: #ffffff !important;
    font-weight: 500;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--accent-primary);
}

.ki-labor-btn span {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff !important;
}

.ki-labor-btn:hover {
    background: #ffffff;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ki-labor-btn:hover span {
    color: var(--accent-primary) !important;
}

.ki-labor-btn:hover i {
    color: var(--accent-primary) !important;
}

.ki-labor-btn i.bi-stars {
    font-size: 1rem;
    color: #ffffff !important;
    animation: ki-stars-float 3s ease-in-out infinite;
}

@keyframes ki-stars-float {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    25% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.9;
    }

    50% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    75% {
        transform: scale(1.1) rotate(-5deg);
        opacity: 0.9;
    }
}

/* KI Labor Active State (for authenticated users) */
.ki-labor-btn.ki-labor-active {
    background: var(--accent-primary);
    color: #ffffff !important;
    cursor: default;
    border: 1px solid var(--accent-primary);
    padding: 8px 18px;
}

.ki-labor-btn.ki-labor-active span {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 0.9rem;
}

.ki-labor-btn.ki-labor-active:hover {
    background: #ffffff;
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ki-labor-btn.ki-labor-active:hover span,
.ki-labor-btn.ki-labor-active:hover i {
    color: var(--accent-primary) !important;
}

.ki-labor-btn.ki-labor-active i.bi-stars {
    color: #ffffff !important;
    font-size: 1rem;
}

.ki-labor-btn.ki-labor-active i.bi-check-circle-fill {
    color: #ffffff !important;
}

@keyframes ki-stars-sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    25% {
        transform: scale(1.2) rotate(10deg);
    }

    50% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }

    75% {
        transform: scale(1.2) rotate(-10deg);
    }
}

/*.ki-labor-check {
    font-size: 0.65rem;
    margin-left: 2px;
    color: var(--accent-primary);
}
*/
@keyframes sparkle {

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

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ========================
   MODERN CARDS - Enhanced Premium Design
========================= */
.modern-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.modern-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, var(--accent-primary) 50%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.modern-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-primary);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 40px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.modern-card:hover::before {
    opacity: 1;
}

.modern-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.modern-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modern-card:hover .modern-card-image::after {
    opacity: 1;
}

.modern-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-card:hover .modern-card-image img {
    transform: scale(1.1);
}

.modern-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    border: 1px solid #ffffff;
    z-index: 2;
}

/* Status-specific badge colors */
.modern-card-badge.status-einstieg {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%);
}

.modern-card-badge.status-aufbau {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
}

.modern-card-badge.status-advanced {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
}

.modern-card-badge.status-alllevel {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9) 0%, rgba(217, 119, 6, 0.9) 100%);
}

.modern-card-badge.status-blendedlearning {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.9) 0%, rgba(219, 39, 119, 0.9) 100%);
}

.modern-card-badge.status-zertifikat {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
}

.modern-card-lock {
    position: absolute;
    top: 12px;
    left: auto;
    right: 50px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 95%, transparent) 0%, color-mix(in srgb, var(--accent-primary) 85%, black) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #ffffff !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-primary) 40%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.modern-card-lock i {
    color: inherit;
}

.modern-card-body {
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.modern-card-tags-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.modern-card-tags-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg-card, #1a1a2e));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.modern-card-tags-wrapper.has-overflow::after {
    opacity: 1;
}

body.theme-light .modern-card-tags-wrapper::after {
    background: linear-gradient(to right, transparent, var(--bg-card, #ffffff));
}

.modern-card-tags {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 24px;
}

.modern-card-tags::-webkit-scrollbar {
    display: none;
}

.modern-card-tag {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.modern-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.modern-card:hover .modern-card-title {
    color: var(--accent-primary);
}

.modern-card-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
    line-height: 1.6;
}

.modern-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.modern-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.modern-card-meta-item i {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

.modern-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.modern-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.modern-card-link:hover,
.modern-card:hover .modern-card-link {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
}

.modern-card-link i {
    transition: transform 0.3s ease;
}

.modern-card:hover .modern-card-link i {
    transform: translateX(4px);
}

.modern-card-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.modern-card-visit:hover {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
}

body.theme-light .modern-card-visit {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

body.theme-light .modern-card-visit:hover {
    background: var(--accent-primary);
    color: #ffffff;
}

/* Favorite button on cards */
.modern-card-image .favorite-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.modern-card-image .favorite-btn:hover {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
    transform: scale(1.15);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.modern-card-image .favorite-btn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.modern-card-image .favorite-btn.active i::before {
    content: "\F148";
}

/* Light theme card adjustments */
body.theme-light .modern-card {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

body.theme-light .modern-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

body.theme-light .modern-card-link {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

body.theme-light .modern-card-link:hover,
body.theme-light .modern-card:hover .modern-card-link {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* ========================
   CARD GRID
========================= */
.modern-card-slider-image {
    height: 200px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.modern-card-slider-image img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform var(--transition-slow);
}

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

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ========================
   HERO SECTION
========================= */
/* Hero wrapper to constrain width like app-content */
.app-main>.hero-section,
.app-main>.slider-wrapper,
.app-main>.video-container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    width: 100%;
    box-sizing: border-box;
}

.hero-section {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.hero-carousel {
    height: 100%;
}

.hero-slide {
    position: relative;
    height: 100%;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 48px 64px;
    /* Smooth gradient from bottom - no harsh boxes */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0.15) 60%,
        transparent 100%
    );
    z-index: 1;
}

.hero-title,
.hero-description {
    position: relative;
    z-index: 1;
    /* No background boxes - text sits on the gradient */
    background: none;
    padding: 0;
    border-radius: 0;
    width: auto;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hero-title *,
.hero-title span,
.hero-title font {
    color: #ffffff !important;
    text-shadow: inherit;
}

.hero-description {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 600px;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-description *,
.hero-description span,
.hero-description font {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: inherit;
}

/* Hero Carousel Navigation Arrows */
.hero-arrow {
    width: 56px !important;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.hero-arrow:hover {
    opacity: 1;
}

.hero-arrow-icon {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    padding: 18px !important;
    width: 44px !important;
    height: 44px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-arrow:hover .hero-arrow-icon {
    background-color: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.08);
}

/* Hero Indicator Dots */
.hero-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.hero-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-dot:hover {
    background-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.15);
}

.hero-dot.active {
    background-color: var(--accent-primary) !important;
    width: 32px;
    border-radius: 7px;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Bootstrap Carousel Indicators - Dark Theme */
.carousel-indicators {
    margin-bottom: 1rem;
}

.carousel-indicators button,
.carousel-indicators [data-bs-target] {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    margin: 0 6px !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1 !important;
}

.carousel-indicators button.active,
.carousel-indicators [data-bs-target].active,
.carousel-indicators .active {
    background-color: var(--accent-primary) !important;
    width: 32px !important;
    border-radius: 7px !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px rgba(255, 255, 255, 0.2) !important;
}

/* ========================
   FILTER SECTION
========================= */
.filter-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

/* --- Filter Rows --- */
.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-toggle-btn,
.filter-clear-btn,
.filter-count {
    height: 40px;
    box-sizing: border-box;
}

.filter-row > .filter-controls,
.filter-row > .filter-count-wrapper {
    flex: 1;
    min-width: 0;
}

.filter-count-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* --- Search Bar (matches MakerSpace style) --- */
.filter-search {
    flex: 0 1 400px;
    min-width: 0;
}

.filter-search .input-group {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: inline-flex;
    width: 100%;
    max-width: 400px;
    transition: all var(--transition-fast);
}

.filter-search .input-group:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-search .input-group .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1rem;
    padding: 12px 16px;
    color: var(--text-primary) !important;
}

.filter-search .input-group .form-control::placeholder {
    color: var(--text-tertiary) !important;
}

.filter-search .input-group .input-group-text {
    background: transparent;
    border: none;
    padding-right: 16px;
}

.filter-search .input-group .input-group-text i {
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 5px 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.filter-count span {
    color: var(--accent-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

/* --- Controls Row (stable) --- */
.filter-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* --- Toggle Buttons (Filter / Tags) --- */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.filter-toggle-btn i {
    font-size: 0.8rem;
    opacity: 0.65;
}

.filter-toggle-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-toggle-btn:hover i {
    opacity: 1;
}

.filter-toggle-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.filter-toggle-btn.active i {
    opacity: 1;
}

.filter-toggle-btn .tags-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    line-height: 1;
}

.filter-toggle-btn.active .tags-count {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Clear Button --- */
.filter-clear-btn {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-clear-btn i {
    font-size: 0.78rem;
}

.filter-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
    opacity: 1;
}

.filter-clear-btn.highlighted {
    display: inline-flex;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* --- Category Chips Row (collapsible) --- */
.filter-dropdowns,
.filter-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    position: relative;
}

.filter-dropdowns.show,
.filter-panel.show {
    display: flex;
    animation: filterPanelSlideIn 0.2s ease;
}

/* Accent left bar to distinguish panels */
.filter-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-primary);
}

/* Tags panel gets a different accent color */
#tagsPanel::before {
    background: color-mix(in srgb, var(--accent-primary) 60%, #a78bfa);
}

.filter-panel-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-panel-label i {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

#tagsPanel .filter-panel-label i {
    color: color-mix(in srgb, var(--accent-primary) 60%, #a78bfa);
}

.filter-panel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

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

.filter-dropdown {
    position: relative;
}

.filter-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-dropdown-btn .bi-chevron-down {
    font-size: 0.6rem;
    opacity: 0.45;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.filter-dropdown-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-dropdown-btn:hover .bi-chevron-down {
    opacity: 0.7;
}

.filter-dropdown-btn.has-selection {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 600;
}

/* --- Dropdown Menu (popover) --- */
.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    display: none;
}

.filter-dropdown-menu.show {
    display: block;
    animation: dropdownFadeIn 0.12s ease-out;
}

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

.filter-dropdown-menu::-webkit-scrollbar {
    width: 5px;
}

.filter-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.filter-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

.filter-dropdown-header {
    padding: 8px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.filter-option:hover {
    background: var(--bg-tertiary);
}

.filter-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.filter-option label {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 450;
    cursor: pointer;
    transition: color 0.1s ease;
}

.filter-option:hover label {
    color: var(--text-primary);
}

/* --- Tags Section (Row 3) --- */
.filter-section .tags-section {
    display: none;
}

.filter-section .tags-section.tags-visible {
    display: block;
    animation: filterTagsSlideIn 0.2s ease;
}

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

.filter-section .tags-container {
    display: none;
}

.filter-section .tags-container.expanded {
    display: block;
}

.filter-section .tags-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-section .tag-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-section .tag-filter-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-section .tag-filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* ========================
   PAGINATION
========================= */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination-btn:hover:not(.disabled) {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.pagination-btn.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================
   BUTTONS
   Uses design tokens from design-tokens.css
========================= */

/* Base button styles */
.btn,
[class*="btn-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    font-family: var(--btn-font);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    min-height: var(--btn-min-height);
    border-radius: var(--btn-border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

/* ============================================
   ALL BUTTONS: Filled default → Outlined on hover
   ============================================ */

/* Primary Button */
.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent) !important;
}

.btn-primary:hover {
    background-color: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--bg-tertiary);
    color: var(--text-primary);
}

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

/* Ghost/Outline Button */
.btn-outline,
.btn-ghost {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent) !important;
}

.btn-outline:hover,
.btn-ghost:hover {
    background-color: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

/* Danger Button */
.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger) !important;
}

/* Success Button */
.btn-success {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

/* Warning Button */
.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #1a1a1a !important;
}

.btn-warning:hover {
    background-color: transparent;
    border-color: var(--color-warning);
    color: var(--color-warning) !important;
}

/* Info Button */
.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #ffffff !important;
}

.btn-info:hover {
    background-color: transparent;
    border-color: var(--color-info);
    color: var(--color-info) !important;
}

/* Bootstrap outline variants - also filled default, outlined hover */
.btn-outline-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff !important;
}

.btn-outline-primary:hover {
    background-color: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

.btn-outline-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #ffffff !important;
}

.btn-outline-success:hover {
    background-color: transparent;
    border-color: var(--color-success);
    color: var(--color-success) !important;
}

.btn-outline-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #ffffff !important;
}

.btn-outline-danger:hover {
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger) !important;
}

.btn-outline-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #1a1a1a !important;
}

.btn-outline-warning:hover {
    background-color: transparent;
    border-color: var(--color-warning);
    color: var(--color-warning) !important;
}

.btn-outline-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #ffffff !important;
}

.btn-outline-info:hover {
    background-color: transparent;
    border-color: var(--color-info);
    color: var(--color-info) !important;
}

.btn-outline-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

.btn-outline-secondary:hover {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-primary) !important;
}

/* Button icons/spans inherit color on hover */
[class*="btn-"]:hover i,
[class*="btn-"]:hover span:not(.badge) {
    color: inherit !important;
}

/* btn-check toggles: outline=unchecked, filled=checked */
.btn-check+.btn-outline-primary,
.btn-check+.btn-outline-success {
    background: transparent !important;
    color: var(--accent-primary) !important;
}

.btn-check+.btn-outline-primary {
    border-color: var(--accent-primary);
}

.btn-check+.btn-outline-success {
    border-color: var(--color-success);
    color: var(--color-success) !important;
}

.btn-check:checked+.btn-outline-primary,
.btn-check:checked+.btn-outline-success {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* Small Button */
.btn-sm {
    font-size: var(--btn-sm-font-size);
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
    min-height: var(--btn-sm-min-height);
    border-radius: var(--btn-sm-border-radius);
}

/* Large Button */
.btn-lg {
    font-size: var(--btn-lg-font-size);
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
    min-height: var(--btn-lg-min-height);
}

/* Button Group Spacing */
.btn-group,
.button-group {
    display: flex;
    gap: var(--btn-group-gap);
}

/* ========================
   FORM ELEMENTS
   Uses design tokens from design-tokens.css
========================= */

/* Form input base */
.form-input {
    width: 100%;
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    min-height: var(--input-min-height);
    background-color: var(--bg-input);
    border: var(--input-border-width) solid var(--border-input);
    border-radius: var(--input-border-radius);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

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

/* ========================
   FOOTER
========================= */
.app-footer {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-top: 1px solid var(--border-subtle);
    padding: 0;
    margin-top: auto;
    width: 100%;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Footer Navigation Links */
.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 6px;
    transition: all var(--transition-fast);
    background: transparent;
}

.footer-link i {
    font-size: 1.3rem;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    line-height: 1;
    display: flex;
    align-items: center;
}

.footer-link:hover {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.footer-link:hover i {
    opacity: 1;
}

.footer-divider {
    width: 1px;
    height: 14px;
    background: var(--border-subtle);
    margin: 0 4px;
}

/* Footer Copyright Section */
.footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    width: 100%;
    max-width: 600px;
}

.footer-copyright-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.footer-copyright-text .copyright-symbol {
    font-weight: 600;
    color: var(--accent-primary);
}

.footer-copyright-text strong {
    color: var(--accent-primary);
    font-weight: 700;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.footer-brand-text {
    opacity: 0.8;
}

.footer-brand-separator {
    opacity: 0.4;
}

/* Mobile Responsive Footer */
@media (max-width: 768px) {
    .footer-inner {
        padding: 14px 16px;
        gap: 10px;
    }

    .footer-nav {
        gap: 4px;
    }

    .footer-link {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .footer-link span {
        display: none;
    }

    .footer-link i {
        font-size: 1.1rem;
        opacity: 1;
    }

    .footer-divider {
        display: none;
    }

    .footer-copyright-text {
        font-size: 0.85rem;
        text-align: center;
    }

    .footer-brand {
        flex-direction: column;
        gap: 4px;
    }

    .footer-brand-separator {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer-link {
        padding: 10px;
    }
}

/* ========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ========================
   THEME SYSTEM - 4 Premium Themes
========================= */

/* Theme 1: Dark Mode (Default - Existing) */
/* Already defined in :root */

/* Theme 2: Premium Light Mode - Blue Accent */
body.theme-light {
    --bg-primary: #FAFAFA;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #EEEEEE;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FAFAFA;

    /* Blue accent colors */
    --accent-primary: #2563eb;
    --accent-secondary: #3b82f6;
    --accent-tertiary: #1d4ed8;
    --accent-glow: rgba(37, 99, 235, 0.15);

    /* High contrast text - dark on light backgrounds */
    --text-primary: #1A1A1A;
    --text-secondary: #333333;
    --text-tertiary: #666666;
    --text-muted: #999999;

    /* Text for colored backgrounds - must be white */
    --text-on-accent: #FFFFFF;
    --text-on-primary: #FFFFFF;

    --border-subtle: rgba(26, 26, 26, 0.1);
    --border-medium: rgba(26, 26, 26, 0.15);
    --border-primary: #E0E0E0;
    --border-accent: rgba(37, 99, 235, 0.4);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);

    /* Action colors */
    --color-success: #10b981;
    --color-danger: #DC3545;
    --color-warning: #FFC107;
    --color-info: #17A2B8;
}

body.theme-light .app-sidebar {
    box-shadow: 1px 0 12px rgba(28, 25, 23, 0.06);
}

body.theme-light .sidebar-logo img {
    filter: brightness(0) saturate(100%);
}

body.theme-light .toolbar-link img {
    filter: brightness(0) saturate(100%) opacity(0.6);
}

body.theme-light .modern-card {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
}

body.theme-light .modern-card:hover {
    box-shadow: var(--shadow-md);
}

/* Light Theme - Comprehensive Typography & Contrast Fixes */

/* Buttons - Filled default, outlined hover (light theme) */
body.theme-light .btn-primary,
body.theme-light .btn-create,
body.theme-light .btn-submit,
body.theme-light .btn-add,
body.theme-light [class*="btn-accent"] {
    color: #FFFFFF !important;
    background: #2563eb;
    border-color: #2563eb;
}

body.theme-light .btn-primary:hover,
body.theme-light .btn-create:hover,
body.theme-light .btn-submit:hover,
body.theme-light .btn-add:hover {
    background: transparent;
    border-color: #2563eb;
    color: #2563eb !important;
}

body.theme-light .btn-success,
body.theme-light .btn-save {
    color: #FFFFFF !important;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

body.theme-light .btn-success:hover,
body.theme-light .btn-save:hover {
    background: transparent;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

body.theme-light .btn-danger,
body.theme-light .btn-delete {
    color: #FFFFFF !important;
    background: #DC3545;
    border-color: #DC3545;
}

body.theme-light .btn-danger:hover,
body.theme-light .btn-delete:hover {
    background: transparent;
    border-color: #DC3545;
    color: #DC3545 !important;
}

body.theme-light .btn-warning,
body.theme-light .btn-edit {
    color: #1A1A1A !important;
    background: #FFC107;
    border-color: #FFC107;
}

body.theme-light .btn-warning:hover,
body.theme-light .btn-edit:hover {
    background: transparent;
    border-color: #FFC107;
    color: #b45309 !important;
}

body.theme-light .btn-secondary,
body.theme-light .btn-cancel {
    color: #333333;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
}

body.theme-light .btn-secondary:hover,
body.theme-light .btn-cancel:hover {
    background: #EEEEEE;
    color: #1A1A1A;
}

/* Status Badges - Proper contrast */
body.theme-light .badge-success,
body.theme-light .status-badge.active,
body.theme-light .status-active {
    background: #1AAD4B !important;
    color: #FFFFFF !important;
}

body.theme-light .badge-danger,
body.theme-light .status-badge.inactive,
body.theme-light .status-inactive {
    background: #DC3545 !important;
    color: #FFFFFF !important;
}

body.theme-light .badge-warning,
body.theme-light .status-pending {
    background: #FFC107 !important;
    color: #1A1A1A !important;
}

body.theme-light .badge-info,
body.theme-light .status-in-bearbeitung {
    background: #17A2B8 !important;
    color: #FFFFFF !important;
}

/* Cards & Containers */
body.theme-light .admin-card,
body.theme-light .form-card,
body.theme-light .stats-card,
body.theme-light .upsert-container .form-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #1A1A1A;
}

body.theme-light .card-header,
body.theme-light .page-header,
body.theme-light .section-header {
    /*background: #F5F5F5;*/
    color: #1A1A1A;
    border-bottom: 1px solid #E0E0E0;
}

/* Form Elements - Light Theme */
/* CRITICAL: White background with dark text for readability */
body.theme-light .form-control,
body.theme-light .form-select,
body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="search"],
body.theme-light input[type="tel"],
body.theme-light input[type="url"],
body.theme-light input[type="date"],
body.theme-light input[type="datetime-local"],
body.theme-light input[type="time"],
body.theme-light textarea,
body.theme-light select {
    background-color: var(--bg-input) !important;
    /* #ffffff in light theme */
    color: var(--text-primary) !important;
    /* Dark text */
    border-color: var(--border-input) !important;
}

body.theme-light .form-control:focus,
body.theme-light .form-select:focus,
body.theme-light input:focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
    background-color: var(--bg-input-focus) !important;
    border-color: var(--border-input-focus) !important;
    box-shadow: var(--input-focus-ring) !important;
}

body.theme-light .form-control::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: var(--text-muted) !important;
}

body.theme-light .form-label,
body.theme-light label {
    color: var(--text-secondary) !important;
}

body.theme-light .form-hint,
body.theme-light .form-text,
body.theme-light .help-text {
    color: var(--text-tertiary);
}

/* Tables */
body.theme-light table,
body.theme-light .table {
    background: #FFFFFF;
    color: #1A1A1A;
}

body.theme-light th,
body.theme-light .table th {
    background: #F5F5F5;
    color: #1A1A1A;
    border-bottom: 2px solid #E0E0E0;
}

body.theme-light td,
body.theme-light .table td {
    border-bottom: 1px solid #EEEEEE;
    color: #333333;
}

body.theme-light tbody tr:hover {
    background: #FAFAFA;
}

/* Sidebar - Light theme */
body.theme-light .app-sidebar,
body.theme-light .app-sidebar-right {
    background: #FFFFFF;
    border-right: 1px solid #E0E0E0;
}

body.theme-light .app-sidebar-right {
    border-right: none;
    border-left: 1px solid #E0E0E0;
}

body.theme-light .sidebar-nav-text,
body.theme-light .sidebar-nav-item span {
    color: #333333;
}

body.theme-light .sidebar-nav-item:hover {
    background: #F5F5F5;
}

body.theme-light .sidebar-nav-item.active {
    background: rgba(37, 99, 235, 0.1);
}

body.theme-light .sidebar-nav-item.active .sidebar-nav-text,
body.theme-light .sidebar-nav-item.active span {
    color: #2563eb;
}

/* Sidebar icons - Light theme: clean minimal style (left sidebar) */
body.theme-light .sidebar-nav-icon {
    background: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
}

body.theme-light .sidebar-nav-icon i {
    color: #555555 !important;
}

body.theme-light .sidebar-nav-item.active .sidebar-nav-icon {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
}

body.theme-light .sidebar-nav-item.active .sidebar-nav-icon i {
    color: #FFFFFF !important;
}

body.theme-light .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: #3b82f6 !important;
    transform: scale(1.08);
}

body.theme-light .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon i {
    color: #2563eb !important;
}

/* Right sidebar icons - Light theme: darker clearer borders */
body.theme-light .app-sidebar-right .sidebar-nav-icon {
    background: #F5F5F5 !important;
    border: 2px solid #c5c5c5 !important;
}

body.theme-light .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
}

body.theme-light .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon {
    border-color: #3b82f6 !important;
}

/* Right sidebar icons - Uni theme: darker clearer borders */
body.theme-uni .app-sidebar-right .sidebar-nav-icon {
    background: #f0f0f0 !important;
    border: 2px solid #b0b0b0 !important;
}

body.theme-uni .app-sidebar-right .sidebar-nav-icon i {
    color: #4a4a4a !important;
}

body.theme-uni .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon {
    background: #85BC27 !important;
    border-color: #6BA31E !important;
}

body.theme-uni .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon i {
    color: #FFFFFF !important;
}

body.theme-uni .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon {
    background: rgba(133, 188, 39, 0.1) !important;
    border-color: #85BC27 !important;
}

body.theme-uni .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon i {
    color: #6BA31E !important;
}

/* Page Titles */
body.theme-light .page-title,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
    color: #1A1A1A;
}

body.theme-light .page-title {
    color: #2563eb;
}

/* Links */
body.theme-light a {
    color: #2563eb;
}

body.theme-light a:hover {
    color: #1d4ed8;
}

/* Toggle switches */
body.theme-light .toggle-switch.active,
body.theme-light .switch-input:checked+.switch-slider {
    background: #1AAD4B;
}

body.theme-light .toggle-switch:not(.active),
body.theme-light .switch-slider {
    background: #CCCCCC;
}

/* Progress bars */
body.theme-light .progress {
    background: #EEEEEE;
}

body.theme-light .progress-bar {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
}

/* Alerts & Notices */
body.theme-light .alert-success {
    background: rgba(26, 173, 75, 0.1);
    border: 1px solid #1AAD4B;
    color: #0D5524;
}

body.theme-light .alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid #DC3545;
    color: #721C24;
}

body.theme-light .alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid #FFC107;
    color: #856404;
}

body.theme-light .alert-info {
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid #17A2B8;
    color: #0C5460;
}

body.theme-light .notice-box {
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #FFC107;
}

body.theme-light .notice-box strong {
    color: #856404;
}

body.theme-light .notice-box span {
    color: #6D5003;
}

/* Dropdowns */
body.theme-light .dropdown-menu,
body.theme-light .select-dropdown {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.theme-light .dropdown-item {
    color: #333333;
}

body.theme-light .dropdown-item:hover {
    background: #F5F5F5;
    color: #1A1A1A;
}

/* Modals */
body.theme-light .modal-content {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid #E0E0E0;
}

body.theme-light .modal-header {
    background: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
}

body.theme-light .modal-footer {
    background: #F5F5F5;
    border-top: 1px solid #E0E0E0;
}

/* Code blocks */
body.theme-light code,
body.theme-light pre {
    background: #F5F5F5;
    color: #1A1A1A;
    border: 1px solid #E0E0E0;
}

/* Tags & Chips */
body.theme-light .tag,
body.theme-light .chip,
body.theme-light .project-tag {
    background: #F5F5F5;
    color: #333333;
    border: 1px solid #E0E0E0;
}

body.theme-light .tag.active,
body.theme-light .chip.selected {
    background: #2563eb;
    color: #FFFFFF;
    border-color: #2563eb;
}

/* Filter buttons */
body.theme-light .filter-btn,
body.theme-light .filter-chip {
    background: #FFFFFF;
    color: #333333;
    border: 1px solid #E0E0E0;
}

body.theme-light .filter-btn.active,
body.theme-light .filter-chip.active {
    background: #2563eb;
    color: #FFFFFF;
    border-color: #2563eb;
}

/* Stats display */
body.theme-light .stat-value,
body.theme-light .stat-number {
    color: #2563eb;
}

body.theme-light .stat-label {
    color: #666666;
}

/* Search inputs */
body.theme-light .search-input,
body.theme-light .search-box input {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid #E0E0E0;
}

body.theme-light .search-input:focus,
body.theme-light .search-box input:focus {
    border-color: #2563eb;
}

/* Pagination */
body.theme-light .pagination .page-link {
    background: #FFFFFF;
    color: #333333;
    border: 1px solid #E0E0E0;
}

body.theme-light .pagination .page-item.active .page-link {
    background: #2563eb;
    color: #FFFFFF;
    border-color: #2563eb;
}

/* Tooltips */
body.theme-light .tooltip {
    background: #1A1A1A;
    color: #FFFFFF;
}

/* Admin Views - Light Theme Specific Fixes */

/* Accordion in Admin forms */
body.theme-light .accordion-item {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .accordion-button {
    background: #F5F5F5 !important;
    color: #1A1A1A !important;
}

body.theme-light .accordion-button:not(.collapsed) {
    background: #EEEEEE !important;
    color: #2563eb !important;
}

body.theme-light .accordion-button::after {
    filter: none;
}

body.theme-light .accordion-body {
    background: #FFFFFF;
    color: #333333;
}

/* Card headers - Blue gradient */
body.theme-light .card-header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #E0E0E0;
}

body.theme-light .card-header h3,
body.theme-light .card-header h4,
body.theme-light .card-header h5 {
    color: #FFFFFF !important;
}

body.theme-light .card-body {
    background: #FFFFFF;
    color: #1A1A1A;
}

/* Save button */
body.theme-light .saveBtn,
body.theme-light .btn-save {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #FFFFFF !important;
}

body.theme-light .saveBtn:hover,
body.theme-light .btn-save:hover {
    background: transparent !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* Status buttons in Admin - Filled default, outline on hover */
body.theme-light .btn-outline-primary {
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb !important;
}

body.theme-light .btn-outline-primary:hover {
    background: transparent !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

/* Tag toggle buttons: keep outline=unchecked, filled=checked */
body.theme-light .btn-check+.btn-outline-primary {
    background: transparent !important;
    border-color: #2563eb;
    color: #2563eb;
}

body.theme-light .btn-check+.btn-outline-primary:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1d4ed8;
}

body.theme-light .btn-check:checked+.btn-outline-primary,
body.theme-light .btn-check:checked+.btn-outline-primary:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #FFFFFF !important;
}

/* Tag bubble buttons - light theme */
body.theme-light .tag-button {
    background: #ffffff;
    border-color: #d1d5db;
    color: #4b5563;
}

body.theme-light .tag-button:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

body.theme-light .btn-check.tag-check:checked+.tag-button,
body.theme-light .btn-check.tag-check:checked+.tag-button:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.theme-light .custom-tag-pill {
    background: #2563eb;
}

/* Image thumbnails */
body.theme-light .img-thumbnail {
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
}

/* Dynamic Content Builder */
body.theme-light .dcb-toolbar {
    background: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
}

body.theme-light .dcb-toolbar h5 {
    color: #1A1A1A;
}

body.theme-light .dcb-preview-panel {
    background: #FAFAFA;
    border-left: 1px solid #E0E0E0;
}

body.theme-light .dcb-preview-header {
    background: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
}

/* Admin Index views - cards grid */
body.theme-light .admin-index .project-card,
body.theme-light .projects-grid .project-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .admin-index .project-card:hover,
body.theme-light .projects-grid .project-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Code display */
body.theme-light .code-input-group .form-control {
    background: #FFFFFF;
    color: #1A1A1A;
    font-family: 'Courier New', monospace;
}

/* Generate button */
body.theme-light .btn-generate {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #FFFFFF;
}

/* Check boxes custom */
body.theme-light .form-check-custom {
    background: #F5F5F5;
}

body.theme-light .form-check-label {
    color: #333333;
}

/* Werke View - Light Theme Specific Fixes */

body.theme-light .werke-page {
    background: #FAFAFA;
}

body.theme-light .werke-title {
    color: #1A1A1A;
}

body.theme-light .werke-title i {
    color: #2563eb;
}

body.theme-light .werke-subtitle {
    color: #666666;
}

body.theme-light .werke-stat {
    color: #666666;
}

body.theme-light .werke-stat strong {
    color: #2563eb;
}

/* Category headers */
body.theme-light .category-title {
    color: #1A1A1A;
}

body.theme-light .category-title i {
    color: #2563eb;
}

body.theme-light .category-count {
    background: #EEEEEE;
    color: #666666;
}

body.theme-light .category-nav-btn {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #666666;
}

body.theme-light .category-nav-btn:hover:not(:disabled) {
    background: #2563eb;
    color: #FFFFFF;
    border-color: #2563eb;
}

/* Werke Cards - Light Theme */
body.theme-light .werke-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .werke-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: #2563eb;
}

body.theme-light .werke-card-subcategory {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #FFFFFF;
}

body.theme-light .werke-card-image {
    background: #F5F5F5;
}

body.theme-light .werke-card-play {
    background: #2563eb;
    color: #FFFFFF;
}

body.theme-light .werke-card-body {
    background: #FFFFFF;
}

body.theme-light .werke-card-title {
    color: #1A1A1A;
}

body.theme-light .werke-card-desc {
    color: #666666;
}

body.theme-light .werke-card-status-row {
    border-top: 1px solid #EEEEEE;
}

body.theme-light .werke-card-status-label {
    color: #999999;
}

/* Status badges - Light theme with solid backgrounds */
body.theme-light .status-abgeschlossen {
    background: #1AAD4B !important;
    color: #FFFFFF !important;
    border: none !important;
}

body.theme-light .status-in-bearbeitung {
    background: #17A2B8 !important;
    color: #FFFFFF !important;
    border: none !important;
}

body.theme-light .status-geplant {
    background: #FFC107 !important;
    color: #1A1A1A !important;
    border: none !important;
}

body.theme-light .status-pausiert {
    background: #6c757d !important;
    color: #FFFFFF !important;
    border: none !important;
}

body.theme-light .status-default {
    background: #EEEEEE;
    color: #666666;
    border: 1px solid #E0E0E0;
}

/* Tags - Light theme */
body.theme-light .werke-card-tag {
    background: #F5F5F5;
    color: #666666;
    border: 1px solid #E0E0E0;
}

body.theme-light .werke-card:hover .werke-card-tag {
    background: #EEEEEE;
    color: #333333;
}

/* Scroll fade indicators - Light theme */
body.theme-light .projects-scroll-container::before {
    background: linear-gradient(to right, #FAFAFA 0%, transparent 100%);
}

body.theme-light .projects-scroll-container::after {
    background: linear-gradient(to left, #FAFAFA 0%, transparent 100%);
}

/* Empty state - Light theme */
body.theme-light .empty-state {
    color: #999999;
}

body.theme-light .empty-state h3 {
    color: #666666;
}

/* Admin Project Index - Light Theme */
body.theme-light .admin-project-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .admin-project-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

body.theme-light .admin-card-image {
    background: #F5F5F5;
}

body.theme-light .admin-card-body {
    background: #FFFFFF;
}

body.theme-light .admin-card-title {
    color: #1A1A1A;
}

body.theme-light .admin-card-description {
    color: #666666;
}

body.theme-light .admin-card-meta-item {
    color: #666666;
}

body.theme-light .admin-card-meta-item i {
    color: #2563eb;
}

body.theme-light .admin-card-controls {
    background: #F5F5F5;
    border-top: 1px solid #E0E0E0;
}

body.theme-light .admin-toggle-label {
    color: #666666;
}

body.theme-light .admin-search {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .admin-search input {
    color: #1A1A1A;
}

body.theme-light .admin-search i {
    color: #999999;
}

body.theme-light .admin-count {
    background: #F5F5F5;
    color: #666666;
}

body.theme-light .admin-count strong {
    color: #2563eb;
}

body.theme-light .admin-card-order {
    background: #2563eb;
    color: #FFFFFF;
}

/* Badges with white text */
body.theme-light .badge-highlight {
    background: #FFC107;
    color: #1A1A1A;
}

body.theme-light .badge-disabled {
    background: #DC3545;
    color: #FFFFFF;
}

body.theme-light .badge-enabled {
    background: #1AAD4B;
    color: #FFFFFF;
}

/* Admin toolbar & header */
body.theme-light .admin-toolbar {
    background: transparent;
}

body.theme-light .admin-empty-state {
    color: #999999;
}

body.theme-light .admin-empty-state h3 {
    color: #666666;
}

body.theme-light .no-results {
    color: #999999;
}

/* InvitationCode Index - Light Theme */
body.theme-light .code-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .code-display {
    background: #F5F5F5;
    color: #1A1A1A;
}

body.theme-light .code-description {
    color: #666666;
}

body.theme-light .code-stat-label {
    color: #999999;
}

body.theme-light .code-stat-value {
    color: #2563eb;
}

/* User Management Index - Light Theme */
body.theme-light .user-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
}

body.theme-light .user-name {
    color: #1A1A1A;
}

body.theme-light .user-email {
    color: #666666;
}

body.theme-light .user-role-badge {
    background: #2563eb;
    color: #FFFFFF;
}

body.theme-light .user-status-active {
    background: #1AAD4B;
    color: #FFFFFF;
}

body.theme-light .user-status-locked {
    background: #DC3545;
    color: #FFFFFF;
}

/* Theme 3: Midnight Purple - Luxurious & Creative */
body.theme-midnight {
    --bg-primary: #0f0a1a;
    --bg-secondary: #1a1225;
    --bg-tertiary: #251a33;
    --bg-card: #1e1529;
    --bg-card-hover: #2a1f3d;

    --accent-primary: #a78bfa;
    --accent-secondary: #c4b5fd;
    --accent-tertiary: #8b5cf6;
    --accent-glow: rgba(167, 139, 250, 0.25);

    --text-primary: #faf5ff;
    --text-secondary: #e9d5ff;
    --text-tertiary: #d8b4fe;
    --text-muted: #c084fc;

    --border-subtle: rgba(167, 139, 250, 0.12);
    --border-medium: rgba(167, 139, 250, 0.18);
    --border-accent: rgba(167, 139, 250, 0.4);

    --shadow-sm: 0 2px 8px rgba(15, 10, 26, 0.5);
    --shadow-md: 0 4px 20px rgba(15, 10, 26, 0.6);
    --shadow-lg: 0 8px 40px rgba(15, 10, 26, 0.7);
    --shadow-glow: 0 0 30px rgba(167, 139, 250, 0.2);
}

body.theme-midnight .app-sidebar,
body.theme-midnight .app-sidebar-right {
    background: linear-gradient(180deg, #1a1225 0%, #0f0a1a 100%);
}

body.theme-midnight .sidebar-nav-item.active .sidebar-nav-icon,
body.theme-midnight .sidebar-nav-item:hover .sidebar-nav-icon {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(139, 92, 246, 0.15));
    border-color: var(--accent-primary);
}

body.theme-midnight .modern-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(37, 26, 51, 0.5) 100%);
}

body.theme-midnight .hero-section::before {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, transparent 50%);
}

/* Theme 4: Forest Emerald - Natural & Calming */
body.theme-forest {
    --bg-primary: #0a1410;
    --bg-secondary: #0f1f18;
    --bg-tertiary: #162921;
    --bg-card: #132319;
    --bg-card-hover: #1a3025;

    --accent-primary: #10b981;
    --accent-secondary: #34d399;
    --accent-tertiary: #059669;
    --accent-glow: rgba(16, 185, 129, 0.25);

    --text-primary: #ecfdf5;
    --text-secondary: #a7f3d0;
    --text-tertiary: #6ee7b7;
    --text-muted: #34d399;

    --border-subtle: rgba(16, 185, 129, 0.12);
    --border-medium: rgba(16, 185, 129, 0.18);
    --border-accent: rgba(16, 185, 129, 0.4);

    --shadow-sm: 0 2px 8px rgba(10, 20, 16, 0.5);
    --shadow-md: 0 4px 20px rgba(10, 20, 16, 0.6);
    --shadow-lg: 0 8px 40px rgba(10, 20, 16, 0.7);
    --shadow-glow: 0 0 30px rgba(16, 185, 129, 0.2);
}

body.theme-forest .app-sidebar,
body.theme-forest .app-sidebar-right {
    background: linear-gradient(180deg, #0f1f18 0%, #0a1410 100%);
}

body.theme-forest .sidebar-nav-item.active .sidebar-nav-icon,
body.theme-forest .sidebar-nav-item:hover .sidebar-nav-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.08));
    border-color: rgba(16, 185, 129, 0.5);
}

body.theme-forest .modern-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(22, 41, 33, 0.5) 100%);
}

body.theme-forest .hero-section::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
}

/* Legacy contrast-mode support (maps to light theme) */
body.contrast-mode {
    --bg-primary: #FAFAFA;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #EEEEEE;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FAFAFA;
    --accent-primary: #2563eb;
    --accent-secondary: #3b82f6;
    --accent-tertiary: #1d4ed8;
    --text-primary: #1A1A1A;
    --text-secondary: #333333;
    --text-tertiary: #666666;
    --text-muted: #999999;
    --border-subtle: rgba(26, 26, 26, 0.1);
    --border-medium: rgba(26, 26, 26, 0.15);
    --border-primary: #E0E0E0;
}

/* ========================
   THEME SWITCHER DROPDOWN
========================= */
.theme-dropdown {
    position: relative;
}

.theme-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-md);
}

.theme-dropdown-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.theme-dropdown-toggle .theme-dropdown-icon {
    font-size: 1.15rem;
    color: var(--accent-primary);
}

.theme-dropdown-menu {
    min-width: 260px;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.theme-dropdown-menu .dropdown-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
}

.theme-option:hover {
    background: var(--bg-tertiary);
}

.theme-option.active {
    background: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.1);
}

.theme-option-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--border-subtle);
    transition: border-color var(--transition-fast);
}

.theme-option.active .theme-option-preview {
    border-color: var(--accent-primary);
}

/* Theme preview colors */
.dark-preview {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.dark-preview::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-radius: 50%;
}

.light-preview {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f4 100%);
}

.light-preview::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
}

.midnight-preview {
    background: linear-gradient(135deg, #0f0a1a 0%, #1a1025 100%);
}

.midnight-preview::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #a78bfa;
    border-radius: 50%;
}

.forest-preview {
    background: linear-gradient(135deg, #0a1410 0%, #0f1f18 100%);
}

.forest-preview::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
}

.uni-preview {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%);
}

.uni-preview::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
}

.hybrid-preview {
    background: linear-gradient(135deg, #0f1c17 0%, #0f1c17 50%, #F5F9F7 50%, #F5F9F7 100%);
}

.hybrid-preview::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
}

.theme-option-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.theme-option-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.theme-option-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-check {
    color: var(--accent-primary);
    font-size: 1rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.theme-option.active .theme-check {
    opacity: 1;
}

/* More Themes Accordion */
.more-themes-section {
    margin-top: 0.25rem;
}

.more-themes-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.more-themes-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.more-themes-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.more-themes-content {
    padding-left: 0.5rem;
    border-left: 2px solid var(--border-subtle);
    margin-left: 0.75rem;
    margin-top: 0.25rem;
}

.more-themes-content .theme-option {
    padding: 0.5rem 0.65rem;
}

.more-themes-content .theme-option-preview {
    width: 30px;
    height: 30px;
}

.more-themes-content .theme-option-name {
    font-size: 0.85rem;
}

.more-themes-content .theme-option-desc {
    font-size: 0.7rem;
}

/* Smooth theme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-sidebar,
.app-navbar,
.app-content,
.app-footer,
.modern-card,
.filter-section,
.top-toolbar {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========================
   LIGHT MODE - Additional Premium Styling
========================= */
body.theme-light .top-toolbar {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(28, 25, 23, 0.06);
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04);
}

body.theme-light .top-header {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(28, 25, 23, 0.08);
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.05);
}

body.theme-light .header-logo {
    background-color: var(--bg-tertiary);
    border-right: 1px solid rgba(28, 25, 23, 0.08);
}

body.theme-light .header-logo img {
    filter: brightness(0) saturate(100%);
}

/* BUW logo is used in all themes - no theme-specific logo switching needed */

body.theme-light .header-navbar-primary {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(28, 25, 23, 0.06);
}

body.theme-light .header-navbar-secondary {
    background-color: var(--bg-tertiary);
}

body.theme-light .app-footer {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-top: 1px solid rgba(28, 25, 23, 0.06);
}

body.theme-light .footer-link:hover {
    background: rgba(28, 25, 23, 0.04);
}

body.theme-light .footer-copyright {
    border-top-color: rgba(28, 25, 23, 0.08);
}

body.theme-light .toolbar-btn,
body.theme-light .toolbar-link {
    color: var(--text-secondary);
}

body.theme-light .toolbar-btn:hover,
body.theme-light .toolbar-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

body.theme-light .ki-labor-btn {
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    color: #ffffff !important;
}

body.theme-light .ki-labor-btn span,
body.theme-light .ki-labor-btn i.bi-stars {
    color: #ffffff !important;
}

body.theme-light .ki-labor-btn:hover {
    background: #ffffff;
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}

body.theme-light .ki-labor-btn:hover i,
body.theme-light .ki-labor-btn:hover span {
    color: var(--accent-primary) !important;
}

body.theme-light .theme-dropdown-menu {
    background: #ffffff;
    border-color: rgba(28, 25, 23, 0.1);
    box-shadow: 0 4px 16px rgba(28, 25, 23, 0.1);
}

body.theme-light .theme-option:hover {
    background: #f5f5f4;
}

body.theme-light .theme-option.active {
    background: rgba(37, 99, 235, 0.08);
}

body.theme-light .filter-search .input-group:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

body.theme-light .filter-count {
    background: #ffffff;
    color: #44403c;
}

body.theme-light .filter-toggle-btn {
    background: #f5f5f4;
    color: #44403c;
}

body.theme-light .filter-toggle-btn:hover {
    background: #eeeeed;
    border-color: var(--accent-primary);
    color: #1c1917;
}

body.theme-light .filter-toggle-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

body.theme-light .filter-dropdown-btn {
    background: #ffffff;
    border-color: #e5e5e4;
    color: #44403c;
}

body.theme-light .filter-dropdown-btn:hover {
    background: #f5f5f4;
}

body.theme-light .filter-dropdown-menu {
    background: #ffffff;
    border-color: #e5e5e4;
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.1), 0 2px 6px rgba(28, 25, 23, 0.06);
}

body.theme-light .filter-dropdown-header {
    background: #ffffff;
}

body.theme-light .filter-option:hover {
    background: #f5f5f4;
}

body.theme-light .tag-filter-btn {
    background: #ffffff;
    border-color: #e5e5e4;
    color: #44403c;
}

body.theme-light .tag-filter-btn:hover {
    background: #f5f5f4;
}

/* Light Theme - Mobile Navigation Styles */
body.theme-light .mobile-menu-btn {
    background: #ffffff;
    border-color: rgba(28, 25, 23, 0.15);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.08);
}

body.theme-light .mobile-menu-btn:hover,
body.theme-light .mobile-menu-btn:focus {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

body.theme-light .mobile-bottom-nav {
    background-color: #ffffff;
    border-top: 1px solid rgba(28, 25, 23, 0.1);
    box-shadow: 0 -2px 12px rgba(28, 25, 23, 0.06);
}

body.theme-light .mobile-nav-item {
    color: var(--text-tertiary);
}

body.theme-light .mobile-nav-item:hover,
body.theme-light .mobile-nav-item:focus {
    color: var(--accent-primary);
    background-color: rgba(37, 99, 235, 0.06);
}

body.theme-light .mobile-nav-item.active {
    color: var(--accent-primary);
}

body.theme-light .mobile-nav-menu {
    background: var(--accent-primary);
    color: #ffffff !important;
}

body.theme-light .mobile-nav-menu:hover,
body.theme-light .mobile-nav-menu:focus {
    background: var(--accent-tertiary);
    color: #ffffff !important;
}

body.theme-light .sidebar-overlay {
    background-color: rgba(28, 25, 23, 0.5);
}

body.theme-light .sidebar-user-actions {
    background-color: rgba(37, 99, 235, 0.04);
    border-bottom: 1px solid rgba(28, 25, 23, 0.08);
}

body.theme-light .btn-primary {
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

body.theme-light .btn-primary:hover {
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

body.theme-light .form-control,
body.theme-light .form-select {
    background-color: #ffffff;
    border-color: rgba(28, 25, 23, 0.15);
}

body.theme-light .form-control:focus,
body.theme-light .form-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body.theme-light .hero-section {
    box-shadow: none;
}

body.theme-light .breadcrumb-container {
    background-color: transparent;
}

body.theme-light .breadcrumb {
    background-color: #f0f0f0 !important;
    border: 1px solid #e0e0e0 !important;
}

body.theme-light .breadcrumb-item a {
    color: var(--accent-primary) !important;
}

body.theme-light .breadcrumb-item.active {
    color: #333333 !important;
}

/* Light mode DataTables */
body.theme-light .dataTables_wrapper {
    color: var(--text-secondary) !important;
}

body.theme-light table.dataTable thead th,
body.theme-light table.dataTable thead td {
    background-color: var(--bg-tertiary) !important;
    border-bottom: 2px solid rgba(28, 25, 23, 0.1) !important;
}

body.theme-light table.dataTable tbody tr {
    background-color: #ffffff !important;
}

body.theme-light table.dataTable tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

body.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    border: 1px solid rgba(28, 25, 23, 0.15) !important;
}

body.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-tertiary) !important;
}

body.theme-light .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* Light mode Modals */
body.theme-light .modal-content {
    background-color: #ffffff;
    box-shadow: 0 20px 60px rgba(28, 25, 23, 0.15);
}

body.theme-light .modal-header {
    border-bottom-color: rgba(28, 25, 23, 0.08);
}

body.theme-light .modal-footer {
    border-top-color: rgba(28, 25, 23, 0.08);
}

/* Light mode dropdowns */
body.theme-light .dropdown-menu {
    background-color: #ffffff;
    border-color: rgba(28, 25, 23, 0.1);
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12);
}

body.theme-light .dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

/* Light mode admin sidebar dropdown */
body.theme-light .sidebar-admin-dropdown {
    background-color: #ffffff;
    box-shadow: 0 8px 32px rgba(28, 25, 23, 0.15);
    border-color: rgba(28, 25, 23, 0.1);
}

body.theme-light .admin-section-header {
    color: #57534e;
    opacity: 1;
}

body.theme-light .admin-dropdown-item,
body.theme-light a.admin-dropdown-item,
body.theme-light a.admin-dropdown-item:link,
body.theme-light a.admin-dropdown-item:visited {
    color: #000000 !important;
}

body.theme-light .admin-dropdown-item:hover,
body.theme-light a.admin-dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary) !important;
}

body.theme-light .admin-panel-header {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
    color: #ffffff;
}

body.theme-light .admin-panel-header i {
    color: #ffffff;
}

/* Light mode badges and tags */
body.theme-light .badge-category {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--accent-primary);
}

/* Hero/Slider text - always white on dark overlay */
body.theme-light .hero-title,
body.theme-light .hero-overlay h1,
body.theme-light .hero-overlay h2,
body.theme-light .hero-overlay p,
body.theme-light .hero-overlay span {
    color: #ffffff !important;
}

body.theme-light .hero-overlay {
    color: #ffffff;
}

/* ========================
   LIGHT THEME - CRITICAL TEXT COLOR RULES
   Ensures proper contrast on accent backgrounds
========================= */

/* CRITICAL: All active pills/chips/tags with accent background MUST have white text */
body.theme-light .pill.active,
body.theme-light .chip.active,
body.theme-light .chip.selected,
body.theme-light .filter-btn.active,
body.theme-light .filter-chip.active,
body.theme-light .filter-toggle-btn.active,
body.theme-light .tag.active,
body.theme-light .nav-pills .nav-link.active,
body.theme-light [class*="pill"].active,
body.theme-light [class*="chip"].active {
    color: #ffffff !important;
    /* ALWAYS white on blue/accent */
}

/* CRITICAL: Buttons with accent backgrounds MUST have white text */
body.theme-light .btn-primary,
body.theme-light .btn-create,
body.theme-light .btn-submit,
body.theme-light .btn-add,
body.theme-light .btn-success,
body.theme-light .btn-save,
body.theme-light .btn-danger,
body.theme-light .btn-delete,
body.theme-light .btn-info,
body.theme-light [class*="btn-accent"] {
    color: #ffffff !important;
}

body.theme-light .btn-primary:hover {
    color: #2563eb !important;
}

body.theme-light .btn-success:hover {
    color: var(--accent-primary) !important;
}

body.theme-light .btn-danger:hover {
    color: #DC3545 !important;
}

body.theme-light .btn-info:hover {
    color: #17A2B8 !important;
}

/* Pagination active state */
body.theme-light .pagination-btn.active,
body.theme-light .pagination .page-item.active .page-link {
    color: #ffffff !important;
}

/* Midnight theme - Additional refinements */
body.theme-midnight .top-toolbar {
    background: linear-gradient(180deg, #1a1225 0%, #251a33 100%);
}

body.theme-midnight .top-header {
    background: linear-gradient(180deg, #1a1225 0%, #251a33 100%);
}

body.theme-midnight .header-logo {
    background: rgba(26, 18, 37, 0.8);
}

body.theme-midnight .header-navbar-secondary {
    background: linear-gradient(180deg, #251a33 0%, #1a1225 100%);
}

body.theme-midnight .theme-dropdown-menu {
    background: rgba(37, 26, 51, 0.95);
    border-color: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .theme-option:hover {
    background: rgba(167, 139, 250, 0.1);
}

body.theme-midnight .theme-option.active {
    background: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .btn-primary {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    border-color: transparent;
}

body.theme-midnight .filter-toggle-btn.active {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Midnight Theme - Mobile Navigation Styles */
body.theme-midnight .mobile-menu-btn {
    background: rgba(37, 26, 51, 0.9);
    border-color: rgba(167, 139, 250, 0.2);
}

body.theme-midnight .mobile-menu-btn:hover,
body.theme-midnight .mobile-menu-btn:focus {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

body.theme-midnight .mobile-bottom-nav {
    background: linear-gradient(180deg, #1a1225 0%, #0f0a1a 100%);
    border-top-color: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .mobile-nav-item:hover,
body.theme-midnight .mobile-nav-item:focus {
    background-color: rgba(167, 139, 250, 0.1);
}

body.theme-midnight .mobile-nav-menu {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

/* Forest theme - Additional refinements */
body.theme-forest .top-toolbar {
    background: linear-gradient(180deg, #0f1f18 0%, #162921 100%);
}

body.theme-forest .top-header {
    background: linear-gradient(180deg, #0f1f18 0%, #162921 100%);
}

body.theme-forest .header-logo {
    background: rgba(15, 31, 24, 0.8);
}

body.theme-forest .header-navbar-secondary {
    background: linear-gradient(180deg, #162921 0%, #0f1f18 100%);
}

body.theme-forest .theme-dropdown-menu {
    background: rgba(22, 41, 33, 0.95);
    border-color: rgba(16, 185, 129, 0.15);
}

body.theme-forest .theme-option:hover {
    background: rgba(16, 185, 129, 0.1);
}

body.theme-forest .theme-option.active {
    background: rgba(16, 185, 129, 0.15);
}

body.theme-forest .btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
}

body.theme-forest .filter-toggle-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Forest Theme - Mobile Navigation Styles */
body.theme-forest .mobile-menu-btn {
    background: rgba(22, 41, 33, 0.9);
    border-color: rgba(16, 185, 129, 0.2);
}

body.theme-forest .mobile-menu-btn:hover,
body.theme-forest .mobile-menu-btn:focus {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

body.theme-forest .mobile-bottom-nav {
    background: linear-gradient(180deg, #0f1f18 0%, #0a1410 100%);
    border-top-color: rgba(16, 185, 129, 0.15);
}

body.theme-forest .mobile-nav-item:hover,
body.theme-forest .mobile-nav-item:focus {
    background-color: rgba(16, 185, 129, 0.1);
}

body.theme-forest .mobile-nav-menu {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Theme dropdown responsive */
@media (max-width: 768px) {
    .theme-dropdown-toggle span {
        display: none;
    }

    .theme-dropdown-toggle {
        padding: 6px 10px;
    }

    .theme-dropdown-menu {
        min-width: 240px;
    }

    .theme-option-preview {
        width: 32px;
        height: 32px;
    }

    .theme-option-desc {
        display: none;
    }
}

/* ========================
   RESPONSIVE DESIGN
========================= */

/* Tablet and smaller screens */
@media (max-width: 992px) {
    :root {
        --sidebar-width: 0px;
        --header-height: 70px;
    }

    /* Hide header navbars on tablet/mobile, show mobile buttons */
    .header-navbars {
        display: none !important;
    }

    .header-logo {
        width: auto;
        min-width: auto;
        flex: 1;
        justify-content: center;
        padding: 10px 55px;
        background-color: var(--bg-secondary);
        border-right: none;
        overflow: visible;
    }

    /* On mobile, show only the no-text logo - override ALL states including sidebar-expanded */
    .header-logo .logo-uni-collapsed,
    .header-logo .logo-uni-expanded,
    body.sidebar-expanded .header-logo .logo-uni-collapsed,
    body.sidebar-expanded .header-logo .logo-uni-expanded,
    html.theme-uni .header-logo .logo-uni-collapsed,
    html.theme-uni .header-logo .logo-uni-expanded,
    html.theme-hybrid .header-logo .logo-uni-collapsed,
    html.theme-hybrid .header-logo .logo-uni-expanded,
    html.theme-dark .header-logo .logo-uni-collapsed,
    html.theme-dark .header-logo .logo-uni-expanded,
    html.theme-light .header-logo .logo-uni-collapsed,
    html.theme-light .header-logo .logo-uni-expanded,
    body.theme-uni .header-logo .logo-uni-collapsed,
    body.theme-uni .header-logo .logo-uni-expanded,
    body.theme-hybrid .header-logo .logo-uni-collapsed,
    body.theme-hybrid .header-logo .logo-uni-expanded,
    body.theme-dark .header-logo .logo-uni-collapsed,
    body.theme-dark .header-logo .logo-uni-expanded,
    body.theme-light .header-logo .logo-uni-collapsed,
    body.theme-light .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-uni .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-hybrid .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-dark .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-light .header-logo .logo-uni-expanded {
        display: none !important;
    }

    .header-logo .logo-mobile,
    body.sidebar-expanded .header-logo .logo-mobile,
    html.theme-uni .header-logo .logo-mobile,
    html.theme-hybrid .header-logo .logo-mobile,
    html.theme-dark .header-logo .logo-mobile,
    html.theme-light .header-logo .logo-mobile,
    body.theme-uni .header-logo .logo-mobile,
    body.theme-hybrid .header-logo .logo-mobile,
    body.theme-dark .header-logo .logo-mobile,
    body.theme-light .header-logo .logo-mobile {
        display: block !important;
        width: 45px;
        height: 45px;
        max-width: 45px;
        max-height: 45px;
        object-fit: contain;
    }

    .top-header {
        height: 65px;
        overflow: visible;
    }

    /* Show mobile menu buttons - CRITICAL */
    .mobile-menu-btn {
        display: flex !important;
        position: fixed !important;
        z-index: 1200 !important;
    }

    /* Hide profile button when left sidebar is open */
    body.sidebar-mobile-open .mobile-menu-right {
        display: none !important;
    }

    /* Sidebar branding - logos side by side on mobile */
    .app-sidebar .sidebar-branding,
    .app-sidebar.open .sidebar-branding {
        flex-direction: row !important;
        gap: 16px;
        padding: 20px 16px;
        align-items: center;
        justify-content: center;
    }

    .app-sidebar .sidebar-brand-divider,
    .app-sidebar.open .sidebar-brand-divider {
        display: block !important;
        width: 1px;
        height: 40px;
        background: rgba(255, 255, 255, 0.3);
    }

    .app-sidebar .sidebar-brand-logo.zim-logo,
    .app-sidebar.open .sidebar-brand-logo.zim-logo {
        height: 50px;
    }

    .app-sidebar .sidebar-brand-logo.medialab-logo,
    .app-sidebar.open .sidebar-brand-logo.medialab-logo {
        height: 30px;
    }

    .mobile-menu-left {
        top: 13px !important;
        left: 12px !important;
    }

    .mobile-menu-right {
        top: 13px !important;
        right: 12px !important;
    }

    /* Show mobile bottom navigation - CRITICAL */
    .mobile-bottom-nav {
        display: flex !important;
        z-index: 1100 !important;
    }

    /* Add padding to main content for bottom nav and header */
    .app-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 80px;
        padding-top: 0;
    }

    /* Left Sidebar - slides in from left */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        width: 85vw;
        max-width: 320px;
        z-index: 1150;
        padding-top: 65px;
        overflow-y: auto;
        transition: transform 0.3s ease;
    }

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

    .app-sidebar .sidebar-nav-label,
    .app-sidebar.open .sidebar-nav-label {
        opacity: 1;
        width: auto;
        transform: translateX(0);
    }

    /* Hide toggle button on mobile - use mobile menu instead */
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* Show close button on mobile */
    .sidebar-close-btn {
        display: flex !important;
    }

    /* Right Sidebar - slides in from right */
    .app-sidebar-right {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        transform: translateX(100%);
        width: 85vw;
        max-width: 320px;
        z-index: 1150;
        padding-top: 65px;
        overflow-y: auto;
        transition: transform 0.3s ease;
    }

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

    .app-sidebar-right .sidebar-nav-label,
    .app-sidebar-right.open .sidebar-nav-label {
        opacity: 1;
        width: auto;
        transform: translateX(0);
    }

    /* Hide toggle button on mobile for right sidebar */
    .sidebar-right-toggle-btn {
        display: none !important;
    }

    /* Remove right margin on mobile */
    body[data-user-authenticated="true"] .app-main {
        margin-right: 0 !important;
    }

    body.sidebar-right-expanded .app-main {
        margin-right: 0 !important;
    }

    /* Admin dropdowns positioning on mobile */
    .sidebar-admin-dropdown {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        max-height: 80vh;
        width: 90vw;
        max-width: 360px;
        z-index: 1160;
    }

    .sidebar-admin-dropdown-right {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        max-height: 80vh;
        width: 90vw;
        max-width: 360px;
        z-index: 1160;
    }
}

/* Mobile phones */
@media (max-width: 576px) {
    :root {
        --header-height: 60px;
    }

    .top-header {
        height: 60px;
    }

    .header-logo {
        padding: 8px 50px;
    }

    .header-logo img {
        width: 60px;
        height: 28px;
        max-width: 60px;
        max-height: 28px;
        object-fit: contain;
    }

    .top-header {
        height: 55px;
    }

    .mobile-menu-left {
        top: 10px !important;
        left: 8px !important;
    }

    .mobile-menu-right {
        top: 10px !important;
        right: 8px !important;
    }

    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 1.25rem !important;
    }

    /* Full width sidebars on small phones */
    .app-sidebar,
    .app-sidebar-right {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 55px !important;
    }

    /* Sidebar branding on small phones */
    .app-sidebar .sidebar-brand-logo.zim-logo,
    .app-sidebar.open .sidebar-brand-logo.zim-logo {
        height: 45px;
    }

    .app-sidebar .sidebar-brand-logo.medialab-logo,
    .app-sidebar.open .sidebar-brand-logo.medialab-logo {
        height: 26px;
    }

    /* Admin dropdowns take full screen on small phones */
    .sidebar-admin-dropdown,
    .sidebar-admin-dropdown-right {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        transform: none !important;
        border-radius: 0 !important;
        z-index: 1200 !important;
    }

    /* Mobile bottom nav smaller text */
    .mobile-nav-item {
        padding: 6px 6px;
        min-width: 44px;
        font-size: 0.6rem;
    }

    .mobile-nav-item i {
        font-size: 1rem;
    }

    .mobile-bottom-nav {
        height: 56px;
    }

    .app-main {
        padding-bottom: 72px;
    }
}

/* Very small phones */
@media (max-width: 400px) {
    .header-logo {
        padding: 8px 45px;
    }

    .header-logo img {
        width: 50px;
        height: 22px;
        max-width: 50px;
        max-height: 22px;
        object-fit: contain;
    }

    .top-header {
        height: 50px;
    }

    .mobile-menu-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* Smaller branding logos on very small phones */
    .app-sidebar .sidebar-brand-logo.zim-logo,
    .app-sidebar.open .sidebar-brand-logo.zim-logo {
        height: 40px;
    }

    .app-sidebar .sidebar-brand-logo.medialab-logo,
    .app-sidebar.open .sidebar-brand-logo.medialab-logo {
        height: 22px;
    }

    .app-sidebar .sidebar-branding,
    .app-sidebar.open .sidebar-branding {
        gap: 12px;
        padding: 16px 12px;
    }

    .app-sidebar .sidebar-brand-divider,
    .app-sidebar.open .sidebar-brand-divider {
        height: 35px;
    }

    .filter-row {
        flex-wrap: wrap;
    }

    .filter-dropdown-menu {
        position: fixed;
        top: auto;
        left: 16px;
        right: 16px;
        min-width: auto;
        max-height: 50vh;
    }

    .filter-count-wrapper,
    .filter-count {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --content-padding: 16px;
        --navbar-height: 56px;
    }

    .navbar-nav-list {
        display: none;
    }

    .hero-section {
        aspect-ratio: 16 / 9;
    }

    .hero-title {
        font-size: 1.6rem;
        letter-spacing: -0.01em;
    }

    .hero-description {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .hero-overlay {
        padding: 20px 20px 52px;
    }

    .hero-arrow {
        width: 40px !important;
    }

    .hero-arrow-icon {
        padding: 14px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .hero-controls {
        bottom: 14px;
        gap: 8px;
    }

    .hero-dot {
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }

    .hero-dot.active {
        width: 24px;
    }

    .filter-search {
        flex: 1 1 100%;
        max-width: 100%;
        order: -1;
    }

    .filter-search .input-group {
        max-width: 100%;
    }

    .filter-search .input-group .form-control {
        font-size: 0.85rem;
    }

    .filter-row {
        gap: 8px;
    }

    .filter-controls {
        gap: 5px;
    }
}

/* ========================
   UTILITY CLASSES
========================= */
.text-center {
    text-align: center;
}

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

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

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 8px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.mt-4 {
    margin-top: 32px;
}

.mt-5 {
    margin-top: 48px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}

.mb-5 {
    margin-bottom: 48px;
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 8px;
}

.gap-2 {
    gap: 16px;
}

.gap-3 {
    gap: 24px;
}

.w-full {
    width: 100%;
}

/* No Results State */
.no-results {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-subtle);
    margin-top: 8px;
}

.no-results i {
    font-size: 3.5rem;
    color: var(--text-tertiary);
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-results h3 {
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.no-results p {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

/* Loading State */
.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-card-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ========================
   ADMIN BAR
========================= */
.admin-bar {
    background-color: var(--bg-tertiary);
    padding: 8px var(--content-padding);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.admin-dropdown {
    position: relative;
}

.admin-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-dropdown-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.admin-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
}

.admin-dropdown-menu.show {
    display: block;
}

/* ========================
   PAGE HEADER
========================= */
.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ========================
   BREADCRUMB
========================= */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 12px 16px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.breadcrumb-item {
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item a:hover {
    color: var(--accent-primary);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

.breadcrumb-separator {
    color: var(--text-tertiary);
}

/* ========================
   DROPDOWN OVERRIDES
   Updated with Design Tokens
========================= */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border: var(--dropdown-border-width) solid var(--dropdown-border);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--shadow-lg);
    padding: var(--dropdown-padding-y) 0;
}

.dropdown-header {
    font-size: var(--dropdown-header-font-size);
    font-weight: var(--dropdown-header-font-weight);
    letter-spacing: var(--dropdown-header-letter-spacing);
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
}

.dropdown-item {
    font-size: var(--dropdown-item-font-size);
    color: var(--dropdown-text);
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--dropdown-item-icon-gap);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-bg-hover);
    color: var(--dropdown-text-hover);
}

.dropdown-divider {
    border-top: 1px solid var(--dropdown-divider);
    margin: var(--dropdown-padding-y) 0;
}

/* ============================================
   MOBILE NAVIGATION SYSTEM
   Responsive navigation for all screen sizes
   ============================================ */

/* Mobile Menu Buttons in Header */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    z-index: 1101;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.mobile-menu-left {
    position: fixed;
    top: 20px;
    left: 16px;
}

.mobile-menu-right {
    position: fixed;
    top: 20px;
    right: 16px;
}

/* Sidebar Close Button (mobile only) */
.sidebar-close-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.sidebar-close-btn:hover {
    background: var(--status-error);
    color: white;
}

.sidebar-close-right {
    left: 12px;
    right: auto;
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
    z-index: 1100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    min-width: 56px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    gap: 4px;
}

.mobile-nav-item i {
    font-size: 1.25rem;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
    color: var(--accent-primary);
    background-color: var(--bg-tertiary);
}

.mobile-nav-item.active {
    color: var(--accent-primary);
}

.mobile-nav-item.active i {
    color: var(--accent-primary);
}

.mobile-nav-menu {
    background: var(--accent-primary);
    color: var(--text-on-accent) !important;
    border-radius: var(--radius-full);
    padding: 10px 16px;
}

.mobile-nav-menu:hover,
.mobile-nav-menu:focus {
    background: var(--accent-secondary);
    color: var(--text-on-accent) !important;
}

/* User Actions Section in Right Sidebar - legacy support */
.sidebar-user-actions {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Prevent body scroll when mobile sidebar is open */
body.sidebar-mobile-open {
    overflow: hidden;
}

/* ============================================
   MOBILE SIDEBAR TOOLS
   Settings accessible on mobile devices
   ============================================ */
.sidebar-mobile-tools {
    display: none;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 8px;
}

.mobile-tools-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.mobile-tools-header i {
    font-size: 0.9rem;
}

.mobile-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.mobile-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mobile-tool-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
}

.mobile-tool-btn i {
    font-size: 1.1rem;
}

.mobile-tool-btn .font-icon {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Mobile Theme Selector */
.mobile-theme-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-theme-option:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mobile-theme-option.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.theme-dot.uni-dot {
    background: #85BC27;
}

.theme-dot.hybrid-dot {
    background: linear-gradient(135deg, #0f1c17 50%, #F5F9F7 50%);
}

.theme-dot.dark-dot {
    background: #1a1a1a;
    border: 1px solid #444;
}

.theme-dot.light-dot {
    background: #f5f5f5;
    border: 1px solid #ddd;
}

/* Mobile Font Slider */
.mobile-font-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.mobile-font-slider input[type="range"] {
    flex: 1;
    accent-color: var(--accent-primary);
}

.mobile-font-slider span {
    color: white;
    font-size: 0.85rem;
    min-width: 45px;
    text-align: right;
}

/* Show mobile tools only on mobile */
@media (max-width: 992px) {
    .sidebar-mobile-tools {
        display: block;
    }
}

/* Light theme adjustments for mobile tools */
body.theme-light .sidebar-mobile-tools {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .mobile-tools-header {
    color: rgba(0, 0, 0, 0.6);
}

body.theme-light .mobile-tool-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body.theme-light .mobile-tool-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body.theme-light .mobile-theme-selector {
    border-top-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .mobile-theme-option {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body.theme-light .mobile-theme-option:hover {
    background: rgba(0, 0, 0, 0.08);
}

body.theme-light .mobile-font-slider {
    background: rgba(0, 0, 0, 0.03);
}

body.theme-light .mobile-font-slider span {
    color: var(--text-primary);
}

/* Uni theme - ensure white text on green sidebar */
body.theme-uni .sidebar-mobile-tools,
html.theme-uni .sidebar-mobile-tools {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

body.theme-uni .mobile-tools-header,
html.theme-uni .mobile-tools-header,
body.theme-uni .mobile-tools-header i,
html.theme-uni .mobile-tools-header i,
body.theme-uni .mobile-tools-header span,
html.theme-uni .mobile-tools-header span {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.theme-uni .mobile-tool-btn,
html.theme-uni .mobile-tool-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

body.theme-uni .mobile-tool-btn i,
html.theme-uni .mobile-tool-btn i,
body.theme-uni .mobile-tool-btn span,
html.theme-uni .mobile-tool-btn span,
body.theme-uni .mobile-tool-btn .font-icon,
html.theme-uni .mobile-tool-btn .font-icon {
    color: white !important;
}

body.theme-uni .mobile-tool-btn:hover,
html.theme-uni .mobile-tool-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

body.theme-uni .mobile-theme-selector,
html.theme-uni .mobile-theme-selector {
    border-top-color: rgba(255, 255, 255, 0.2);
}

body.theme-uni .mobile-theme-option,
html.theme-uni .mobile-theme-option {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

body.theme-uni .mobile-theme-option:hover,
html.theme-uni .mobile-theme-option:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.theme-uni .mobile-font-slider,
html.theme-uni .mobile-font-slider {
    background: rgba(255, 255, 255, 0.1);
}

body.theme-uni .mobile-font-slider span,
html.theme-uni .mobile-font-slider span {
    color: white !important;
}

/* Hybrid theme - ensure white text on forest green sidebar */
body.theme-hybrid .sidebar-mobile-tools,
html.theme-hybrid .sidebar-mobile-tools {
    border-bottom-color: rgba(16, 185, 129, 0.25);
}

body.theme-hybrid .mobile-tools-header,
html.theme-hybrid .mobile-tools-header,
body.theme-hybrid .mobile-tools-header i,
html.theme-hybrid .mobile-tools-header i,
body.theme-hybrid .mobile-tools-header span,
html.theme-hybrid .mobile-tools-header span {
    color: rgba(240, 253, 244, 0.8) !important;
}

body.theme-hybrid .mobile-tool-btn,
html.theme-hybrid .mobile-tool-btn {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: white !important;
}

body.theme-hybrid .mobile-tool-btn i,
html.theme-hybrid .mobile-tool-btn i,
body.theme-hybrid .mobile-tool-btn span,
html.theme-hybrid .mobile-tool-btn span,
body.theme-hybrid .mobile-tool-btn .font-icon,
html.theme-hybrid .mobile-tool-btn .font-icon {
    color: white !important;
}

body.theme-hybrid .mobile-tool-btn:hover,
html.theme-hybrid .mobile-tool-btn:hover {
    background: rgba(16, 185, 129, 0.3) !important;
    color: white !important;
}

body.theme-hybrid .mobile-theme-selector,
html.theme-hybrid .mobile-theme-selector {
    border-top-color: rgba(16, 185, 129, 0.25);
}

body.theme-hybrid .mobile-theme-option,
html.theme-hybrid .mobile-theme-option {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: white !important;
}

body.theme-hybrid .mobile-theme-option:hover,
html.theme-hybrid .mobile-theme-option:hover {
    background: rgba(16, 185, 129, 0.25) !important;
}

body.theme-hybrid .mobile-font-slider,
html.theme-hybrid .mobile-font-slider {
    background: rgba(16, 185, 129, 0.12);
}

body.theme-hybrid .mobile-font-slider span,
html.theme-hybrid .mobile-font-slider span {
    color: white !important;
}

/* Section Title */
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-title h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.section-title .view-all {
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ============================================
   LEGACY VIEW STYLING OVERRIDES
   For existing views to work with dark theme
   ============================================ */

/* Details Page Container */
.details-container {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.details-header h2 {
    color: var(--text-primary) !important;
}

.details-header p {
    color: var(--text-secondary) !important;
}

/* Fancy Cards (Details, MakerSpace, etc.) */
.fancy-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

.fancy-card-header {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important;
    padding: 1rem 1.5rem;
}

.fancy-card-header h3 {
    color: #ffffff !important;
}

.fancy-card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    padding: 1.5rem;
}

.fancy-card-body p,
.fancy-card-body li,
.fancy-card-body span {
    color: var(--text-secondary) !important;
}

.fancy-card-body strong {
    color: var(--text-primary) !important;
}

.fancy-card-body a {
    color: var(--accent-primary) !important;
}

.fancy-card-footer {
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 0.75rem 1.5rem;
}

/* Tags */
.tag-badge {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Description containers */
.kurze-beschreibung-container,
.lange-beschreibung-container {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.kurze-beschreibung,
.lange-beschreibung {
    color: var(--text-secondary) !important;
}

.kurze-beschreibung h6,
.lange-beschreibung h6 {
    color: var(--text-primary) !important;
}

/* Accordion - Updated with Design Tokens */
.accordion,
.fancy-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-item-gap);
}

.accordion-item,
.fancy-accordion .accordion-item {
    background-color: var(--accordion-bg) !important;
    border: var(--accordion-border-width) solid var(--accordion-border) !important;
    border-radius: var(--accordion-border-radius) !important;
    overflow: hidden;
}

.accordion-header,
.fancy-accordion .accordion-header {
    background-color: var(--accordion-header-bg) !important;
}

.accordion-button,
.fancy-accordion .accordion-button {
    font-size: var(--accordion-header-font-size);
    font-weight: var(--accordion-header-font-weight);
    padding: var(--accordion-header-padding-y) var(--accordion-header-padding-x);
    background-color: var(--accordion-header-bg) !important;
    color: var(--accordion-text) !important;
    border: none !important;
    transition: all var(--transition-fast);
}

.accordion-button:hover,
.fancy-accordion .accordion-button:hover {
    background-color: var(--accordion-header-bg-hover) !important;
}

.accordion-button:not(.collapsed),
.fancy-accordion .accordion-button:not(.collapsed) {
    background-color: var(--accordion-header-bg-active) !important;
    color: var(--accent-primary) !important;
}

.accordion-button::after,
.fancy-accordion .accordion-button::after {
    font-size: var(--accordion-icon-size);
    color: var(--accordion-icon);
}

.accordion-body,
.fancy-accordion .accordion-body {
    font-size: var(--accordion-body-font-size);
    padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
    background-color: var(--accordion-bg) !important;
    color: var(--text-secondary) !important;
}

/* Carousel */
.carousel-inner img {
    border-radius: var(--radius-md);
}

.thumbnail {
    border-color: var(--border-subtle) !important;
    background-color: var(--bg-tertiary) !important;
    border-radius: var(--radius-md);
}

.thumbnail:hover {
    border-color: var(--accent-primary) !important;
}

/* Buttons */
.btn-back,
.btn-success {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.btn-back:hover {
    background-color: transparent !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.btn-custom {
    border-radius: var(--radius-md) !important;
}

/* Toggle link */
.toggle-link {
    color: var(--accent-primary) !important;
}

.toggle-link:hover {
    color: var(--accent-secondary) !important;
}

/* Contact/Team Cards */
.contact-item {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem;
    transition: all var(--transition-normal);
}

.contact-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--border-accent);
}

.contact-item h5,
.contact-item h6 {
    color: var(--text-primary) !important;
}

.contact-item p {
    color: var(--text-secondary) !important;
}

/* Event Cards */
.event-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--border-accent);
}

/* Portal Cards */
.portal-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 2rem;
    transition: all var(--transition-normal);
}

.portal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.portal-card h3,
.portal-card h4,
.portal-card h5 {
    color: var(--text-primary) !important;
}

.portal-card p {
    color: var(--text-secondary) !important;
}

/* Skills Cards */
.skill-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem;
    transition: all var(--transition-normal);
}

.skill-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--border-accent);
}

/* Form Controls - Updated with Design Tokens */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    min-height: var(--input-min-height);
    background-color: var(--bg-input) !important;
    border: var(--input-border-width) solid var(--border-input) !important;
    border-radius: var(--input-border-radius);
    color: var(--text-primary) !important;
    transition: all var(--transition-fast);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: var(--bg-input-focus) !important;
    border-color: var(--border-input-focus) !important;
    box-shadow: var(--input-focus-ring) !important;
    outline: none;
    color: var(--text-primary) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

.form-label,
label {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    color: var(--text-secondary) !important;
    margin-bottom: var(--label-margin-bottom);
}

/* Help text / Form hints */
.form-text,
.help-text,
.form-hint {
    font-size: var(--help-text-font-size);
    margin-top: var(--help-text-margin-top);
    color: var(--text-muted);
}

/* Textarea */
textarea.form-control,
textarea {
    min-height: var(--textarea-min-height);
    resize: vertical;
}

/* Tables - Updated with Design Tokens */
.table {
    border-radius: var(--table-border-radius);
    border: var(--table-border-width) solid var(--td-border);
    overflow: hidden;
    color: var(--text-primary) !important;
}

.table thead th {
    font-size: var(--th-font-size);
    font-weight: var(--th-font-weight);
    letter-spacing: var(--th-letter-spacing);
    text-transform: var(--th-text-transform);
    padding: var(--th-padding-y) var(--th-padding-x);
    background-color: var(--th-bg) !important;
    color: var(--th-text) !important;
    border-bottom: 2px solid var(--th-border) !important;
}

.table tbody td {
    font-size: var(--td-font-size);
    font-weight: var(--td-font-weight);
    padding: var(--td-padding-y) var(--td-padding-x);
    background-color: var(--td-bg) !important;
    color: var(--td-text) !important;
    border-bottom: 1px solid var(--td-border) !important;
}

.table tbody tr:hover {
    background-color: var(--row-hover-bg) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--row-stripe-bg) !important;
}

/* DataTables */
.dataTables_wrapper {
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* Cards (Bootstrap) - Updated with Design Tokens */
.card {
    background-color: var(--bg-card) !important;
    border: var(--card-border-width) solid var(--border-subtle) !important;
    border-radius: var(--card-border-radius) !important;
    overflow: hidden;
}

.card-header {
    padding: var(--card-header-padding-y) var(--card-header-padding-x);
    font-size: var(--card-header-font-size);
    font-weight: var(--card-header-font-weight);
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.card-body {
    padding: var(--card-padding);
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

.card-footer {
    padding: var(--card-footer-padding-y) var(--card-footer-padding-x);
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.card-footer .btn+.btn,
.card-footer [class*="btn-"]+[class*="btn-"] {
    margin-left: var(--card-footer-btn-gap);
}

.card-title {
    color: var(--text-primary) !important;
}

.card-text {
    color: var(--text-secondary) !important;
}

/* Alerts */
.alert {
    border-radius: var(--radius-md);
}

.alert-success {
    background-color: rgba(144, 188, 20, 0.15) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: #0dcaf0 !important;
    color: #0dcaf0 !important;
}

/* Modals */
.modal-content {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg);
}

.modal-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.modal-body {
    color: var(--text-secondary) !important;
}

.modal-footer {
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.btn-close {
    filter: invert(1);
}

/* Lists */
.list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

.list-group-item:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Text utilities override */
.text-dark {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-tertiary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* Background utilities */
.bg-light {
    background-color: var(--bg-tertiary) !important;
}

.bg-white {
    background-color: var(--bg-card) !important;
}

/* Border utilities */
.border {
    border-color: var(--border-subtle) !important;
}

.border-bottom {
    border-bottom-color: var(--border-subtle) !important;
}

.border-top {
    border-top-color: var(--border-subtle) !important;
}

/* HR elements */
hr {
    border-color: var(--border-subtle);
    opacity: 1;
}

/* Container overrides */
.container {
    max-width: 100%;
    padding-bottom: 2rem;
}

/* Main content area spacing */
main {
    color: var(--text-primary);
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: var(--text-primary);
}

main p {
    color: var(--text-secondary);
}

/* Video Section */
.video-player {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* MakerSpace specific */
.makerspace-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-normal);
}

.makerspace-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--border-accent);
}

/* XR Dropdown styling */
.xr-dropdown-container {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
}

.xr-dropdown-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: all var(--transition-fast);
}

.xr-dropdown-card:hover {
    background-color: var(--accent-primary) !important;
}

.xr-card-title {
    color: var(--text-primary) !important;
}

.xr-dropdown-card:hover .xr-card-title {
    color: #ffffff !important;
}

.xr-badge {
    background-color: var(--accent-primary) !important;
}

/* Icon styling */
i.bi,
i.fa,
i.fas,
i.far,
i.fab {
    color: inherit;
}

/* ============================================
   ADMIN AREA SPECIFIC OVERRIDES
   ============================================ */

/* Admin Page Headers */
.container h3,
.container-fluid h3 {
    color: var(--text-primary);
}

/* Admin Tables */
.table-dark,
.table-dark thead,
.table-dark thead th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.table-dark tbody td {
    background-color: var(--bg-card) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-card-hover) !important;
}

/* DataTables specific overrides */
table.dataTable {
    border-collapse: collapse !important;
}

table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

table.dataTable tbody tr {
    background-color: var(--bg-card) !important;
}

table.dataTable tbody tr:hover {
    background-color: var(--bg-card-hover) !important;
}

table.dataTable tbody td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: var(--bg-secondary) !important;
}

table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
    background-color: var(--bg-card) !important;
}

/* DataTables sorting icons */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: 0.5;
}

/* Admin Action Buttons - Filled default, outlined on hover */
.btn-danger {
    background-color: var(--color-danger, #dc3545) !important;
    border-color: var(--color-danger, #dc3545) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: transparent !important;
    border-color: var(--color-danger, #dc3545) !important;
    color: var(--color-danger, #dc3545) !important;
}

.btn-warning {
    background-color: var(--color-warning, #ffc107) !important;
    border-color: var(--color-warning, #ffc107) !important;
    color: #1a1a1a !important;
}

.btn-warning:hover {
    background-color: transparent !important;
    border-color: var(--color-warning, #ffc107) !important;
    color: var(--color-warning, #b45309) !important;
}

.btn-info {
    background-color: var(--color-info, #0dcaf0) !important;
    border-color: var(--color-info, #0dcaf0) !important;
    color: #ffffff !important;
}

.btn-info:hover {
    background-color: transparent !important;
    border-color: var(--color-info, #0dcaf0) !important;
    color: var(--color-info, #0dcaf0) !important;
}

.btn-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: transparent !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.btn-success {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: transparent !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* Toggle Switches */
.form-check-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.form-switch .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-subtle);
}

/* Select Dropdowns */
select.form-control,
select.form-select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

select.form-control option,
select.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Input file */
.form-control[type="file"] {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.form-control[type="file"]::file-selector-button {
    background-color: var(--accent-primary);
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border-radius: var(--radius-sm);
}

/* CKEditor overrides */
.ck.ck-editor__main>.ck-editor__editable {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.ck.ck-toolbar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.ck.ck-button {
    color: var(--text-primary) !important;
}

.ck.ck-button:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Summernote overrides */
.note-editor.note-frame {
    border-color: var(--border-subtle) !important;
}

.note-editor .note-toolbar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
    overflow: visible;
}

.note-editor .note-editing-area .note-editable {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.note-editor .note-statusbar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.note-editor .note-btn {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.note-editor .note-btn:hover {
    background: var(--bg-secondary) !important;
}

.note-editor .dropdown-menu,
.note-editor .note-dropdown-menu,
.note-editor .note-color-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-lg);
    z-index: 2000;
}

.note-editor .dropdown-item,
.note-editor .note-dropdown-item {
    color: var(--text-secondary) !important;
}

.note-editor .dropdown-item:hover,
.note-editor .dropdown-item:focus,
.note-editor .note-dropdown-item:hover,
.note-editor .note-dropdown-item:focus {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Image previews */
.img-thumbnail {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-subtle) !important;
}

/* Validation messages */
.field-validation-error {
    color: #dc3545 !important;
}

.input-validation-error {
    border-color: #dc3545 !important;
}

/* Status badges */
.badge {
    font-weight: 500;
}

.badge.bg-success {
    background-color: var(--accent-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

/* Toastr notifications */
.toast {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.toast-success {
    background-color: rgba(144, 188, 20, 0.9) !important;
}

.toast-error {
    background-color: rgba(220, 53, 69, 0.9) !important;
}

.toast-info {
    background-color: rgba(13, 202, 240, 0.9) !important;
}

.toast-warning {
    background-color: rgba(255, 193, 7, 0.9) !important;
    color: #000 !important;
}

/* SweetAlert2 dark theme */
.swal2-popup {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.swal2-title {
    color: var(--text-primary) !important;
}

.swal2-html-container {
    color: var(--text-secondary) !important;
}

.swal2-confirm {
    background-color: var(--accent-primary) !important;
}

.swal2-cancel {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Progress bars */
.progress {
    background-color: var(--bg-tertiary) !important;
}

.progress-bar {
    background-color: var(--accent-primary) !important;
}

/* Tabs/Nav tabs */
.nav-tabs {
    border-bottom-color: var(--border-subtle) !important;
}

.nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-card) !important;
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Pills - Updated with Design Tokens */
.nav-pills .nav-link,
.pill,
.chip,
.filter-chip,
.tag {
    font-size: var(--pill-font-size);
    font-weight: var(--pill-font-weight);
    padding: var(--pill-padding-y) var(--pill-padding-x);
    border-radius: var(--pill-border-radius);
    border: var(--pill-border-width) solid var(--pill-border);
    background-color: var(--pill-bg);
    color: var(--pill-text) !important;
    transition: all var(--transition-fast);
}

.nav-pills .nav-link:hover,
.pill:hover,
.chip:hover,
.filter-chip:hover,
.tag:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

.nav-pills .nav-link.active,
.pill.active,
.chip.active,
.chip.selected,
.filter-chip.active,
.tag.active {
    background-color: var(--pill-bg-active) !important;
    border-color: var(--pill-border-active) !important;
    color: var(--pill-text-active) !important;
    /* ALWAYS white on accent */
}

/* Pills container spacing */
.pills-container,
.chips-container,
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pill-gap);
}

/* Badges - Updated with Design Tokens */
.badge {
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    letter-spacing: var(--badge-letter-spacing);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-border-radius);
}

/* Offcanvas */
.offcanvas {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Spinner */
.spinner-border {
    color: var(--accent-primary) !important;
}

/* Empty states */
.empty-state {
    color: var(--text-tertiary);
    text-align: center;
    padding: 3rem;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

/* Container backgrounds */
.container,
.container-fluid {
    background-color: transparent;
}

/* Shadow overrides */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Text selection */
::selection {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* Focus states */
*:focus {
    outline-color: var(--accent-primary);
}

/* Print styles */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }

    .app-sidebar,
    .top-toolbar,
    .app-footer {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }
}

/* ========================
   BRIGHT WHITE TEXT OVERRIDES
   No gray on gray - all text should be readable
========================= */
body,
p,
span,
div,
label,
.form-label,
.form-check-label,
td,
th,
li,
.card-text,
.text-muted,
.text-secondary {
    color: var(--text-primary) !important;
}

/* Specific overrides for secondary text that should still be visible */
.text-muted,
.form-text,
small,
.small,
figcaption,
.caption {
    color: var(--text-secondary) !important;
}

/* Ensure links are visible */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.sidebar-nav-item) {
    color: var(--accent-primary);
}

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.sidebar-nav-item):hover {
    color: var(--accent-secondary);
}

/* Form placeholders should be visible but subtle */
::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Table text */
table,
.table {
    color: var(--text-primary);
}

.table td,
.table th {
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Badge text */
.badge {
    color: white !important;
}

/* Dropdown items */
.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   ENHANCED PORTFOLIO SECTIONS
   Premium animations and effects
   ============================================ */

/* ============================================
   INTRO TEXT CARDS - Full-width with expand/collapse
   ============================================ */
.intro-cards-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.intro-text-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    position: relative;
    transition: box-shadow 0.2s ease;
}

.intro-text-card:hover {
    box-shadow: var(--shadow-md);
}

.intro-text-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.intro-text-card-accent {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--intro-accent, var(--accent-primary));
    margin-bottom: 1rem;
}

.intro-text-card-body {
    position: relative;
}

.intro-text-card-content {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.intro-text-card-content.clamped {
    max-height: 4.8em;
    /* approx 3 lines (1.7 line-height * 0.95rem ~= 1.6em per line) */
    position: relative;
}

.intro-text-card-content.clamped::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--bg-card);
    padding-left: 4px;
}

.intro-text-card-content.expanded {
    max-height: none;
}

.intro-text-card-content.expanded::after {
    display: none;
}

.intro-text-card-content p {
    margin: 0 0 0.5rem 0;
}

.intro-text-card-content p:last-child {
    margin-bottom: 0;
}

.intro-text-toggle {
    background: none;
    border: none;
    padding: 0.5rem 0 0 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--intro-accent, var(--accent-primary));
    transition: opacity 0.2s;
}

.intro-text-toggle:hover {
    opacity: 0.8;
}

/* Light theme adjustments */
body.theme-light .intro-text-card {
    background: #ffffff;
    border-color: #e5e7eb;
}

body.theme-light .intro-text-card-content.clamped::after {
    background: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .intro-text-card {
        padding: 1.25rem 1.5rem;
    }

    .intro-text-card-title {
        font-size: 1.2rem;
    }
}

/* Intro Text Section (legacy - centered variant) */
section.portfolio-intro,
.portfolio-intro {
    text-align: center;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    display: block;
}

.portfolio-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);
}

.portfolio-intro-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-intro-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Stats Section */
.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--stat-color, var(--accent-primary));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
    border-color: var(--border-accent);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    color: var(--stat-color, var(--accent-primary));
    transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Feature Cards Section */
.portfolio-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--feature-color, var(--accent-primary));
    transform: scaleY(0);
    transition: transform var(--transition-normal);
    transform-origin: bottom;
}

.feature-card:hover {
    transform: translateY(-6px) translateX(4px);
    box-shadow: var(--shadow-lg), -4px 4px 20px var(--accent-glow);
    border-color: var(--border-accent);
}

.feature-card:hover::before {
    transform: scaleY(1);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--feature-color, var(--accent-primary)), var(--accent-tertiary));
    color: white;
    margin-bottom: 1.25rem;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.feature-subtitle {
    font-size: 0.85rem;
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.feature-content-wrapper {
    position: relative;
    max-height: 6rem;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-bottom: 0.5rem;
}

.feature-content-wrapper.expanded {
    max-height: 1000px;
}

.feature-content-wrapper:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
}

.feature-content-wrapper.no-toggle {
    max-height: none;
}

.feature-content-wrapper.no-toggle::after {
    display: none;
}

.feature-content {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.feature-content p:last-child,
.feature-content ul:last-child,
.feature-content ol:last-child {
    margin-bottom: 0;
}

.feature-toggle-btn {
    display: none;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--feature-color, var(--accent-primary));
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 0.75rem;
}

.feature-toggle-btn.visible {
    display: flex;
}

.feature-toggle-btn:hover {
    opacity: 0.75;
}

.feature-toggle-btn i {
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.feature-toggle-btn.expanded i {
    transform: rotate(180deg);
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.feature-link i {
    transition: transform var(--transition-fast);
}

.feature-card:hover .feature-link {
    color: var(--accent-secondary);
}

.feature-card:hover .feature-link i {
    transform: translateX(4px);
}

/* CTA Section */
section.portfolio-cta,
.portfolio-cta {
    /* Default blue gradient - can be overridden by .cta-theme-adaptive for dynamic theming */
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 3rem 0;
    display: block;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25);
    color: white;
}

.portfolio-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: ctaShine 8s linear infinite;
}

@keyframes ctaShine {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.portfolio-cta-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    animation: ctaFloat 3s ease-in-out infinite;
}

@keyframes ctaFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.portfolio-cta-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    position: relative;
}

.portfolio-cta-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.portfolio-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: #2563eb;
    padding: 0.875rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.portfolio-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: #1e40af;
}

.portfolio-cta-btn i {
    transition: transform var(--transition-fast);
}

.portfolio-cta-btn:hover i {
    transform: translateX(4px);
}

/* Partners Section */
.portfolio-partners {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
}

.partners-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.partner-logo {
    max-height: 50px;
    max-width: 120px;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all var(--transition-normal);
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* TextArea Section */
.textarea-sections {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.textarea-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: relative;
    transition: all var(--transition-normal);
}

.textarea-section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-primary);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.textarea-section-card:hover {
    box-shadow: var(--shadow-md);
}

.textarea-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.textarea-section-content {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 0.5rem;
}

.textarea-section-content p {
    margin-bottom: 0.75rem;
}

.textarea-section-content p:last-child {
    margin-bottom: 0;
}

.textarea-section-content a {
    color: var(--accent-primary);
    text-decoration: underline;
}

.textarea-section-content a:hover {
    color: var(--accent-secondary);
}

@media (max-width: 768px) {
    .textarea-section-card {
        padding: 1.25rem;
    }

    .textarea-section-title {
        font-size: 1.25rem;
    }
}

/* Section Divider */
.section-divider {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    gap: 1rem;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}

.section-divider-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Enhanced Project Cards */
.modern-card-enhanced {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.modern-card-enhanced:hover {
    transform: translateY(-8px) rotateX(2deg);
}

.modern-card-enhanced::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.modern-card-enhanced:hover::after {
    opacity: 1;
}

/* Animated Counter */
.counter-animate {
    display: inline-block;
}

/* Highlight Carousel Section Title */
.highlights-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.highlights-section-title h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.highlights-section-title::before {
    content: '';
    width: 4px;
    height: 28px;
    background: var(--accent-primary);
    border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .portfolio-intro {
        padding: 2rem 1.5rem;
    }

    .portfolio-intro-title {
        font-size: 1.75rem;
    }

    .portfolio-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-card {
        padding: 1.5rem 1rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    .portfolio-features {
        grid-template-columns: 1fr;
    }

    .portfolio-cta {
        padding: 2rem 1.5rem;
    }

    .portfolio-cta-title {
        font-size: 1.5rem;
    }
}

/* Animation for elements entering viewport */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure portfolio sections keep their styling when combined with animate-on-scroll */
.portfolio-intro.animate-on-scroll,
.portfolio-intro.animate-on-scroll.visible,
section.portfolio-intro.animate-on-scroll {
    background: var(--bg-card) !important;
    border-radius: 24px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 3rem 2rem !important;
}

.portfolio-cta.animate-on-scroll,
.portfolio-cta.animate-on-scroll.visible,
section.portfolio-cta.animate-on-scroll {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25) !important;
    padding: 3rem 2rem !important;
    color: white !important;
}

body.theme-light .portfolio-intro.animate-on-scroll,
body.theme-light .portfolio-intro.animate-on-scroll.visible,
body.theme-light section.portfolio-intro.animate-on-scroll {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .portfolio-cta.animate-on-scroll,
body.theme-light .portfolio-cta.animate-on-scroll.visible,
body.theme-light section.portfolio-cta.animate-on-scroll {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25) !important;
}

/* Staggered animation delays */
.animate-delay-1 {
    transition-delay: 0.1s;
}

.animate-delay-2 {
    transition-delay: 0.2s;
}

.animate-delay-3 {
    transition-delay: 0.3s;
}

.animate-delay-4 {
    transition-delay: 0.4s;
}

/* ============================================
   ENHANCED HIGHLIGHTS SECTIONS
   Premium carousel design for KIBar & Projects
   ============================================ */

.highlights-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 2rem 0 3rem 0;
}

.highlights-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
}

.highlights-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--highlight-accent), transparent);
}

/* Header */
.highlights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.highlights-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.highlights-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--highlight-accent), color-mix(in srgb, var(--highlight-accent) 70%, black));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--highlight-accent) 40%, transparent);
}

.highlights-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.highlights-subtitle {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0.25rem 0 0 0;
}

.highlights-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.highlights-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 0.25rem;
}

.highlights-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.highlights-nav-btn:hover {
    background: var(--highlight-accent);
    color: white;
}

.highlights-counter {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: center;
}

.highlights-counter span {
    color: var(--highlight-accent);
}

.highlights-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid var(--highlight-accent);
    border-radius: var(--radius-md);
    color: var(--highlight-accent);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.highlights-view-all:hover {
    background: var(--highlight-accent);
    color: white;
}

.highlights-view-all i {
    transition: transform var(--transition-fast);
}

.highlights-view-all:hover i {
    transform: translateX(4px);
}

/* Carousel */
.highlights-carousel {
    position: relative;
}

.highlights-carousel .carousel-inner {
    overflow: visible;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 992px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
}

/* Highlight Card */
.highlight-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    text-decoration: none;
    transition: all var(--transition-normal);
    position: relative;
}

.highlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: var(--accent-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    z-index: 1;
}

.highlight-card:hover {
    border-color: transparent;
}

.highlight-card:hover::before {
    opacity: 1;
}

/* Card Image */
.highlight-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.highlight-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.highlight-card:hover .highlight-card-image img {
    transform: scale(1.08);
}

.highlight-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1rem;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.highlight-card:hover .highlight-card-overlay {
    opacity: 1;
}

.highlight-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--highlight-accent);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.highlight-card-badge-status {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 3;
    opacity: 1 !important;
}

.highlight-card-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.625rem;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    margin-left: 0.5rem;
}

.highlight-card-lock i {
    color: inherit;
}

/* Card Content */
.highlight-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.highlight-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.highlight-card-tag {
    padding: 0.25rem 0.625rem;
    background: color-mix(in srgb, var(--highlight-accent) 15%, transparent);
    color: var(--highlight-accent);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.highlight-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.highlight-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.highlight-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--highlight-accent) 12%, transparent);
    color: var(--highlight-accent);
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.highlight-card-action i {
    transition: transform var(--transition-fast);
}

.highlight-card:hover .highlight-card-action {
    background: var(--highlight-accent, var(--accent-primary)) !important;
    border-color: var(--highlight-accent, var(--accent-primary)) !important;
    color: #ffffff !important;
}

.highlight-card:hover .highlight-card-action i {
    transform: translateX(4px);
}

/* Progress Dots */
.highlights-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.highlights-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border-subtle);
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.highlights-progress-dot:hover {
    background: var(--text-tertiary);
}

.highlights-progress-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--highlight-accent);
}

/* Responsive */
@media (max-width: 768px) {
    .highlights-section {
        padding: 1.25rem;
    }

    .highlights-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .highlights-actions {
        width: 100%;
        justify-content: space-between;
    }

    .highlights-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .highlights-title {
        font-size: 1.25rem;
    }

    .highlight-card-image {
        height: 150px;
    }
}

/* ============================================
   THEME FIXES FOR PORTFOLIO & ADMIN VIEWS
   Ensuring consistent styling across all 4 themes
   ============================================ */

/* Feature icons - Always white on gradient background (all themes) */
.feature-icon,
.preview-card-feature .feature-icon,
.preview-feature-icon {
    color: white !important;
}

/* Stat icons - Use accent color from theme */
.stat-icon i,
.preview-card-stat .stat-icon i,
.preview-stat-icon i {
    color: inherit;
}

/* CTA section - Always white text on gradient */
.portfolio-cta,
.portfolio-cta-title,
.portfolio-cta-subtitle,
.portfolio-cta-icon,
.preview-card-cta,
.preview-card-cta .cta-icon,
.preview-card-cta .cta-title,
.preview-card-cta .cta-subtitle,
.preview-cta,
.preview-cta-icon,
.preview-cta-title,
.preview-cta-subtitle {
    color: white;
}

/* Highlights section icons - Always white */
.highlights-icon i,
.highlight-card-badge i {
    color: white !important;
}

/* ============================================
   LIGHT MODE - Portfolio & Admin Specific Fixes
   ============================================ */

body.theme-light .stat-card {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

body.theme-light .stat-card:hover {
    box-shadow: var(--shadow-lg);
}

body.theme-light .feature-card {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

body.theme-light .feature-card:hover {
    box-shadow: var(--shadow-lg);
}

/* Light mode portfolio intro - More visible background */
body.theme-light .portfolio-intro,
body.theme-light section.portfolio-intro {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .portfolio-intro-title {
    background: linear-gradient(135deg, #1e3a5f 0%, var(--accent-primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.theme-light .portfolio-intro-subtitle {
    color: #475569 !important;
}

/* Light mode portfolio CTA - Ensure blue gradient shows */
body.theme-light .portfolio-cta,
body.theme-light section.portfolio-cta {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25) !important;
}

body.theme-light .portfolio-cta-title,
body.theme-light .portfolio-cta-subtitle,
body.theme-light .portfolio-cta-icon,
body.theme-light .portfolio-cta-icon i {
    color: #ffffff !important;
}

body.theme-light .portfolio-cta-btn {
    background: #ffffff !important;
    color: #2563eb !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .portfolio-cta-btn:hover {
    background: #f8fafc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Light mode highlights section */
body.theme-light .highlights-section {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

body.theme-light .highlights-icon {
    box-shadow: var(--shadow-sm);
}

body.theme-light .highlight-card {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

body.theme-light .highlight-card:hover {
    box-shadow: none;
}

body.theme-light .highlight-card-tag {
    background: #e7e5e4;
    color: #44403c;
}

/* Light mode section divider */
body.theme-light .section-divider {
    background: linear-gradient(90deg, transparent, #d6d3d1, transparent);
}

body.theme-light .section-divider-text {
    background: #fafaf9;
    color: #78716c;
}

/* Light mode partners section */
body.theme-light .portfolio-partners {
    background: #f5f5f4;
}

body.theme-light .partners-title {
    color: #44403c;
}

body.theme-light .partner-logo {
    filter: grayscale(20%);
}

body.theme-light .partner-logo:hover {
    filter: grayscale(0%);
}

/* ============================================
   LIGHT MODE - Admin Views Fixes
   ============================================ */

/* Admin cards - Project & MakerSpace */
body.theme-light .admin-project-card,
body.theme-light .admin-makerspace-card,
body.theme-light .admin-preview-card {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

body.theme-light .admin-project-card:hover,
body.theme-light .admin-makerspace-card:hover,
body.theme-light .admin-preview-card:hover {
    box-shadow: var(--shadow-lg);
}

body.theme-light .admin-card-controls,
body.theme-light .admin-controls-header {
    background: #f5f5f4;
}

body.theme-light .admin-card-image {
    background: #e7e5e4;
}

body.theme-light .admin-card-title {
    color: #1c1917;
}

body.theme-light .admin-card-description {
    color: #44403c;
}

body.theme-light .admin-card-tag {
    background: #e7e5e4;
    color: #44403c;
}

body.theme-light .admin-toggle-cell {
    border-color: #e7e5e4;
}

body.theme-light .admin-toggle-cell:hover {
    background: #f5f5f4;
}

body.theme-light .admin-toggle-cell.active {
    background: rgba(16, 185, 129, 0.1);
}

body.theme-light .admin-toggle-icon {
    color: #78716c;
}

body.theme-light .admin-toggle-cell.active .admin-toggle-icon {
    color: #10b981;
}

body.theme-light .admin-toggle-label {
    color: #78716c;
}

/* Admin toolbar & search */
body.theme-light .admin-toolbar .admin-search {
    background: #ffffff;
    border-color: #e7e5e4;
}

body.theme-light .admin-toolbar .admin-search input {
    color: #1c1917;
}

body.theme-light .admin-count {
    background: #f5f5f4;
    color: #44403c;
}

/* Admin PortfolioSection preview cards */
body.theme-light .preview-card-stat,
body.theme-light .preview-card-feature,
body.theme-light .preview-card-partner {
    background: #ffffff;
    border-color: #e7e5e4;
}

body.theme-light .preview-card-stat .stat-value,
body.theme-light .preview-card-stat .stat-label,
body.theme-light .preview-card-feature .feature-title,
body.theme-light .preview-card-feature .feature-content {
    color: #1c1917;
}

body.theme-light .preview-card-feature .feature-subtitle {
    color: var(--accent-primary);
}

body.theme-light .preview-card-intro {
    background: linear-gradient(135deg, #f5f5f4, #e7e5e4);
}

body.theme-light .preview-card-intro .intro-subtitle {
    color: #44403c;
}

body.theme-light .preview-card-partner .partner-placeholder {
    background: #e7e5e4;
    color: #78716c;
}

/* Section type header in admin */
body.theme-light .section-type-header {
    background: #f5f5f4;
    border-color: #e7e5e4;
}

body.theme-light .section-type-header h5 {
    color: #1c1917;
}

body.theme-light .section-type-count {
    background: #e7e5e4;
    color: #44403c;
}

/* Admin preview grid */
body.theme-light .admin-preview-grid {
    background: #fafaf9;
}

/* Card action bar - always dark for contrast */
.card-actions-bar {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 100%) !important;
}

.card-actions-bar .card-toggle-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

.card-actions-bar .card-toggle-wrapper {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   MIDNIGHT PURPLE THEME - Admin Fixes
   ============================================ */

body.theme-midnight .admin-project-card,
body.theme-midnight .admin-makerspace-card,
body.theme-midnight .admin-preview-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(37, 26, 51, 0.5));
    border-color: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .admin-card-controls,
body.theme-midnight .admin-controls-header {
    background: rgba(26, 18, 37, 0.8);
    border-color: rgba(167, 139, 250, 0.1);
}

body.theme-midnight .section-type-header {
    background: rgba(26, 18, 37, 0.8);
    border-color: rgba(167, 139, 250, 0.1);
}

body.theme-midnight .section-type-header .type-icon {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

body.theme-midnight .admin-card-order {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

body.theme-midnight .admin-toggle-cell.active {
    background: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .admin-toggle-cell.active .admin-toggle-icon {
    color: #a78bfa;
}

body.theme-midnight .stat-card,
body.theme-midnight .feature-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(37, 26, 51, 0.5));
    border-color: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .highlights-section {
    background: linear-gradient(145deg, var(--bg-secondary), rgba(37, 26, 51, 0.3));
    border-color: rgba(167, 139, 250, 0.15);
}

body.theme-midnight .highlight-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(37, 26, 51, 0.5));
}

/* ============================================
   FOREST EMERALD THEME - Admin Fixes
   ============================================ */

body.theme-forest .admin-project-card,
body.theme-forest .admin-makerspace-card,
body.theme-forest .admin-preview-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(22, 41, 33, 0.5));
    border-color: rgba(16, 185, 129, 0.15);
}

body.theme-forest .admin-card-controls,
body.theme-forest .admin-controls-header {
    background: rgba(15, 31, 24, 0.8);
    border-color: rgba(16, 185, 129, 0.1);
}

body.theme-forest .section-type-header {
    background: rgba(15, 31, 24, 0.8);
    border-color: rgba(16, 185, 129, 0.1);
}

body.theme-forest .section-type-header .type-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

body.theme-forest .admin-card-order {
    background: linear-gradient(135deg, #10b981, #059669);
}

body.theme-forest .stat-card,
body.theme-forest .feature-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(22, 41, 33, 0.5));
    border-color: rgba(16, 185, 129, 0.15);
}

body.theme-forest .highlights-section {
    background: linear-gradient(145deg, var(--bg-secondary), rgba(22, 41, 33, 0.3));
    border-color: rgba(16, 185, 129, 0.15);
}

body.theme-forest .highlight-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(22, 41, 33, 0.5));
}

/* ============================================
   DARK THEME (Default) - Ensure consistency
   ============================================ */

body:not(.theme-light):not(.theme-midnight):not(.theme-forest) .admin-project-card,
body:not(.theme-light):not(.theme-midnight):not(.theme-forest) .admin-makerspace-card,
body:not(.theme-light):not(.theme-midnight):not(.theme-forest) .admin-preview-card {
    background: var(--bg-card);
    border-color: var(--border-subtle);
}

body:not(.theme-light):not(.theme-midnight):not(.theme-forest) .section-type-header .type-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* ============================================
   SORTABLE / DRAG-AND-DROP FIXES
   ============================================ */

/* Drag handle styling */
.drag-handle,
.handle {
    cursor: grab !important;
    user-select: none;
    touch-action: none;
}

.drag-handle:active,
.handle:active {
    cursor: grabbing !important;
}

/* Sortable item being dragged */
.sortable-row.ui-sortable-helper {
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

/* Sortable placeholder styling */
.sortable-placeholder,
.ui-sortable-placeholder {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 2px dashed var(--accent-primary) !important;
    border-radius: var(--radius-lg) !important;
    visibility: visible !important;
    min-height: 180px !important;
}

/* Admin preview cards sortable */
.admin-preview-grid.ui-sortable .admin-preview-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-preview-grid.ui-sortable .admin-preview-card.ui-sortable-helper {
    transition: none;
}

/* ============================================
   COMPREHENSIVE LIGHT MODE ICON FIXES
   All icons that should remain white on colored backgrounds
   ============================================ */

/* Feature icons - Always white on gradient (all themes) */
.feature-icon i,
.feature-icon,
.preview-card-feature .feature-icon i,
body.theme-light .feature-icon,
body.theme-light .feature-icon i,
body.theme-light .preview-card-feature .feature-icon,
body.theme-light .preview-card-feature .feature-icon i {
    color: white !important;
}

/* Highlights section icons - Always white on colored background */
.highlights-icon,
.highlights-icon i,
body.theme-light .highlights-icon,
body.theme-light .highlights-icon i {
    color: white !important;
}

/* CTA section - Always white */
.portfolio-cta-icon,
.portfolio-cta-icon i,
.cta-icon,
.cta-icon i,
body.theme-light .portfolio-cta-icon,
body.theme-light .portfolio-cta-icon i,
body.theme-light .cta-icon,
body.theme-light .cta-icon i,
body.theme-light .preview-card-cta .cta-icon,
body.theme-light .preview-card-cta .cta-icon i {
    color: white !important;
}

/* Section type header icons - Always white */
.section-type-header .type-icon,
.section-type-header .type-icon i,
body.theme-light .section-type-header .type-icon,
body.theme-light .section-type-header .type-icon i {
    color: white !important;
}

/* Admin panel icons - Always white */
.admin-panel-header i,
body.theme-light .admin-panel-header i {
    color: white !important;
}

/* Sidebar nav icons on colored backgrounds */
.sidebar-nav-item.active .sidebar-nav-icon i,
body.theme-light .sidebar-nav-item.active .sidebar-nav-icon i {
    color: white !important;
}

/* Badge icons */
.highlight-card-badge i,
.modern-card-badge i,
body.theme-light .highlight-card-badge i,
body.theme-light .modern-card-badge i {
    color: inherit;
}

/* Navigation buttons icons */
.highlights-nav-btn i,
body.theme-light .highlights-nav-btn i {
    color: inherit;
}

/* Order badge in admin */
.order-badge,
body.theme-light .order-badge {
    color: white !important;
}

/* Light mode specific overrides for stat icons - use accent color */
body.theme-light .stat-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
}

body.theme-light .stat-icon i {
    color: var(--stat-color, var(--accent-primary)) !important;
}

/* Light mode toggle active icons in admin */
body.theme-light .admin-toggle-cell.active .admin-toggle-icon,
body.theme-light .admin-toggle-cell.active .admin-toggle-icon i {
    color: white !important;
}

/* Light mode portfolio cards text */
body.theme-light .highlight-card-title {
    color: #1c1917;
}

body.theme-light .highlight-card-desc {
    color: #44403c;
}

body.theme-light .highlight-card-action {
    color: var(--accent-primary);
}

/* Light mode highlights header */
body.theme-light .highlights-title {
    color: #1c1917;
}

body.theme-light .highlights-subtitle {
    color: #57534e;
}

body.theme-light .highlights-counter {
    color: #78716c;
}

/* Light mode feature cards */
body.theme-light .feature-title {
    color: #1c1917;
}

body.theme-light .feature-subtitle {
    color: var(--accent-primary);
}

body.theme-light .feature-content {
    color: #44403c;
}

/* Light mode stat cards */
body.theme-light .stat-value {
    color: #1c1917;
}

body.theme-light .stat-label {
    color: #57534e;
}

/* Light mode filter section - consolidated in premium overrides above */

/* Light mode modern cards */
body.theme-light .modern-card {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

body.theme-light .modern-card:hover {
    box-shadow: var(--shadow-lg);
}

body.theme-light .modern-card-title {
    color: #1c1917;
}

body.theme-light .modern-card-description {
    color: #44403c;
}


/* Light mode no results */
body.theme-light .no-results {
    background: #f5f5f4;
    color: #44403c;
}

body.theme-light .no-results i {
    color: #a8a29e;
}

/* Light mode pagination */
body.theme-light .pagination-btn {
    background: #ffffff;
    color: #44403c;
    border-color: #e7e5e4;
}

body.theme-light .pagination-btn:hover,
body.theme-light .pagination-btn.active {
    background: var(--accent-primary);
    color: white;
}

/* ========================
   FAVORITE BUTTON STYLES
========================= */
.favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
    padding: 0;
}

.favorite-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.favorite-btn i {
    font-size: 1.2rem;
    color: #ffffff;
    transition: all var(--transition-fast);
}

.favorite-btn.favorited {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: transparent;
}

.favorite-btn.favorited i {
    color: #ffffff;
}

.favorite-btn.favorited:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Animation for favoriting */
.favorite-btn.animate {
    animation: favoriteHeart 0.4s ease;
}

@keyframes favoriteHeart {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Light theme adjustments */
body.theme-light .favorite-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: #ffffff;
}

body.theme-light .favorite-btn i {
    color: #6b7280;
}

body.theme-light .favorite-btn:hover {
    background: rgba(255, 255, 255, 1);
}

body.theme-light .favorite-btn.favorited {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

body.theme-light .favorite-btn.favorited i {
    color: #ffffff;
}

/* Card image relative container */
.modern-card-image,
.highlight-card-image,
.werke-card-image,
.project-image-container {
    position: relative;
}

/* Login hint tooltip */
.favorite-btn-login-hint {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 20;
    box-shadow: var(--shadow-md);
}

.favorite-btn:hover .favorite-btn-login-hint {
    opacity: 1;
    visibility: visible;
}

body.theme-light .favorite-btn-login-hint {
    background: #ffffff;
    color: #44403c;
    border: 1px solid #e7e5e4;
}

/* ========================
   CTA THEME-ADAPTIVE STYLES
   These styles allow CTA sections to automatically
   adapt their colors to match the current theme.

   Note: Dark theme is the default (no class added),
   so the base rule uses CSS variables from :root.
   Other themes have explicit class-based overrides.
========================= */

/* Base theme-adaptive class - Uses CSS variables for automatic theming
   This is the DEFAULT rule and works for dark theme (no class prefix needed)
   because :root defines dark theme colors in themes.css */
:root .cta-theme-adaptive,
:root .portfolio-cta.cta-theme-adaptive,
.cta-theme-adaptive,
section.cta-theme-adaptive,
.portfolio-cta.cta-theme-adaptive {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3) !important;
}

/* Base button style for dark theme (default) */
.cta-btn-theme-adaptive,
:root .cta-btn-theme-adaptive {
    color: #3b82f6 !important;
}

/* Light theme CTA - Blue */
.theme-light .cta-theme-adaptive,
.theme-light .portfolio-cta.cta-theme-adaptive,
html.theme-light .cta-theme-adaptive,
body.theme-light .cta-theme-adaptive {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15) !important;
}

.theme-light .cta-btn-theme-adaptive,
html.theme-light .cta-btn-theme-adaptive,
body.theme-light .cta-btn-theme-adaptive {
    color: #2563eb !important;
}

/* Midnight theme CTA - Purple */
.theme-midnight .cta-theme-adaptive,
.theme-midnight .portfolio-cta.cta-theme-adaptive,
html.theme-midnight .cta-theme-adaptive,
body.theme-midnight .cta-theme-adaptive {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%) !important;
    box-shadow: 0 8px 32px rgba(167, 139, 250, 0.35) !important;
}

.theme-midnight .cta-btn-theme-adaptive,
html.theme-midnight .cta-btn-theme-adaptive,
body.theme-midnight .cta-btn-theme-adaptive {
    color: #a78bfa !important;
}

/* Forest theme CTA - Emerald */
.theme-forest .cta-theme-adaptive,
.theme-forest .portfolio-cta.cta-theme-adaptive,
html.theme-forest .cta-theme-adaptive,
body.theme-forest .cta-theme-adaptive {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35) !important;
}

.theme-forest .cta-btn-theme-adaptive,
html.theme-forest .cta-btn-theme-adaptive,
body.theme-forest .cta-btn-theme-adaptive {
    color: #10b981 !important;
}

/* Uni theme CTA - Green (already handled in themes.css but adding for completeness) */
.theme-uni .cta-theme-adaptive,
.theme-uni .portfolio-cta.cta-theme-adaptive,
html.theme-uni .cta-theme-adaptive,
body.theme-uni .cta-theme-adaptive {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    box-shadow: 0 8px 32px rgba(133, 188, 39, 0.25) !important;
}

.theme-uni .cta-btn-theme-adaptive,
html.theme-uni .cta-btn-theme-adaptive,
body.theme-uni .cta-btn-theme-adaptive {
    color: #6BA31E !important;
}

/* Hybrid theme CTA - Forest Green */
.theme-hybrid .cta-theme-adaptive,
.theme-hybrid .portfolio-cta.cta-theme-adaptive,
html.theme-hybrid .cta-theme-adaptive,
body.theme-hybrid .cta-theme-adaptive {
    background: linear-gradient(135deg, #0f1c17 0%, #142119 100%) !important;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.15) !important;
}

.theme-hybrid .cta-btn-theme-adaptive,
html.theme-hybrid .cta-btn-theme-adaptive,
body.theme-hybrid .cta-btn-theme-adaptive {
    color: #10b981 !important;
}

/* ================================================================
   FEATURE CARDS - Theme-Adaptive Styling
   When UseCustomColorAcrossAllThemes is FALSE, features adapt to theme
   ================================================================ */

/* Base/Dark theme - Blue accent */
.feature-card.feature-theme-adaptive {
    --feature-color: var(--accent-primary) !important;
    --feature-accent: var(--accent-primary) !important;
}

.feature-card.feature-theme-adaptive .feature-icon {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
}

.feature-card.feature-theme-adaptive .feature-subtitle,
.feature-card.feature-theme-adaptive .feature-link {
    color: var(--accent-primary) !important;
}

.feature-card.feature-theme-adaptive::before {
    background: var(--accent-primary) !important;
}

/* Light theme - Blue accent */
.theme-light .feature-card.feature-theme-adaptive {
    --feature-color: #2563eb !important;
    --feature-accent: #2563eb !important;
}

.theme-light .feature-card.feature-theme-adaptive .feature-icon {
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
}

.theme-light .feature-card.feature-theme-adaptive .feature-subtitle,
.theme-light .feature-card.feature-theme-adaptive .feature-link {
    color: #2563eb !important;
}

.theme-light .feature-card.feature-theme-adaptive::before {
    background: #2563eb !important;
}

/* Midnight theme - Purple accent */
.theme-midnight .feature-card.feature-theme-adaptive {
    --feature-color: #a78bfa !important;
    --feature-accent: #a78bfa !important;
}

.theme-midnight .feature-card.feature-theme-adaptive .feature-icon {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important;
}

.theme-midnight .feature-card.feature-theme-adaptive .feature-subtitle,
.theme-midnight .feature-card.feature-theme-adaptive .feature-link {
    color: #a78bfa !important;
}

.theme-midnight .feature-card.feature-theme-adaptive::before {
    background: #a78bfa !important;
}

/* Forest theme - Emerald accent */
.theme-forest .feature-card.feature-theme-adaptive {
    --feature-color: #10b981 !important;
    --feature-accent: #10b981 !important;
}

.theme-forest .feature-card.feature-theme-adaptive .feature-icon {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.theme-forest .feature-card.feature-theme-adaptive .feature-subtitle,
.theme-forest .feature-card.feature-theme-adaptive .feature-link {
    color: #10b981 !important;
}

.theme-forest .feature-card.feature-theme-adaptive::before {
    background: #10b981 !important;
}

/* Uni theme - Green accent */
.theme-uni .feature-card.feature-theme-adaptive {
    --feature-color: #85BC27 !important;
    --feature-accent: #85BC27 !important;
}

.theme-uni .feature-card.feature-theme-adaptive .feature-icon {
    background: linear-gradient(135deg, #85BC27, #6BA31E) !important;
}

.theme-uni .feature-card.feature-theme-adaptive .feature-subtitle,
.theme-uni .feature-card.feature-theme-adaptive .feature-link {
    color: #85BC27 !important;
}

.theme-uni .feature-card.feature-theme-adaptive::before {
    background: #85BC27 !important;
}

/* Hybrid theme - Forest Green accent */
.theme-hybrid .feature-card.feature-theme-adaptive {
    --feature-color: #10b981 !important;
    --feature-accent: #10b981 !important;
}

.theme-hybrid .feature-card.feature-theme-adaptive .feature-icon {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.theme-hybrid .feature-card.feature-theme-adaptive .feature-subtitle,
.theme-hybrid .feature-card.feature-theme-adaptive .feature-link {
    color: #059669 !important;
}

.theme-hybrid .feature-card.feature-theme-adaptive::before {
    background: #10b981 !important;
}

/* ============================================================
   Admin Unified Action Buttons
   ============================================================ */

/* Container */
.admin-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Base button - 44x44px minimum touch target */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1;
}

/* Icon-only variant (square) */
.admin-btn-icon {
    padding: 0;
    width: 44px;
    height: 44px;
}

/* Bigger icons inside buttons + force white by default */
.admin-btn i {
    font-size: 1.25rem;
    color: #fff !important;
}

.admin-btn:hover i {
    color: inherit !important;
}

/* Edit - solid amber default, tinted on hover */
.admin-btn-edit {
    background: #f59e0b;
    color: #fff !important;
    border-color: #f59e0b;
}

.admin-btn-edit i {
    color: #fff !important;
}

.admin-btn-edit:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.3);
    text-decoration: none;
}

.admin-btn-edit:hover i {
    color: #d97706 !important;
}

/* Delete - solid red default, tinted on hover */
.admin-btn-delete {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.admin-btn-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Lock - neutral slate */
.admin-btn-lock {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

.admin-btn-lock:hover {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.3);
}

.admin-btn-lock.locked {
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.3);
}

/* Toggle - neutral default, green when active */
.admin-btn-toggle {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.05));
    color: var(--text-secondary, #6b7280);
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.admin-btn-toggle:hover {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.08));
    border-color: var(--accent-primary, #3b82f6);
    color: var(--accent-primary, #3b82f6);
}

.admin-btn-toggle.active {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}

.admin-btn-toggle.active:hover {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Approve / Unlock - neutral slate */
.admin-btn-approve {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

.admin-btn-approve:hover {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Reject - solid red default, tinted on hover */
.admin-btn-reject {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.admin-btn-reject:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Details - neutral slate */
.admin-btn-details {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

.admin-btn-details:hover {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Password - neutral slate */
.admin-btn-password {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

.admin-btn-password:hover {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Role - neutral slate */
.admin-btn-role {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

.admin-btn-role:hover {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.3);
}

/* Disable - solid red default, tinted on hover */
.admin-btn-disable {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.admin-btn-disable:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

/* Revalidate - neutral accent */
.admin-btn-revalidate {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.05));
    color: var(--text-secondary, #6b7280);
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.admin-btn-revalidate:hover {
    border-color: var(--accent-primary, #3b82f6);
    color: var(--accent-primary, #3b82f6);
}

/* Mobile: 48px targets, larger gap */
@media (max-width: 768px) {
    .admin-btn {
        min-width: 48px;
        min-height: 48px;
    }

    .admin-btn-icon {
        width: 48px;
        height: 48px;
    }

    .admin-actions {
        gap: 1rem;
    }
}

/* ============================================
   UNIFIED HOME & SLIDER STYLES
   Transferred from Home.cshtml to enforce consistency
   ============================================ */

/* Video Section & Index Hero */
.video-container,
.hero-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Unifying width and height constraints */
    aspect-ratio: 16 / 9;
    max-height: 500px;
    border-radius: var(--radius-xl);
    margin-top: var(--content-padding, 24px);
    margin-bottom: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
}

.video-container video,
.video-container img,
.hero-section .hero-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure Carousel fills the container */
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .hero-slide {
    height: 100%;
}

/* Portal Sections */
.portal-section {
    margin-bottom: 3rem;
}

.portal-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Intro Section */
.intro-item {
    text-align: center;
    padding: 2rem 0;
}

.intro-item h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.intro-item p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

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

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-normal);
    position: relative;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--stat-accent, var(--accent-primary));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    color: var(--stat-accent, var(--accent-primary));
    margin: 0 auto 0.75rem;
}

.stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card .stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

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

.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-normal);
    position: relative;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--feature-accent, var(--accent-primary));
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-card .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--feature-accent, var(--accent-primary)), var(--accent-secondary));
    color: white;
    margin-bottom: 0.75rem;
}

.feature-card .feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.feature-card .feature-subtitle {
    font-size: 0.8rem;
    color: var(--feature-accent, var(--accent-primary));
    margin-bottom: 0.5rem;
}

.feature-card .feature-content-wrapper {
    position: relative;
    max-height: 6rem;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-bottom: 0.5rem;
}

.feature-card .feature-content-wrapper.expanded {
    max-height: 1000px;
}

.feature-card .feature-content-wrapper:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
}

.feature-card .feature-content-wrapper.no-toggle {
    max-height: none;
}

.feature-card .feature-content-wrapper.no-toggle::after {
    display: none;
}

.feature-card .feature-content {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.feature-card .feature-content p:last-child,
.feature-card .feature-content ul:last-child,
.feature-card .feature-content ol:last-child {
    margin-bottom: 0;
}

.feature-toggle-btn {
    display: none;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--feature-accent, var(--accent-primary));
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 0.75rem;
}

.feature-toggle-btn.visible {
    display: flex;
}

.feature-toggle-btn:hover {
    opacity: 0.75;
}

.feature-toggle-btn i {
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.feature-toggle-btn.expanded i {
    transform: rotate(180deg);
}

.feature-card .feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--feature-accent, var(--accent-primary));
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.feature-card .feature-link:hover {
    gap: 0.75rem;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--cta-accent, var(--accent-primary)), var(--accent-secondary));
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.cta-section .cta-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.cta-section h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.cta-section p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    position: relative;
}

.cta-section .btn-cta {
    background: white;
    color: var(--cta-accent, var(--accent-primary));
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-fast);
    position: relative;
}

.cta-section .btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Portal Highlights Section Header */
.portal-highlights-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.portal-highlights-header .portal-section-title {
    margin-bottom: 0.25rem;
}

.portal-highlights-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    animation: hl-icon-pulse 3s ease-in-out infinite;
}

@keyframes hl-icon-pulse {

    0%,
    100% {
        box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    }

    50% {
        box-shadow: 0 8px 32px color-mix(in srgb, var(--accent-primary) 50%, transparent);
    }
}

.portal-highlights-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Highlights Slider */
.highlights-slider-wrapper {
    position: relative;
    padding: 0 2.5rem;
}

.highlights-grid {
    display: flex;
    gap: 1.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0.5rem 0 1rem;
}

.highlights-grid::-webkit-scrollbar {
    display: none;
}

.highlights-grid>.highlight-card {
    flex: 0 0 calc(33.333% - 1.17rem);
    scroll-snap-align: start;
    min-width: 280px;
}

.highlights-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 2;
    transition: all 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.highlights-slider-btn:hover {
    background: var(--bg-card-hover, var(--bg-tertiary));
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.highlights-slider-btn:disabled {
    opacity: 0;
    visibility: hidden;
    cursor: default;
    pointer-events: none;
}

.highlights-slider-btn.prev {
    left: 0;
}

.highlights-slider-btn.next {
    right: 0;
}

/* ── Highlight Card ── */
.highlight-card {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Gradient border reveal on hover */
.highlight-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: var(--accent-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 3;
}

.highlight-card:hover {
    border-color: transparent;
}

.highlight-card:hover::after {
    opacity: 1;
}

/* ── Card Image ── */
.highlight-card-img-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.highlight-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}

.highlight-card:hover .highlight-card-img-wrap img {
    transform: scale(1.1);
    filter: brightness(1.05);
}

/* Subtle vignette for depth */
.highlight-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.15) 0%,
            transparent 40%);
    transition: opacity 0.4s ease;
    z-index: 1;
}

.highlight-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
}

.highlight-card-placeholder i {
    font-size: 3rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Featured badge - solid accent pill */
.highlight-card-featured {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 20px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 50%, transparent);
    z-index: 2;
}

.highlight-card-featured i {
    color: #fbbf24;
    font-size: 0.6rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ── Card Body ── */
.highlight-card-body {
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Tags - accent-tinted pills in card body */
.highlight-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.highlight-card-tag {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    transition: all 0.3s ease;
}

.highlight-card:hover .highlight-card-tag {
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.highlight-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.highlight-card:hover .highlight-card-title {
    color: var(--accent-primary);
}

.highlight-card-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* CTA button */
.highlight-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.highlight-card-footer i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.highlight-card:hover .highlight-card-footer {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

.highlight-card:hover .highlight-card-footer i {
    transform: translateX(5px);
}

.highlight-card-footer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.highlight-card-footer-row .highlight-card-footer {
    flex: 1;
    margin-top: 0;
}

.highlight-card-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border: 1px solid transparent;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
    z-index: 2;
}

.highlight-card-visit:hover {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
}

.highlight-card:hover .highlight-card-visit {
    border-color: var(--accent-primary);
}

@media (max-width: 992px) {
    .highlights-grid>.highlight-card {
        flex: 0 0 calc(50% - 0.875rem);
    }
}

@media (max-width: 768px) {
    .highlight-card-img-wrap {
        height: 170px;
    }

    .highlights-slider-wrapper {
        padding: 0 2rem;
    }

    .highlights-grid {
        gap: 1.25rem;
    }

    .highlights-grid>.highlight-card {
        flex: 0 0 85%;
    }

    .highlights-slider-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .video-container {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-card .stat-value {
        font-size: 1.75rem;
    }

    .cta-section {
        padding: 2rem 1.5rem;
    }
}

/* ========================
   HIGHLIGHT CARD OVERRIDES
   (must be last to win cascade)
========================= */
.highlight-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.highlight-card:hover .highlight-card-action,
.highlight-card:hover .highlight-card-footer {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

.highlight-card:hover .highlight-card-action *,
.highlight-card:hover .highlight-card-footer * {
    color: #ffffff !important;
}