/* /Layout/AuthLayout.razor.rz.scp.css */
.auth-layout[b-i4nhxfu3hj] {
    height: 100vh;
    width: 100%;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ===== App Layout Structure ===== */
.app-layout[b-8pmb08ebdd] {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-main-bg);
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===== Sidebar ===== */
.sidebar[b-8pmb08ebdd] {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: #2B0748;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width var(--transition-slow), transform var(--transition-slow);
}

.sidebar-header[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    min-height: auto;
    position: relative;
    box-sizing: border-box;
}

.logo-link[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.logo[b-8pmb08ebdd] {
    width: 100px;
    height: auto;
    object-fit: contain;
}


/* ===== Sidebar Navigation ===== */
.sidebar-nav[b-8pmb08ebdd] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
}

.nav-list[b-8pmb08ebdd] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item[b-8pmb08ebdd] {
    margin-bottom: 2px;
}

.nav-divider[b-8pmb08ebdd] {
    list-style: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 8px 16px;
}

a.nav-link[b-8pmb08ebdd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    background-color: transparent;
}

a.nav-link:link[b-8pmb08ebdd],
a.nav-link:visited[b-8pmb08ebdd] {
    color: #FFFFFF;
    text-decoration: none;
}

a.nav-link:hover[b-8pmb08ebdd] {
    background-color: #5D2A8C;
    color: #FFFFFF;
    text-decoration: none;
}

a.nav-link:active[b-8pmb08ebdd],
a.nav-link:focus[b-8pmb08ebdd] {
    color: #FFFFFF;
    text-decoration: none;
    outline: none;
}

a.nav-link.active[b-8pmb08ebdd] {
    background-color: #7B3FA8;
    color: #FFFFFF;
    font-weight: 500;
}

.nav-icon[b-8pmb08ebdd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
}

.nav-icon img[b-8pmb08ebdd],
.nav-icon svg[b-8pmb08ebdd] {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.nav-text[b-8pmb08ebdd] {
    display: inline;
    color: inherit;
    line-height: 20px;
}

/* ===== Sidebar Footer ===== */
.sidebar-footer[b-8pmb08ebdd] {
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.sidebar-footer a.nav-link[b-8pmb08ebdd] {
    padding: 9px 14px;
}


/* ===== Main Wrapper ===== */
.main-wrapper[b-8pmb08ebdd] {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition-slow);
    overflow-x: hidden;
    max-width: calc(100vw - var(--sidebar-width));
}

/* ===== App Header ===== */
.app-header[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
    background-color: var(--color-main-bg);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ===== Header Search ===== */
.header-search[b-8pmb08ebdd] {
    flex: 1;
    position: relative;
}

.search-input-wrapper[b-8pmb08ebdd] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-btn[b-8pmb08ebdd] {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #6C2DA8;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color var(--transition-normal);
}

.search-btn:hover[b-8pmb08ebdd] {
    background-color: rgba(108, 45, 168, 0.1);
}

.search-input[b-8pmb08ebdd] {
    width: 100%;
    height: 44px;
    padding: 0 50px 0 var(--spacing-md);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.4px;
    color: #4B3C57;
    background: #EADCF5 0% 0% no-repeat padding-box;
    border: 1px solid #B987F9;
    border-radius: 6px;
    outline: none;
    transition: all var(--transition-normal);
}

.search-input[b-8pmb08ebdd]::placeholder {
    color: #4B3C57;
    opacity: 0.6;
}

.search-input:focus[b-8pmb08ebdd] {
    background-color: var(--color-white);
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(185, 135, 249, 0.3);
}

/* ===== Search Results Dropdown ===== */
.search-results-dropdown[b-8pmb08ebdd] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(29, 15, 41, 0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.search-results-loading[b-8pmb08ebdd],
.search-results-empty[b-8pmb08ebdd] {
    padding: 16px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #8B7A96;
    text-align: center;
}

.search-group[b-8pmb08ebdd] {
    border-bottom: 1px solid #F3EEFA;
}

.search-group:last-child[b-8pmb08ebdd] {
    border-bottom: none;
}

.search-group-header[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #8B7A96;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-group-icon[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #F3EEFA;
    color: #6C2DA8;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}

.search-result-item[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 44px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.search-result-item:hover[b-8pmb08ebdd] {
    background-color: #F6F1FA;
}

.search-result-info[b-8pmb08ebdd] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.search-result-title[b-8pmb08ebdd] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle[b-8pmb08ebdd] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #8B7A96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-arrow[b-8pmb08ebdd] {
    flex-shrink: 0;
    stroke: #B987F9;
}

.search-result-item:hover .search-result-arrow[b-8pmb08ebdd] {
    stroke: #6C2DA8;
}

.search-spinner[b-8pmb08ebdd] {
    width: 18px;
    height: 18px;
    border: 2px solid #EDE6F5;
    border-top-color: #6C2DA8;
    border-radius: 50%;
    animation: search-spin-b-8pmb08ebdd 0.6s linear infinite;
}

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

/* ===== Header Actions ===== */
.header-actions[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-left: auto;
}

/* ===== Language Selector ===== */
.language-selector[b-8pmb08ebdd] {
    position: relative;
}

.language-btn[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.language-btn:hover[b-8pmb08ebdd] {
    opacity: 0.8;
}

.language-btn .flag-icon[b-8pmb08ebdd] {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--color-lavender);
}

.language-btn .dropdown-arrow[b-8pmb08ebdd] {
    color: #6C2DA8;
}

.flag-icon[b-8pmb08ebdd] {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}

.dropdown-flag[b-8pmb08ebdd] {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}

.language-dropdown[b-8pmb08ebdd] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    background-color: var(--color-white);
    border: 2px solid #6C2DA8;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
    z-index: 200;
}

.language-dropdown li button[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: #6C2DA8;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.language-dropdown li button:hover[b-8pmb08ebdd] {
    background-color: rgba(108, 45, 168, 0.1);
}

/* ===== Header Icon Buttons ===== */
.header-icon-btn[b-8pmb08ebdd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-round);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.header-icon-btn:hover[b-8pmb08ebdd] {
    background-color: var(--color-lavender-light);
    color: var(--color-purple-accent);
}

.notification-badge[b-8pmb08ebdd] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #CF59F9;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
}

/* ===== User Profile ===== */
.user-profile[b-8pmb08ebdd] {
    position: relative;
}

.user-profile-btn[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.user-profile-btn:hover[b-8pmb08ebdd] {
    background-color: var(--color-lavender-light);
}

.user-info[b-8pmb08ebdd] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.user-name[b-8pmb08ebdd] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.user-role[b-8pmb08ebdd] {
    font-family: var(--font-primary);
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.user-avatar[b-8pmb08ebdd] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    background-color: var(--color-purple-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img[b-8pmb08ebdd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-8pmb08ebdd] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
}

/* ===== User Dropdown ===== */
.user-dropdown[b-8pmb08ebdd] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background-color: var(--color-white);
    border: 1px solid var(--color-lavender);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
    z-index: 200;
}

.user-dropdown li a[b-8pmb08ebdd],
.user-dropdown li button[b-8pmb08ebdd] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 14px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.user-dropdown li a:hover[b-8pmb08ebdd],
.user-dropdown li button:hover[b-8pmb08ebdd] {
    background-color: var(--color-lavender-light);
}

.user-dropdown .logout-btn[b-8pmb08ebdd] {
    color: var(--color-pink);
}

.user-dropdown .logout-btn:hover[b-8pmb08ebdd] {
    background-color: rgba(255, 84, 112, 0.1);
}

.dropdown-divider[b-8pmb08ebdd] {
    height: 1px;
    background-color: var(--color-lavender);
    margin: var(--spacing-sm) 0;
}

/* ===== Main Content ===== */
.main-content[b-8pmb08ebdd] {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
}

/* ===== Mobile Menu Button ===== */
.mobile-menu-btn[b-8pmb08ebdd] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.mobile-menu-btn:hover[b-8pmb08ebdd] {
    background-color: var(--color-lavender-light);
}

/* ===== Mobile Overlay ===== */
.mobile-overlay[b-8pmb08ebdd] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 90;
}

/* ===== Utility Classes ===== */
.desktop-only[b-8pmb08ebdd] {
    display: block;
}

.mobile-only[b-8pmb08ebdd] {
    display: none;
}

.sr-only[b-8pmb08ebdd] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Responsive Styles ===== */

/* Tablet/Medium screens (765px - 1075px) - Icons only */
@media screen and (min-width: 765px) and (max-width: 1075px) {
    .sidebar[b-8pmb08ebdd] {
        width: 80px;
    }

    .sidebar-header[b-8pmb08ebdd] {
        padding: 15px;
        min-height: 100px;
    }

    .logo[b-8pmb08ebdd] {
        width: 50px;
        height: auto;
    }

    .sidebar-nav[b-8pmb08ebdd] {
        padding: 10px;
    }

    .nav-text[b-8pmb08ebdd] {
        display: none;
    }

    .nav-link[b-8pmb08ebdd] {
        justify-content: center;
        padding: 14px;
        border-radius: 10px;
    }

    .nav-icon[b-8pmb08ebdd] {
        margin: 0;
    }

    .main-wrapper[b-8pmb08ebdd] {
        margin-left: 80px;
        max-width: calc(100vw - 80px);
    }

    .user-info[b-8pmb08ebdd] {
        display: none;
    }

    .sidebar-footer[b-8pmb08ebdd] {
        padding: 10px;
    }
}

/* Mobile (< 768px) */
@media screen and (max-width: 767px) {
    .sidebar[b-8pmb08ebdd] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .logo[b-8pmb08ebdd] {
        width: 80px;
        height: 80px;
    }

    .nav-text[b-8pmb08ebdd] {
        opacity: 1;
        width: auto;
    }

    .nav-link[b-8pmb08ebdd] {
        justify-content: flex-start;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .main-wrapper[b-8pmb08ebdd] {
        margin-left: 0;
        max-width: 100vw;
    }

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

    .mobile-menu-open .mobile-overlay[b-8pmb08ebdd] {
        display: block;
    }

    .mobile-menu-btn[b-8pmb08ebdd] {
        display: flex;
    }

    .desktop-only[b-8pmb08ebdd] {
        display: none;
    }

    .mobile-only[b-8pmb08ebdd] {
        display: flex;
    }

    .app-header[b-8pmb08ebdd] {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .header-search[b-8pmb08ebdd] {
        flex: 1;
        max-width: none;
    }

    .search-input[b-8pmb08ebdd] {
        height: 40px;
    }

    .language-selector[b-8pmb08ebdd] {
        display: none;
    }

    .main-content[b-8pmb08ebdd] {
        padding: var(--spacing-md);
    }

    .user-info[b-8pmb08ebdd] {
        display: none;
    }

}

/* Small Mobile (< 480px) */
@media screen and (max-width: 479px) {
    .header-search[b-8pmb08ebdd] {
        display: none;
    }

    .app-header[b-8pmb08ebdd] {
        justify-content: space-between;
    }

    .header-actions[b-8pmb08ebdd] {
        gap: var(--spacing-sm);
    }

    .header-icon-btn[b-8pmb08ebdd] {
        width: 40px;
        height: 40px;
    }

    .user-avatar[b-8pmb08ebdd] {
        width: 36px;
        height: 36px;
    }
}
/* /Pages/AdminUsers.razor.rz.scp.css */
/* ===== Admin Users Page (mirrors StaffUsers styling) ===== */
.admin-users-page[b-xbwz4sg2ie] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

.page-header[b-xbwz4sg2ie] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-xbwz4sg2ie] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-xbwz4sg2ie] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-xbwz4sg2ie] { background-color: #5D2A8C; }
.btn-add svg[b-xbwz4sg2ie] { stroke: #FFFFFF; }

.success-banner[b-xbwz4sg2ie], .error-banner[b-xbwz4sg2ie] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.success-banner[b-xbwz4sg2ie] { background-color: #F0FDF4; border: 1px solid #86EFAC; color: #166534; }
.error-banner[b-xbwz4sg2ie] { background-color: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

.success-banner button[b-xbwz4sg2ie], .error-banner button[b-xbwz4sg2ie] {
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.success-banner button[b-xbwz4sg2ie] { color: #166534; }
.error-banner button[b-xbwz4sg2ie] { color: #991B1B; }

.filters-bar[b-xbwz4sg2ie] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-xbwz4sg2ie] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-xbwz4sg2ie] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-xbwz4sg2ie] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-xbwz4sg2ie] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-xbwz4sg2ie]::placeholder { color: #B987F9; }

.clear-search[b-xbwz4sg2ie] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #B987F9;
    display: flex;
    align-items: center;
    padding: 4px;
}

.clear-search:hover[b-xbwz4sg2ie] { color: #6C2DA8; }

.show-inactive[b-xbwz4sg2ie] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    cursor: pointer;
}

.show-inactive input[type="checkbox"][b-xbwz4sg2ie] {
    width: 16px;
    height: 16px;
    accent-color: #6C2DA8;
    cursor: pointer;
}

.loading-indicator[b-xbwz4sg2ie] {
    text-align: center;
    padding: 40px;
    color: #B987F9;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

.table-card[b-xbwz4sg2ie] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

.data-table[b-xbwz4sg2ie] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.data-table thead tr[b-xbwz4sg2ie] { border-bottom: 2px solid #EDE6F5; }

.data-table th[b-xbwz4sg2ie] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr[b-xbwz4sg2ie] { border-bottom: 1px solid #EDE6F5; }
.data-table tbody tr:last-child[b-xbwz4sg2ie] { border-bottom: none; }
.data-table tbody tr:hover[b-xbwz4sg2ie] { background-color: #F6F1FA; }
.data-table tbody tr.row-inactive[b-xbwz4sg2ie] { opacity: 0.6; }

.data-table td[b-xbwz4sg2ie] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

.col-name[b-xbwz4sg2ie] { width: 22%; font-weight: 600; color: #1D0F29; }
.col-email[b-xbwz4sg2ie] { width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-status[b-xbwz4sg2ie] { width: 12%; }
.col-date[b-xbwz4sg2ie] { width: 16%; }
.col-actions[b-xbwz4sg2ie] { width: 12%; text-align: left; }

.name-cell[b-xbwz4sg2ie] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-initials[b-xbwz4sg2ie] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.user-name-text[b-xbwz4sg2ie] { font-weight: 600; color: #1D0F29; }

.email-link[b-xbwz4sg2ie] { color: #6C2DA8; text-decoration: none; }
.email-link:hover[b-xbwz4sg2ie] { text-decoration: underline; }

.status-badge[b-xbwz4sg2ie] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-active[b-xbwz4sg2ie] {
    background-color: #DCFCE7;
    color: #166534;
}

.status-inactive[b-xbwz4sg2ie] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.actions-wrapper[b-xbwz4sg2ie] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
}

.action-btn[b-xbwz4sg2ie] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
    color: #4B3C57;
}

.action-btn:hover[b-xbwz4sg2ie] { background-color: #F6F1FA; }
.action-btn img[b-xbwz4sg2ie] { width: 16px; height: 16px; }
.action-reactivate[b-xbwz4sg2ie] { color: #166534; }

.action-self[b-xbwz4sg2ie] {
    color: #B987F9;
    cursor: default;
}

.action-self:hover[b-xbwz4sg2ie] { background-color: transparent; }

.empty-row td[b-xbwz4sg2ie] {
    text-align: center;
    padding: 40px;
    color: #B987F9;
    font-style: italic;
}

.panel-overlay[b-xbwz4sg2ie] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-xbwz4sg2ie 0.2s ease;
}

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

.side-panel[b-xbwz4sg2ie] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-xbwz4sg2ie] { right: 0; }

.panel-header[b-xbwz4sg2ie] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-xbwz4sg2ie] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-xbwz4sg2ie] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-xbwz4sg2ie] { background-color: #F6F1FA; }

.panel-content[b-xbwz4sg2ie] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-xbwz4sg2ie] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.form-group[b-xbwz4sg2ie] { margin-bottom: 20px; }

.form-label[b-xbwz4sg2ie] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-input[b-xbwz4sg2ie] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-xbwz4sg2ie] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-xbwz4sg2ie]::placeholder { color: #B987F9; }
.form-input.input-error[b-xbwz4sg2ie] { border-color: #DC2626; background-color: #FEF2F2; }
.form-input:disabled[b-xbwz4sg2ie] { opacity: 0.6; cursor: not-allowed; }

.error-message[b-xbwz4sg2ie] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

.form-footer[b-xbwz4sg2ie] { display: flex; gap: 12px; }

.btn-cancel[b-xbwz4sg2ie] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-xbwz4sg2ie] { background-color: #F6F1FA; border-color: #B987F9; }

.btn-save[b-xbwz4sg2ie] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-xbwz4sg2ie] { background-color: #5D2A8C; }

.modal-overlay[b-xbwz4sg2ie] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-xbwz4sg2ie 0.2s ease;
}

.modal-dialog[b-xbwz4sg2ie] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-xbwz4sg2ie 0.2s ease;
}

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

.modal-header[b-xbwz4sg2ie] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-xbwz4sg2ie] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-xbwz4sg2ie] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-xbwz4sg2ie] { background-color: #F6F1FA; }

.modal-body[b-xbwz4sg2ie] { padding: 24px; }

.modal-body p[b-xbwz4sg2ie] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-xbwz4sg2ie] { margin-bottom: 0; }

.warning-text[b-xbwz4sg2ie] { color: #DC2626 !important; font-weight: 500; }

.modal-footer[b-xbwz4sg2ie] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-xbwz4sg2ie] { flex: 1; }

.btn-delete[b-xbwz4sg2ie] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-xbwz4sg2ie] { background-color: #B91C1C; }

@media screen and (max-width: 768px) {
    .page-header[b-xbwz4sg2ie] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-xbwz4sg2ie] { width: 100%; justify-content: center; }
    .col-date[b-xbwz4sg2ie] { display: none; }
}

@media screen and (max-width: 500px) {
    .side-panel[b-xbwz4sg2ie] { width: 100%; right: -100%; }
}
/* /Pages/Attendance.razor.rz.scp.css */
/* ===== Attendance Page ===== */
.attendance-page[b-up2opxsl99] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-up2opxsl99] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-up2opxsl99] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-right[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-link[b-up2opxsl99] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-up2opxsl99] {
    color: #5D2A8C;
}

.page-title[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.page-subtitle[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

.btn-refresh[b-up2opxsl99] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover:not(:disabled)[b-up2opxsl99] {
    background-color: #EDE6F5;
    border-color: #B987F9;
}

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

.spinning[b-up2opxsl99] {
    animation: spin-b-up2opxsl99 1s linear infinite;
}

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

.btn-import[b-up2opxsl99] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-import:hover[b-up2opxsl99] {
    background-color: #5D2A8C;
}

/* ===== Stats Cards ===== */
.stats-row[b-up2opxsl99] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stat-card[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--color-white);
    border-radius: 12px;
    border: 1px solid #EDE6F5;
    transition: box-shadow 0.2s ease;
}

.stat-card:hover[b-up2opxsl99] {
    box-shadow: 0 2px 8px rgba(108, 45, 168, 0.08);
}

.stat-icon[b-up2opxsl99] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-checkedin .stat-icon[b-up2opxsl99] {
    background-color: #DEF7EC;
    color: #03543F;
}

.stat-present .stat-icon[b-up2opxsl99] {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.stat-flagged .stat-icon[b-up2opxsl99] {
    background-color: #FEF3C7;
    color: #92400E;
}

.stat-info[b-up2opxsl99] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1D0F29;
    line-height: 1;
}

.stat-label[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ===== Filters Bar ===== */
.filters-bar[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-up2opxsl99] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-up2opxsl99] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-up2opxsl99] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-up2opxsl99] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-up2opxsl99]::placeholder {
    color: #B987F9;
}

.clear-search[b-up2opxsl99] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search:hover[b-up2opxsl99] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

/* ===== Filter Chips ===== */
.filter-chips[b-up2opxsl99] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.filter-chip[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #F6F1FA;
    border: 2px solid transparent;
    border-radius: 24px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-up2opxsl99] {
    background-color: #EDE6F5;
}

.filter-chip.active[b-up2opxsl99] {
    background-color: #6C2DA8;
    border-color: #6C2DA8;
}

.filter-chip.active .chip-label[b-up2opxsl99] {
    color: #FFFFFF;
}

.filter-chip.source-qr.active[b-up2opxsl99] {
    background-color: #03543F;
    border-color: #03543F;
}

.filter-chip.source-zoom.active[b-up2opxsl99] {
    background-color: #1E40AF;
    border-color: #1E40AF;
}

.chip-label[b-up2opxsl99] {
    font-size: 14px;
    font-weight: 500;
    color: #4B3C57;
}

.chip-count[b-up2opxsl99] {
    font-size: 12px;
    font-weight: 700;
    color: #6C2DA8;
    background-color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.filter-chip.source-qr .chip-count[b-up2opxsl99] {
    color: #03543F;
}

.filter-chip.source-zoom .chip-count[b-up2opxsl99] {
    color: #1E40AF;
}

/* ===== Table Card ===== */
.table-card[b-up2opxsl99] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 0;
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Attendance Table ===== */
.attendance-table[b-up2opxsl99] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.attendance-table thead tr[b-up2opxsl99] {
    background-color: #F6F1FA;
}

.attendance-table th[b-up2opxsl99] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.attendance-table th.sortable[b-up2opxsl99] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.attendance-table th.sortable:hover[b-up2opxsl99] {
    background-color: #EDE6F5;
}

.attendance-table th.sortable span[b-up2opxsl99] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-icon[b-up2opxsl99] {
    transition: transform 0.2s ease;
}

.sort-icon.desc[b-up2opxsl99] {
    transform: rotate(180deg);
}

.attendance-table tbody tr[b-up2opxsl99] {
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.2s ease;
}

.attendance-table tbody tr:last-child[b-up2opxsl99] {
    border-bottom: none;
}

.attendance-table tbody tr:hover[b-up2opxsl99] {
    background-color: #F6F1FA;
}

.attendance-table td[b-up2opxsl99] {
    padding: 14px 16px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Flagged Row ===== */
.flagged-row[b-up2opxsl99] {
    background-color: #FFFBEB !important;
}

.flagged-row:hover[b-up2opxsl99] {
    background-color: #FEF3C7 !important;
}

/* ===== Column Styles ===== */
.col-name[b-up2opxsl99] {
    width: 22%;
}

.name-cell[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.name-info[b-up2opxsl99] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attendee-initials[b-up2opxsl99] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #EF8121;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.attendee-name[b-up2opxsl99] {
    font-weight: 600;
    color: #1D0F29;
}

.flag-tag[b-up2opxsl99] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #FEF3C7;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.col-email[b-up2opxsl99] {
    width: 22%;
}

.email-link[b-up2opxsl99] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-up2opxsl99] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-checkin[b-up2opxsl99] {
    width: 16%;
}

.col-checkout[b-up2opxsl99] {
    width: 16%;
}

.col-duration[b-up2opxsl99] {
    width: 10%;
    font-weight: 600;
}

.col-source[b-up2opxsl99] {
    width: 10%;
}

.empty-dash[b-up2opxsl99] {
    color: #B987F9;
}

/* ===== Source Badge ===== */
.source-badge[b-up2opxsl99] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.source-badge.source-qr[b-up2opxsl99] {
    background-color: #DEF7EC;
    color: #03543F;
}

.source-badge.source-zoom[b-up2opxsl99] {
    background-color: #DBEAFE;
    color: #1E40AF;
}

/* ===== Loading / Error States ===== */
.loading-state[b-up2opxsl99],
.error-state[b-up2opxsl99] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #4B3C57;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

.error-state[b-up2opxsl99] {
    color: #991B1B;
    background-color: #FEF2F2;
}

/* ===== Empty State ===== */
.empty-state[b-up2opxsl99] {
    text-align: center;
    padding: 60px 20px !important;
    color: #4B3C57;
}

.empty-state svg[b-up2opxsl99] {
    margin-bottom: 16px;
}

.empty-state p[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
}

.btn-clear-filters[b-up2opxsl99] {
    padding: 10px 20px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-clear-filters:hover[b-up2opxsl99] {
    background-color: #EDE6F5;
}

/* ===== Pagination ===== */
.pagination[b-up2opxsl99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.pagination-controls[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn[b-up2opxsl99] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: transparent;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-up2opxsl99] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.page-btn.active[b-up2opxsl99] {
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-color: #6C2DA8;
}

.page-btn:disabled[b-up2opxsl99] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-ellipsis[b-up2opxsl99] {
    padding: 0 8px;
    color: #4B3C57;
}

.page-size-selector[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size-selector label[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.page-size-selector select[b-up2opxsl99] {
    padding: 8px 28px 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ===== Side Panel ===== */
.panel-overlay[b-up2opxsl99] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-up2opxsl99 0.2s ease;
}

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

.side-panel[b-up2opxsl99] {
    position: fixed;
    top: 0;
    right: -520px;
    width: 520px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-up2opxsl99] {
    right: 0;
}

.panel-header[b-up2opxsl99] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-up2opxsl99] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-up2opxsl99] {
    background-color: #F6F1FA;
}

.panel-content[b-up2opxsl99] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-up2opxsl99] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

/* ===== Upload Section ===== */
.upload-description[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.file-upload-area[b-up2opxsl99] {
    position: relative;
    margin-bottom: 20px;
}

.file-input[b-up2opxsl99] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.upload-placeholder[b-up2opxsl99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 20px;
    background-color: #F6F1FA;
    border: 2px dashed #B987F9;
    border-radius: 12px;
    color: #6C2DA8;
    transition: all 0.2s ease;
}

.file-upload-area:hover .upload-placeholder[b-up2opxsl99] {
    background-color: #EDE6F5;
    border-color: #6C2DA8;
}

.upload-text[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #4B3C57;
    text-align: center;
}

.parse-error[b-up2opxsl99] {
    padding: 12px 16px;
    background-color: #FEF2F2;
    color: #991B1B;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #FECACA;
    margin-bottom: 20px;
}

/* ===== Preview Section ===== */
.preview-section[b-up2opxsl99] {
    margin-top: 20px;
}

.preview-title[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
}

.preview-table-wrapper[b-up2opxsl99] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
}

.preview-table[b-up2opxsl99] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

.preview-table thead[b-up2opxsl99] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.preview-table th[b-up2opxsl99] {
    padding: 10px 12px;
    background-color: #F6F1FA;
    color: #4B3C57;
    font-weight: 700;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.preview-table td[b-up2opxsl99] {
    padding: 8px 12px;
    color: #4B3C57;
    border-bottom: 1px solid #F6F1FA;
}

.preview-table tbody tr:hover[b-up2opxsl99] {
    background-color: #F6F1FA;
}

.preview-truncated[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #92400E;
    text-align: center;
    margin: 8px 0 0 0;
    font-style: italic;
}

/* ===== Import Results ===== */
.import-results[b-up2opxsl99] {
    text-align: center;
}

.import-results-title[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #03543F;
    margin: 0 0 24px 0;
}

.import-stats[b-up2opxsl99] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.import-stat[b-up2opxsl99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border-radius: 10px;
}

.import-stat.success[b-up2opxsl99] {
    background-color: #DEF7EC;
}

.import-stat.neutral[b-up2opxsl99] {
    background-color: #F6F1FA;
}

.import-stat.warning[b-up2opxsl99] {
    background-color: #FEF3C7;
}

.import-stat-value[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1D0F29;
}

.import-stat-label[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.unmatched-section[b-up2opxsl99] {
    text-align: left;
    background-color: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.unmatched-title[b-up2opxsl99] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #92400E;
    margin: 0 0 12px 0;
}

.unmatched-list[b-up2opxsl99] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unmatched-list li[b-up2opxsl99] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #92400E;
    padding: 6px 0;
    border-bottom: 1px solid #FDE68A;
}

.unmatched-list li:last-child[b-up2opxsl99] {
    border-bottom: none;
}

.btn-import-another[b-up2opxsl99] {
    padding: 12px 24px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-import-another:hover[b-up2opxsl99] {
    background-color: #EDE6F5;
    border-color: #B987F9;
}

.btn-do-import[b-up2opxsl99] {
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-do-import:hover:not(:disabled)[b-up2opxsl99] {
    background-color: #5D2A8C;
}

.btn-do-import:disabled[b-up2opxsl99] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1200px) {
    .col-checkout[b-up2opxsl99] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .stats-row[b-up2opxsl99] {
        grid-template-columns: 1fr;
    }

    .col-duration[b-up2opxsl99] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-up2opxsl99] {
        flex-direction: column;
    }

    .header-right[b-up2opxsl99] {
        flex-wrap: wrap;
    }

    .filters-bar[b-up2opxsl99] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-up2opxsl99] {
        max-width: 100%;
    }

    .pagination[b-up2opxsl99] {
        flex-direction: column;
        align-items: center;
    }

    .col-checkin[b-up2opxsl99] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-up2opxsl99] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/Auth/Login.razor.rz.scp.css */
/* ===== Login Container ===== */
.login-container[b-ethlqx2rp0] {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* ===== Left Side - Image ===== */
.login-image[b-ethlqx2rp0] {
    flex: 1;
    overflow: hidden;
}

.login-image img[b-ethlqx2rp0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Right Side - Form Container ===== */
.login-form-container[b-ethlqx2rp0] {
    flex: 0 0 45%;
    background-color: var(--color-lavender-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-form-wrapper[b-ethlqx2rp0] {
    width: 100%;
    max-width: 380px;
}

/* ===== Logo ===== */
.login-logo[b-ethlqx2rp0] {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo img[b-ethlqx2rp0] {
    width: 120px;
    height: auto;
}

/* ===== Title & Subtitle ===== */
.login-title[b-ethlqx2rp0] {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 600;
    color: var(--color-purple);
    text-align: center;
    margin-bottom: 30px;
}

.login-subtitle[b-ethlqx2rp0] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark-purple);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.5;
}

/* ===== Form ===== */
.login-form[b-ethlqx2rp0] {
    width: 100%;
}

/* ===== Form Group ===== */
.form-group[b-ethlqx2rp0] {
    margin-bottom: 20px;
}

.form-group label[b-ethlqx2rp0] {
    display: block;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-darker-purple);
    margin-bottom: 8px;
}

/* ===== Form Input - Use ::deep for Blazor InputText component ===== */
[b-ethlqx2rp0] .form-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark-purple);
    background-color: var(--color-white);
    border: 1px solid var(--color-lavender);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

[b-ethlqx2rp0] .form-input::placeholder {
    color: var(--color-dark-purple);
    opacity: 0.6;
}

[b-ethlqx2rp0] .form-input:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 3px var(--color-purple-light-transparent);
}

/* ===== Password Input Wrapper ===== */
.password-input-wrapper[b-ethlqx2rp0] {
    position: relative;
    width: 100%;
}

.password-input-wrapper[b-ethlqx2rp0]  .form-input {
    padding-right: 48px;
}

.password-toggle[b-ethlqx2rp0] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.password-toggle:hover[b-ethlqx2rp0] {
    opacity: 0.7;
}

/* ===== Error Message ===== */
.error-message[b-ethlqx2rp0] {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ===== Login Button ===== */
.btn-login[b-ethlqx2rp0] {
    width: 100%;
    height: 44px;
    background-color: var(--color-purple);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 12px;
}

.btn-login:hover:not(:disabled)[b-ethlqx2rp0] {
    background-color: var(--color-darker-purple);
}

.btn-login:active:not(:disabled)[b-ethlqx2rp0] {
    transform: scale(0.98);
}

.btn-login:disabled[b-ethlqx2rp0] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ===== Reset Password Link ===== */
.reset-link[b-ethlqx2rp0] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark-purple);
    text-align: center;
    margin-top: 24px;
}

.reset-link a[b-ethlqx2rp0] {
    color: var(--color-purple);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.reset-link a:hover[b-ethlqx2rp0] {
    color: var(--color-darker-purple);
}

/* ===== Validation Messages ===== */
[b-ethlqx2rp0] .validation-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .login-form-container[b-ethlqx2rp0] {
        flex: 0 0 50%;
    }
}

@media (max-width: 768px) {
    .login-container[b-ethlqx2rp0] {
        flex-direction: column;
    }

    .login-image[b-ethlqx2rp0] {
        height: 30vh;
        flex: none;
    }

    .login-form-container[b-ethlqx2rp0] {
        flex: 1;
        padding: 32px 24px;
    }

    .login-title[b-ethlqx2rp0] {
        font-size: 32px;
    }

    .login-logo img[b-ethlqx2rp0] {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .login-form-container[b-ethlqx2rp0] {
        padding: 24px 16px;
    }

    .login-title[b-ethlqx2rp0] {
        font-size: 28px;
    }

    .login-subtitle[b-ethlqx2rp0] {
        font-size: 13px;
    }

    .login-logo img[b-ethlqx2rp0] {
        width: 80px;
    }

    .login-logo[b-ethlqx2rp0] {
        margin-bottom: 24px;
    }
}
/* /Pages/Auth/ResetPassword.razor.rz.scp.css */
/* ===== Login Container ===== */
.login-container[b-ro9qp3kakk] {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* ===== Left Side - Image ===== */
.login-image[b-ro9qp3kakk] {
    flex: 1;
    overflow: hidden;
}

.login-image img[b-ro9qp3kakk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Right Side - Form Container ===== */
.login-form-container[b-ro9qp3kakk] {
    flex: 0 0 45%;
    background-color: var(--color-lavender-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-form-wrapper[b-ro9qp3kakk] {
    width: 100%;
    max-width: 380px;
}

/* ===== Logo ===== */
.login-logo[b-ro9qp3kakk] {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo img[b-ro9qp3kakk] {
    width: 120px;
    height: auto;
}

/* ===== Title ===== */
.login-title[b-ro9qp3kakk] {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 600;
    color: var(--color-purple);
    text-align: center;
    margin-bottom: 30px;
}

/* ===== Form ===== */
.login-form[b-ro9qp3kakk] {
    width: 100%;
}

/* ===== Form Group ===== */
.form-group[b-ro9qp3kakk] {
    margin-bottom: 20px;
}

.form-group label[b-ro9qp3kakk] {
    display: block;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-darker-purple);
    margin-bottom: 8px;
}

/* ===== Error Message ===== */
.error-message[b-ro9qp3kakk] {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ===== Success Message ===== */
.success-message[b-ro9qp3kakk] {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #28a745;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.5;
}

/* ===== Login Button ===== */
.btn-login[b-ro9qp3kakk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background-color: var(--color-purple);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 12px;
    text-decoration: none;
}

.btn-login:hover:not(:disabled)[b-ro9qp3kakk] {
    background-color: var(--color-darker-purple);
}

.btn-login:active:not(:disabled)[b-ro9qp3kakk] {
    transform: scale(0.98);
}

.btn-login:disabled[b-ro9qp3kakk] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ===== Reset Password Link ===== */
.reset-link[b-ro9qp3kakk] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark-purple);
    text-align: center;
    margin-top: 24px;
}

.reset-link a[b-ro9qp3kakk] {
    color: var(--color-purple);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.reset-link a:hover[b-ro9qp3kakk] {
    color: var(--color-darker-purple);
}

/* ===== Validation Messages ===== */
[b-ro9qp3kakk] .validation-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .login-form-container[b-ro9qp3kakk] {
        flex: 0 0 50%;
    }
}

@media (max-width: 768px) {
    .login-container[b-ro9qp3kakk] {
        flex-direction: column;
    }

    .login-image[b-ro9qp3kakk] {
        height: 30vh;
        flex: none;
    }

    .login-form-container[b-ro9qp3kakk] {
        flex: 1;
        padding: 32px 24px;
    }

    .login-title[b-ro9qp3kakk] {
        font-size: 32px;
    }

    .login-logo img[b-ro9qp3kakk] {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .login-form-container[b-ro9qp3kakk] {
        padding: 24px 16px;
    }

    .login-title[b-ro9qp3kakk] {
        font-size: 28px;
    }

    .login-logo img[b-ro9qp3kakk] {
        width: 80px;
    }

    .login-logo[b-ro9qp3kakk] {
        margin-bottom: 24px;
    }
}
/* /Pages/Committee.razor.rz.scp.css */
/* ===== Committee Page ===== */
.committee-page[b-rr7490ekxh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-rr7490ekxh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-rr7490ekxh] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-rr7490ekxh] {
    background-color: #5D2A8C;
}

.btn-add svg[b-rr7490ekxh] {
    stroke: #FFFFFF;
}

/* ===== Table Card ===== */
.table-card[b-rr7490ekxh] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Committee Table ===== */
.committee-table[b-rr7490ekxh] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.committee-table thead tr[b-rr7490ekxh] {
    border-bottom: 2px solid #EDE6F5;
}

.committee-table th[b-rr7490ekxh] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.committee-table tbody tr[b-rr7490ekxh] {
    border-bottom: 1px solid #EDE6F5;
}

.committee-table tbody tr:last-child[b-rr7490ekxh] {
    border-bottom: none;
}

.committee-table tbody tr:hover[b-rr7490ekxh] {
    background-color: #F6F1FA;
}

.committee-table td[b-rr7490ekxh] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-checkbox[b-rr7490ekxh] {
    width: 3%;
    text-align: center;
}

.col-checkbox input[type="checkbox"][b-rr7490ekxh] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6C2DA8;
}

.col-member[b-rr7490ekxh] {
    width: 22%;
}

.col-role[b-rr7490ekxh] {
    width: 12%;
}

.col-institution[b-rr7490ekxh] {
    width: 20%;
}

.col-country[b-rr7490ekxh] {
    width: 12%;
}

.col-email[b-rr7490ekxh] {
    width: 20%;
}

.col-actions[b-rr7490ekxh] {
    width: 8%;
    text-align: left;
}

/* ===== Member Cell ===== */
.member-cell[b-rr7490ekxh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.member-photo[b-rr7490ekxh] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.member-photo-placeholder[b-rr7490ekxh] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

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

.member-name[b-rr7490ekxh] {
    font-weight: 600;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-prefix[b-rr7490ekxh] {
    font-size: 12px;
    color: #6C2DA8;
}

/* ===== Role Badge ===== */
.role-badge[b-rr7490ekxh] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.role-badge.role-chair[b-rr7490ekxh] {
    background-color: #6C2DA8;
    color: #FFFFFF;
}

.role-badge.role-cochair[b-rr7490ekxh] {
    background-color: #B987F9;
    color: #FFFFFF;
}

.role-badge.role-member[b-rr7490ekxh] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

.role-badge.role-honorary[b-rr7490ekxh] {
    background-color: #FEF3E2;
    color: #EF8121;
}

.role-badge.large[b-rr7490ekxh] {
    margin-top: 8px;
    padding: 6px 16px;
    font-size: 13px;
}

/* ===== Email Link ===== */
.email-link[b-rr7490ekxh] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-rr7490ekxh] {
    color: #5D2A8C;
    text-decoration: underline;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-rr7490ekxh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-rr7490ekxh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover[b-rr7490ekxh] {
    background-color: #F6F1FA;
}

.action-btn img[b-rr7490ekxh] {
    width: 14px;
    height: 14px;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-rr7490ekxh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-rr7490ekxh 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-rr7490ekxh] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-rr7490ekxh] {
    right: 0;
}

.panel-header[b-rr7490ekxh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-rr7490ekxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-rr7490ekxh] {
    background-color: #F6F1FA;
}

.panel-content[b-rr7490ekxh] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-rr7490ekxh] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

/* ===== Member Detail View ===== */
.member-detail-photo[b-rr7490ekxh] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.member-detail-photo img[b-rr7490ekxh] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.photo-placeholder-large[b-rr7490ekxh] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 36px;
}

.member-detail-header[b-rr7490ekxh] {
    text-align: center;
    margin-bottom: 24px;
}

.member-detail-name[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 4px 0;
}

.member-detail-prefix[b-rr7490ekxh] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6C2DA8;
    font-weight: 500;
}

.member-detail-section[b-rr7490ekxh] {
    margin-bottom: 20px;
}

.detail-label[b-rr7490ekxh] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-biography[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

.contact-link[b-rr7490ekxh] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-rr7490ekxh] {
    color: #5D2A8C;
}

.contact-link svg[b-rr7490ekxh] {
    flex-shrink: 0;
}

/* ===== Form Styles ===== */
.form-group[b-rr7490ekxh] {
    margin-bottom: 20px;
}

.form-group.half[b-rr7490ekxh] {
    flex: 1;
}

.form-row[b-rr7490ekxh] {
    display: flex;
    gap: 16px;
}

.form-label[b-rr7490ekxh] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-input[b-rr7490ekxh],
.form-select[b-rr7490ekxh] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-rr7490ekxh],
.form-select:focus[b-rr7490ekxh] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-rr7490ekxh]::placeholder {
    color: #B987F9;
}

.form-input.input-error[b-rr7490ekxh],
.form-select.input-error[b-rr7490ekxh] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.form-select[b-rr7490ekxh] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-textarea[b-rr7490ekxh] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
}

.form-textarea:focus[b-rr7490ekxh] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-textarea[b-rr7490ekxh]::placeholder {
    color: #B987F9;
}

.error-message[b-rr7490ekxh] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

/* ===== File Upload ===== */
.file-upload-area[b-rr7490ekxh] {
    border: 2px dashed #B987F9;
    border-radius: 12px;
    background-color: #F6F1FA;
    transition: all 0.2s ease;
}

.file-upload-area:hover[b-rr7490ekxh] {
    border-color: #6C2DA8;
    background-color: #EDE6F5;
}

.file-upload-label[b-rr7490ekxh] {
    display: block;
    cursor: pointer;
    padding: 24px;
}

.file-upload-content[b-rr7490ekxh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6C2DA8;
}

.file-upload-text[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6C2DA8;
}

.file-upload-hint[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #B987F9;
}

.file-preview[b-rr7490ekxh] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.preview-image[b-rr7490ekxh] {
    max-width: 120px;
    max-height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.btn-remove-image[b-rr7490ekxh] {
    position: absolute;
    top: 8px;
    right: calc(50% - 68px);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DC2626;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-remove-image:hover[b-rr7490ekxh] {
    background-color: #B91C1C;
}

/* ===== Form Footer ===== */
.form-footer[b-rr7490ekxh] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-rr7490ekxh] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-rr7490ekxh] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-rr7490ekxh] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-rr7490ekxh] {
    background-color: #5D2A8C;
}

.btn-edit-panel[b-rr7490ekxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-rr7490ekxh] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-rr7490ekxh] {
    filter: brightness(0) invert(1);
}

/* ===== Delete Modal ===== */
.modal-overlay[b-rr7490ekxh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-rr7490ekxh 0.2s ease;
}

.modal-dialog[b-rr7490ekxh] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-rr7490ekxh 0.2s ease;
}

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

.modal-header[b-rr7490ekxh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-rr7490ekxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-rr7490ekxh] {
    background-color: #F6F1FA;
}

.modal-body[b-rr7490ekxh] {
    padding: 24px;
}

.modal-body p[b-rr7490ekxh] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-rr7490ekxh] {
    margin-bottom: 0;
}

.warning-text[b-rr7490ekxh] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-rr7490ekxh] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-rr7490ekxh] {
    flex: 1;
}

.btn-delete[b-rr7490ekxh] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-rr7490ekxh] {
    background-color: #B91C1C;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-email[b-rr7490ekxh] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-rr7490ekxh] {
        padding: var(--spacing-md);
    }

    .committee-table th[b-rr7490ekxh],
    .committee-table td[b-rr7490ekxh] {
        padding: 12px 8px;
    }

    .col-institution[b-rr7490ekxh] {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .col-country[b-rr7490ekxh] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-rr7490ekxh] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-rr7490ekxh] {
        width: 100%;
        justify-content: center;
    }

    .committee-table th[b-rr7490ekxh],
    .committee-table td[b-rr7490ekxh] {
        padding: 10px 6px;
        font-size: 12px;
    }

    .member-photo[b-rr7490ekxh],
    .member-photo-placeholder[b-rr7490ekxh] {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-rr7490ekxh] {
        width: 100%;
        right: -100%;
    }

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

/* ===== Import from Speaker ===== */
.import-speaker-group[b-rr7490ekxh] {
    background: #f0f4ff;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px dashed #94abff;
    margin-bottom: var(--spacing-md);
}

.import-speaker-group .form-label[b-rr7490ekxh] {
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
}

.import-speaker-group .form-row[b-rr7490ekxh] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-import[b-rr7490ekxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #6C2DA8;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-import:hover:not(:disabled)[b-rr7490ekxh] {
    background: #5a2490;
}

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

.linked-speaker-badge[b-rr7490ekxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    background: #e9d5ff;
    color: #6C2DA8;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.btn-unlink[b-rr7490ekxh] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #6C2DA8;
    padding: 2px;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-unlink:hover[b-rr7490ekxh] {
    background: rgba(108, 45, 168, 0.15);
}

/* ===== Translation Language Bar ===== */
.translation-lang-bar[b-rr7490ekxh] { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: #F9F5FF; border: 1px solid #EDE6F5; border-radius: 6px; margin-bottom: 12px; }
.translation-lang-tab[b-rr7490ekxh] { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; color: #8B7A9E; background: #fff; border: 1px solid #E0D4ED; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; }
.translation-lang-tab:hover[b-rr7490ekxh] { color: #6C2DA8; border-color: #B987F9; }
.translation-lang-tab-active[b-rr7490ekxh] { color: #fff; background: #6C2DA8; border-color: #6C2DA8; font-weight: 600; }
.translation-lang-badge[b-rr7490ekxh] { font-size: 10px; font-weight: 400; opacity: 0.7; text-transform: lowercase; }

/* ===== Quill Editor ===== */
.quill-wrapper[b-rr7490ekxh] {
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background-color: #F6F1FA;
}

.quill-wrapper:focus-within[b-rr7490ekxh] {
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

[b-rr7490ekxh] .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid #EDE6F5 !important;
    background-color: transparent;
    padding: 6px 8px !important;
}

[b-rr7490ekxh] .ql-container.ql-snow {
    border: none !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

[b-rr7490ekxh] .ql-editor {
    min-height: 250px;
    max-height: 400px;
    overflow-y: auto;
    color: #1D0F29;
    padding: 12px 14px;
}

[b-rr7490ekxh] .ql-editor.ql-blank::before {
    color: #B987F9;
    font-style: normal;
}

[b-rr7490ekxh] .ql-snow .ql-stroke {
    stroke: #4B3C57;
}

[b-rr7490ekxh] .ql-snow .ql-fill {
    fill: #4B3C57;
}

[b-rr7490ekxh] .ql-snow button:hover .ql-stroke,
[b-rr7490ekxh] .ql-snow button.ql-active .ql-stroke {
    stroke: #6C2DA8;
}

[b-rr7490ekxh] .ql-snow button:hover .ql-fill,
[b-rr7490ekxh] .ql-snow button.ql-active .ql-fill {
    fill: #6C2DA8;
}
/* /Pages/ConferenceRegistrations.razor.rz.scp.css */
/* ===== Registrations Page ===== */
.registrations-page[b-5hv7gayrtb] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-5hv7gayrtb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-5hv7gayrtb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-5hv7gayrtb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-5hv7gayrtb] {
    color: #5D2A8C;
}

.page-title[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.page-subtitle[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Filters Bar ===== */
.filters-bar[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-5hv7gayrtb] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-5hv7gayrtb] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-5hv7gayrtb] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-5hv7gayrtb] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-5hv7gayrtb]::placeholder {
    color: #B987F9;
}

.clear-search[b-5hv7gayrtb] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search:hover[b-5hv7gayrtb] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

/* ===== Filter Chips ===== */
.filter-chips[b-5hv7gayrtb] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.filter-chip[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #F6F1FA;
    border: 2px solid transparent;
    border-radius: 24px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-5hv7gayrtb] {
    background-color: #EDE6F5;
}

.filter-chip.active[b-5hv7gayrtb] {
    background-color: #6C2DA8;
    border-color: #6C2DA8;
}

.filter-chip.active .chip-label[b-5hv7gayrtb] {
    color: #FFFFFF;
}

.filter-chip.status-paid.active[b-5hv7gayrtb] {
    background-color: #03543F;
    border-color: #03543F;
}

.filter-chip.status-pending.active[b-5hv7gayrtb] {
    background-color: #92400E;
    border-color: #92400E;
}

.filter-chip.status-refunded.active[b-5hv7gayrtb] {
    background-color: #991B1B;
    border-color: #991B1B;
}

.filter-chip.status-waitlist.active[b-5hv7gayrtb] {
    background-color: #6B21A8;
    border-color: #6B21A8;
}

.chip-label[b-5hv7gayrtb] {
    font-size: 14px;
    font-weight: 500;
    color: #4B3C57;
}

.chip-count[b-5hv7gayrtb] {
    font-size: 12px;
    font-weight: 700;
    color: #6C2DA8;
    background-color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.filter-chip.status-paid .chip-count[b-5hv7gayrtb] {
    color: #03543F;
}

.filter-chip.status-pending .chip-count[b-5hv7gayrtb] {
    color: #92400E;
}

.filter-chip.status-refunded .chip-count[b-5hv7gayrtb] {
    color: #991B1B;
}

.filter-chip.status-waitlist .chip-count[b-5hv7gayrtb] {
    color: #6B21A8;
}

/* ===== Table Card ===== */
.table-card[b-5hv7gayrtb] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 0;
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Registrations Table ===== */
.registrations-table[b-5hv7gayrtb] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.registrations-table thead tr[b-5hv7gayrtb] {
    background-color: #F6F1FA;
}

.registrations-table th[b-5hv7gayrtb] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.registrations-table th.sortable[b-5hv7gayrtb] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.registrations-table th.sortable:hover[b-5hv7gayrtb] {
    background-color: #EDE6F5;
}

.registrations-table th.sortable span[b-5hv7gayrtb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-icon[b-5hv7gayrtb] {
    transition: transform 0.2s ease;
}

.sort-icon.desc[b-5hv7gayrtb] {
    transform: rotate(180deg);
}

.registrations-table tbody tr[b-5hv7gayrtb] {
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.2s ease;
}

.registrations-table tbody tr:last-child[b-5hv7gayrtb] {
    border-bottom: none;
}

.registrations-table tbody tr:hover[b-5hv7gayrtb] {
    background-color: #F6F1FA;
}

.registrations-table td[b-5hv7gayrtb] {
    padding: 14px 16px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-name[b-5hv7gayrtb] {
    width: 18%;
}

.name-cell[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendee-initials[b-5hv7gayrtb] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #EF8121;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.attendee-name[b-5hv7gayrtb] {
    font-weight: 600;
    color: #1D0F29;
}

.col-email[b-5hv7gayrtb] {
    width: 20%;
}

.email-link[b-5hv7gayrtb] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-5hv7gayrtb] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-phone[b-5hv7gayrtb] {
    width: 12%;
}

.col-organization[b-5hv7gayrtb] {
    width: 15%;
}

.col-role[b-5hv7gayrtb] {
    width: 12%;
}

/* ===== Loading / Error States ===== */
.loading-state[b-5hv7gayrtb],
.error-state[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #4B3C57;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

.error-state[b-5hv7gayrtb] {
    color: #991B1B;
    background-color: #FEF2F2;
}

.col-date[b-5hv7gayrtb] {
    width: 12%;
}

.col-status[b-5hv7gayrtb] {
    width: 10%;
}

.col-amount[b-5hv7gayrtb] {
    width: 8%;
    font-weight: 600;
}

.col-actions[b-5hv7gayrtb] {
    width: 5%;
    text-align: center;
}

.empty-text[b-5hv7gayrtb] {
    color: #B987F9;
    font-style: italic;
}

/* ===== Status Badge ===== */
.status-badge[b-5hv7gayrtb] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-paid[b-5hv7gayrtb] {
    background-color: #DEF7EC;
    color: #03543F;
}

.status-badge.status-pending[b-5hv7gayrtb] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-refunded[b-5hv7gayrtb] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.status-badge.status-disputed[b-5hv7gayrtb] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-waitlist[b-5hv7gayrtb] {
    background-color: #EDE9FE;
    color: #6B21A8;
}

/* ===== Type Badge (Conference vs Workshop only) ===== */
.type-badge[b-5hv7gayrtb] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-badge.type-conference[b-5hv7gayrtb] {
    background-color: rgba(246, 161, 0, 0.16);
    color: #F6A100;
}

.type-badge.type-workshop[b-5hv7gayrtb] {
    background-color: rgba(148, 171, 255, 0.16);
    color: #94ABFF;
}

.workshop-count[b-5hv7gayrtb] {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: #8495D3;
}

/* ===== Purchase History (side panel) ===== */
.purchase-history-list[b-5hv7gayrtb] {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.purchase-history-item[b-5hv7gayrtb] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.purchase-history-row[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.purchase-history-left[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.purchase-date[b-5hv7gayrtb] {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.purchase-amount[b-5hv7gayrtb] {
    font-size: 14px;
    color: #F6A100;
    font-weight: 700;
    white-space: nowrap;
}

.purchase-history-footer[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.purchase-tags[b-5hv7gayrtb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.purchase-tag[b-5hv7gayrtb] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.purchase-tag.tag-conference[b-5hv7gayrtb] {
    background-color: rgba(246, 161, 0, 0.16);
    color: #F6A100;
}

.purchase-tag.tag-workshop[b-5hv7gayrtb] {
    background-color: rgba(148, 171, 255, 0.16);
    color: #94ABFF;
}

.purchase-tag.tag-accommodation[b-5hv7gayrtb] {
    background-color: rgba(34, 197, 94, 0.16);
    color: #22c55e;
}

.purchase-tag.tag-ecm[b-5hv7gayrtb] {
    background-color: rgba(185, 135, 249, 0.16);
    color: #B987F9;
}

/* ===== Position Badge (Waitlist) ===== */
.col-position[b-5hv7gayrtb] {
    width: 80px;
    text-align: center;
}

.position-badge[b-5hv7gayrtb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    background-color: #EDE9FE;
    color: #6B21A8;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 14px;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-btn[b-5hv7gayrtb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-btn:hover[b-5hv7gayrtb] {
    background-color: #EDE6F5;
}

.action-btn.promote-btn[b-5hv7gayrtb] {
    color: #047857;
}

.action-btn.promote-btn:hover[b-5hv7gayrtb] {
    background-color: #D1FAE5;
}

/* ===== Empty State ===== */
.empty-state[b-5hv7gayrtb] {
    text-align: center;
    padding: 60px 20px !important;
    color: #4B3C57;
}

.empty-state svg[b-5hv7gayrtb] {
    margin-bottom: 16px;
}

.empty-state p[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
}

.btn-clear-filters[b-5hv7gayrtb] {
    padding: 10px 20px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-clear-filters:hover[b-5hv7gayrtb] {
    background-color: #EDE6F5;
}

/* ===== Pagination ===== */
.pagination[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.pagination-controls[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: transparent;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-5hv7gayrtb] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.page-btn.active[b-5hv7gayrtb] {
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-color: #6C2DA8;
}

.page-btn:disabled[b-5hv7gayrtb] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-ellipsis[b-5hv7gayrtb] {
    padding: 0 8px;
    color: #4B3C57;
}

.page-size-selector[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size-selector label[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.page-size-selector select[b-5hv7gayrtb] {
    padding: 8px 28px 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ===== Side Panel ===== */
.panel-overlay[b-5hv7gayrtb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-5hv7gayrtb 0.2s ease;
}

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

.side-panel[b-5hv7gayrtb] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-5hv7gayrtb] {
    right: 0;
}

.panel-header[b-5hv7gayrtb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-5hv7gayrtb] {
    background-color: #F6F1FA;
}

.panel-content[b-5hv7gayrtb] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.attendee-header-section[b-5hv7gayrtb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.attendee-avatar-large[b-5hv7gayrtb] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #EF8121;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.attendee-name-large[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
}

.attendee-status-badge[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attendee-status-badge.status-paid[b-5hv7gayrtb] {
    background-color: #DEF7EC;
    color: #03543F;
}

.attendee-status-badge.status-pending[b-5hv7gayrtb] {
    background-color: #FEF3C7;
    color: #92400E;
}

.attendee-status-badge.status-refunded[b-5hv7gayrtb] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.attendee-status-badge.status-disputed[b-5hv7gayrtb] {
    background-color: #FEF3C7;
    color: #92400E;
}

.attendee-status-badge.status-waitlist[b-5hv7gayrtb] {
    background-color: #EDE9FE;
    color: #6B21A8;
}

.detail-section[b-5hv7gayrtb] {
    margin-bottom: 20px;
}

.detail-section.half[b-5hv7gayrtb] {
    flex: 1;
}

.detail-row[b-5hv7gayrtb] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-5hv7gayrtb] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-description[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

.price-value[b-5hv7gayrtb] {
    font-size: 18px;
    font-weight: 700;
    color: #6C2DA8;
}

.contact-link[b-5hv7gayrtb] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-5hv7gayrtb] {
    color: #5D2A8C;
}

.contact-link svg[b-5hv7gayrtb] {
    flex-shrink: 0;
}

.panel-footer[b-5hv7gayrtb] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-close-panel[b-5hv7gayrtb] {
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-panel:hover[b-5hv7gayrtb] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1200px) {
    .col-organization[b-5hv7gayrtb] {
        display: none;
    }

    .filter-stats[b-5hv7gayrtb] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-phone[b-5hv7gayrtb] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .filters-bar[b-5hv7gayrtb] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-5hv7gayrtb] {
        max-width: 100%;
    }

    .filter-group[b-5hv7gayrtb] {
        justify-content: space-between;
    }

    .pagination[b-5hv7gayrtb] {
        flex-direction: column;
        align-items: center;
    }

    .col-date[b-5hv7gayrtb] {
        display: none;
    }

    .col-amount[b-5hv7gayrtb] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-5hv7gayrtb] {
        width: 100%;
        right: -100%;
    }
}

/* ===== Name Info ===== */
.name-info[b-5hv7gayrtb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ===== Early Bird Tag ===== */
.earlybird-tag[b-5hv7gayrtb] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #FEF3C7;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Admin-triggered Stripe reconcile */
.btn-reconcile[b-5hv7gayrtb] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(246, 161, 0, 0.4);
    background: rgba(246, 161, 0, 0.08);
    color: #F6A100;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

.btn-reconcile:hover:not(:disabled)[b-5hv7gayrtb] {
    background: rgba(246, 161, 0, 0.18);
    border-color: #F6A100;
}

.btn-reconcile:disabled[b-5hv7gayrtb] {
    opacity: 0.55;
    cursor: progress;
}

/* Grid row: small icon-button flavour of the reconcile action */
.action-btn-reconcile[b-5hv7gayrtb] {
    color: #F6A100;
}

.action-btn-reconcile:hover:not(:disabled)[b-5hv7gayrtb] {
    background: rgba(246, 161, 0, 0.15);
}

.action-btn-reconcile:disabled[b-5hv7gayrtb] {
    opacity: 0.5;
    cursor: progress;
}

.reconcile-spinner[b-5hv7gayrtb] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(246, 161, 0, 0.3);
    border-top-color: #F6A100;
    border-radius: 50%;
    animation: reconcile-spin-b-5hv7gayrtb 0.7s linear infinite;
}

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

.reconcile-banner[b-5hv7gayrtb] {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    margin: 0 0 10px 0;
    line-height: 1.4;
    border: 1px solid transparent;
}

/* Page-level variant: a bit more prominent since it floats above the grid. */
.reconcile-banner.reconcile-banner-page[b-5hv7gayrtb] {
    font-size: 13px;
    padding: 10px 14px;
    margin: 0 0 20px 0;
}

.reconcile-banner.reconcile-info[b-5hv7gayrtb] {
    background: rgba(148, 171, 255, 0.12);
    color: #94ABFF;
    border-color: rgba(148, 171, 255, 0.3);
}

.reconcile-banner.reconcile-success[b-5hv7gayrtb] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.35);
}

.reconcile-banner.reconcile-warning[b-5hv7gayrtb] {
    background: rgba(246, 161, 0, 0.12);
    color: #F6A100;
    border-color: rgba(246, 161, 0, 0.35);
}

.reconcile-banner.reconcile-error[b-5hv7gayrtb] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.35);
}

/* /Pages/Conferences.razor.rz.scp.css */
/* ===== Conferences Page ===== */
.conferences-page[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-5x8bzengfl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-5x8bzengfl] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-5x8bzengfl] {
    background-color: #5D2A8C;
}

.btn-add svg[b-5x8bzengfl] {
    stroke: #FFFFFF;
}

/* ===== Table Card ===== */
.table-card[b-5x8bzengfl] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Conferences Table ===== */
.conferences-table[b-5x8bzengfl] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.conferences-table thead tr[b-5x8bzengfl] {
    border-bottom: 2px solid #EDE6F5;
}

.conferences-table th[b-5x8bzengfl] {
    text-align: left;
    padding: 16px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conferences-table tbody tr[b-5x8bzengfl] {
    border-bottom: 1px solid #EDE6F5;
}

.conferences-table tbody tr:last-child[b-5x8bzengfl] {
    border-bottom: none;
}

.conferences-table tbody tr:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
}

.conferences-table tbody tr.active-row[b-5x8bzengfl] {
    background-color: #F3EEFA;
}

.conferences-table tbody tr.active-row:hover[b-5x8bzengfl] {
    background-color: #EDE6F5;
}

.conferences-table td[b-5x8bzengfl] {
    padding: 20px 12px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: top;
}

/* ===== Column Styles ===== */
.col-active[b-5x8bzengfl] {
    width: 32px;
    text-align: center;
    vertical-align: middle !important;
}

.active-selector[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #D4C6E0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.active-selector:hover[b-5x8bzengfl] {
    border-color: #6C2DA8;
    background-color: #F3EEFA;
}

.active-selector.is-active[b-5x8bzengfl] {
    border-color: #6C2DA8;
    background-color: #6C2DA8;
}

.active-selector.is-active svg[b-5x8bzengfl] {
    stroke: #FFFFFF;
}

.active-selector.is-active:hover[b-5x8bzengfl] {
    background-color: #5A2490;
    border-color: #5A2490;
}

.col-name[b-5x8bzengfl] {
    width: 20%;
    font-weight: 600;
    color: #1D0F29;
}

.col-place[b-5x8bzengfl] {
    width: 10%;
}

.col-date[b-5x8bzengfl] {
    width: 12%;
}

.col-price[b-5x8bzengfl] {
    width: 10%;
    font-weight: 600;
}

.col-earlybird[b-5x8bzengfl] {
    width: 8%;
}

.col-hotel[b-5x8bzengfl] {
    width: 7%;
    text-align: left;
}

.col-workshops[b-5x8bzengfl] {
    width: 8%;
    text-align: left;
}

.col-sponsors[b-5x8bzengfl] {
    width: 8%;
    text-align: left;
}

.col-registrations[b-5x8bzengfl] {
    width: 9%;
    text-align: left;
}

.registrations-link[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    background-color: #EDE9FE;
    text-decoration: none;
    transition: all 0.2s ease;
}

.registrations-link:hover[b-5x8bzengfl] {
    background-color: #DDD6FE;
}

.registrations-count[b-5x8bzengfl] {
    font-weight: 700;
    font-size: 14px;
    color: #6B21A8;
}

.registrations-label[b-5x8bzengfl] {
    font-size: 12px;
    color: #6B21A8;
}

.registrations-empty[b-5x8bzengfl] {
    font-size: 14px;
    color: #B987F9;
}

.col-actions[b-5x8bzengfl] {
    width: 10%;
    text-align: left;
}

/* ===== Sponsors List ===== */
.sponsors-list[b-5x8bzengfl] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sponsors-list li[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sponsor-dot[b-5x8bzengfl] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sponsor-name[b-5x8bzengfl] {
    font-size: 13px;
    color: #4B3C57;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Sponsorship Level Colors ===== */
.level-platinum[b-5x8bzengfl] {
    background-color: #6C2DA8;
}

.level-gold[b-5x8bzengfl] {
    background-color: #EF8121;
}

.level-silver[b-5x8bzengfl] {
    background-color: #A0A0A0;
}

.level-bronze[b-5x8bzengfl] {
    background-color: #CD7F32;
}

.level-default[b-5x8bzengfl] {
    background-color: #B987F9;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-5x8bzengfl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #6C2DA8;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
}

.action-btn-published[b-5x8bzengfl] {
    color: #16A34A;
}

.action-btn-published:hover[b-5x8bzengfl] {
    background-color: #F0FDF4;
}

.action-btn-draft[b-5x8bzengfl] {
    color: #78716C;
}

.action-btn-draft:hover[b-5x8bzengfl] {
    background-color: #F5F5F4;
}

.action-btn-warning[b-5x8bzengfl] {
    color: #D97706;
}

.action-btn-warning:hover[b-5x8bzengfl] {
    background-color: #FEF3C7;
}

/* ===== Actions spacing ===== */
.actions-wrapper[b-5x8bzengfl] {
    gap: 6px;
}

/* ===== Price column ===== */
.price-lines[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-line[b-5x8bzengfl] {
    font-size: 13px;
    white-space: nowrap;
}

.price-label[b-5x8bzengfl] {
    font-size: 11px;
    color: #9B7DB8;
    margin-right: 3px;
}

.price-online[b-5x8bzengfl] {
    color: #6B7280;
    font-size: 12px;
}

/* ===== Feature pills ===== */
.col-features[b-5x8bzengfl] {
    width: 15%;
}

.feature-pills[b-5x8bzengfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.feature-pill[b-5x8bzengfl] {
    display: inline-block;
    padding: 1px 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    background-color: #EDE6F5;
    color: #6C2DA8;
    line-height: 1.5;
    letter-spacing: 0.02em;
    cursor: default;
}

.action-btn img[b-5x8bzengfl] {
    width: 14px;
    height: 14px;
}

/* ===== More Sponsors ===== */
.more-sponsors[b-5x8bzengfl] {
    font-size: 12px;
    color: #6C2DA8;
    font-weight: 500;
    font-style: italic;
}

/* ===== Empty State ===== */
.empty-text[b-5x8bzengfl] {
    color: #B987F9;
    font-style: italic;
    font-size: 13px;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-5x8bzengfl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-5x8bzengfl 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-5x8bzengfl] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-5x8bzengfl] {
    right: 0;
}

.panel-header[b-5x8bzengfl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
}

.panel-content[b-5x8bzengfl] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.conference-detail-section[b-5x8bzengfl] {
    margin-bottom: 20px;
}

.conference-detail-section.half[b-5x8bzengfl] {
    flex: 1;
}

.detail-row[b-5x8bzengfl] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-5x8bzengfl] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-title[b-5x8bzengfl] {
    font-size: 18px;
    font-weight: 600;
    color: #1D0F29;
}

.price-value[b-5x8bzengfl] {
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
}

.badge-earlybird[b-5x8bzengfl] {
    display: inline-block;
    padding: 6px 14px;
    background-color: #00BA9D;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
}

.sponsors-detail-list[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sponsor-item[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: #F6F1FA;
    border-radius: 8px;
}

.sponsor-dot-large[b-5x8bzengfl] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sponsor-name-full[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.stats-grid[b-5x8bzengfl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-item[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background-color: #F6F1FA;
    border-radius: 10px;
}

.stat-value[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #6C2DA8;
}

.stat-label[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    margin-top: 4px;
}

.features-tags[b-5x8bzengfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tag[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.feature-tag.enabled[b-5x8bzengfl] {
    background-color: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}

.panel-footer[b-5x8bzengfl] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-edit-panel[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-5x8bzengfl] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-5x8bzengfl] {
    filter: brightness(0) invert(1);
}

/* ===== Tab Navigation Buttons (Back/Next) ===== */
.btn-tab-next[b-5x8bzengfl],
.btn-tab-back[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tab-next[b-5x8bzengfl] {
    background: transparent;
    border: 1.5px solid #6C2DA8;
    color: #6C2DA8;
}

.btn-tab-next:hover[b-5x8bzengfl] {
    background: #6C2DA8;
    color: #FFFFFF;
}

.btn-tab-back[b-5x8bzengfl] {
    background: transparent;
    border: 1.5px solid #9B7DB8;
    color: #9B7DB8;
}

.btn-tab-back:hover[b-5x8bzengfl] {
    border-color: #6C2DA8;
    color: #6C2DA8;
}

.btn-arrow[b-5x8bzengfl] {
    font-size: 14px;
    line-height: 1;
}

/* ===== Form Tab Bar ===== */
.form-tab-bar[b-5x8bzengfl] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #EDE6F5;
    padding: 0 20px;
    background: #F6F1FA;
}

.form-tab[b-5x8bzengfl] {
    padding: 12px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: #9B7DB8;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.form-tab:hover[b-5x8bzengfl] {
    color: #6C2DA8;
}

.form-tab-active[b-5x8bzengfl] {
    color: #6C2DA8;
    border-bottom-color: #F6A100;
    font-weight: 700;
}

/* ===== Conference Name + Badges in Grid ===== */
.conference-name[b-5x8bzengfl] {
    display: block;
    font-weight: 600;
    color: #1D0F29;
}

.conference-badges[b-5x8bzengfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.badge-sm[b-5x8bzengfl] {
    display: inline-block;
    padding: 2px 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1.4;
}

.badge-sm.badge-type[b-5x8bzengfl] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

.badge-sm.badge-mode[b-5x8bzengfl] {
    background-color: #E0F2FE;
    color: #0369A1;
}

.badge-sm.badge-published[b-5x8bzengfl] {
    background-color: #F0FDF4;
    color: #16A34A;
}

.badge-sm.badge-draft[b-5x8bzengfl] {
    background-color: #F5F5F4;
    color: #78716C;
}

.badge-sm.badge-deprecated[b-5x8bzengfl] {
    background-color: #FEF2F2;
    color: #DC2626;
}

/* ===== Form Styles ===== */
.form-group[b-5x8bzengfl] {
    margin-bottom: 20px;
}

.form-group.half[b-5x8bzengfl] {
    flex: 1;
}

.form-row[b-5x8bzengfl] {
    display: flex;
    gap: 16px;
}

.form-label[b-5x8bzengfl] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-section-title[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #EDE6F5;
}

.form-input[b-5x8bzengfl],
.form-select[b-5x8bzengfl] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-5x8bzengfl],
.form-select:focus[b-5x8bzengfl] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-5x8bzengfl]::placeholder {
    color: #B987F9;
}

.form-input.input-error[b-5x8bzengfl],
.form-select.input-error[b-5x8bzengfl] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.form-select[b-5x8bzengfl] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-textarea[b-5x8bzengfl] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
}

.form-textarea:focus[b-5x8bzengfl] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-textarea[b-5x8bzengfl]::placeholder {
    color: #B987F9;
}

.char-counter[b-5x8bzengfl] {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #9B7DB8;
    margin-top: 4px;
    font-family: 'Roboto', sans-serif;
}

.input-with-prefix[b-5x8bzengfl] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-5x8bzengfl] {
    position: absolute;
    left: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    pointer-events: none;
    z-index: 1;
}

.form-input.with-prefix[b-5x8bzengfl] {
    padding-left: 32px;
}

.form-checkbox[b-5x8bzengfl] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: #6C2DA8;
    cursor: pointer;
    vertical-align: middle;
}

.form-label:has(.form-checkbox)[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    text-transform: none;
    font-weight: 500;
    cursor: pointer;
}

.earlybird-fields[b-5x8bzengfl] {
    margin-left: 28px;
    padding-left: 16px;
    border-left: 2px solid #EDE6F5;
}

.error-message[b-5x8bzengfl] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

/* ===== Form Footer ===== */
.form-footer[b-5x8bzengfl] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-5x8bzengfl] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-5x8bzengfl] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-5x8bzengfl] {
    background-color: #5D2A8C;
}

/* ===== Early Bird Badge ===== */
.earlybird-badge[b-5x8bzengfl] {
    display: inline-block;
    padding: 4px 10px;
    background-color: #00BA9D;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

/* ===== Feature Yes/No Indicators ===== */
.feature-yes[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #00BA9D;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.feature-yes svg[b-5x8bzengfl] {
    stroke: #00BA9D;
}

.feature-no[b-5x8bzengfl] {
    color: #B0B0B0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.earlybird-detail[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.earlybird-deadline[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
}

/* ===== Description ===== */
.detail-description[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.7;
    margin: 0;
}

/* ===== Delete Confirmation Modal ===== */
.modal-overlay[b-5x8bzengfl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-5x8bzengfl 0.2s ease;
}

.modal-dialog[b-5x8bzengfl] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-5x8bzengfl 0.2s ease;
}

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

.modal-header[b-5x8bzengfl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
}

.modal-body[b-5x8bzengfl] {
    padding: 24px;
}

.modal-body p[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-5x8bzengfl] {
    margin-bottom: 0;
}

.warning-text[b-5x8bzengfl] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-5x8bzengfl] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-5x8bzengfl] {
    flex: 1;
}

.btn-delete[b-5x8bzengfl] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-5x8bzengfl] {
    background-color: #B91C1C;
}

/* ===== Disabled Action Button ===== */
.action-btn:disabled[b-5x8bzengfl],
.action-btn.disabled[b-5x8bzengfl] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Checkbox Label ===== */
.checkbox-label[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    cursor: pointer;
    user-select: none;
}

.checkbox-label .form-checkbox[b-5x8bzengfl] {
    margin-right: 10px;
}

/* ===== Radio Group ===== */
.radio-group[b-5x8bzengfl] {
    display: flex;
    gap: 24px;
}

.radio-label[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    cursor: pointer;
    user-select: none;
}

.radio-label input[type="radio"][b-5x8bzengfl] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: #6C2DA8;
    cursor: pointer;
}

/* ===== Conditional Fields ===== */
.conditional-fields[b-5x8bzengfl] {
    margin-left: 28px;
    padding-left: 16px;
    border-left: 2px solid #EDE6F5;
    margin-bottom: 20px;
}

.entity-info-note[b-5x8bzengfl] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background-color: #F5F0FA;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #6C2DA8;
    line-height: 1.4;
}

.entity-info-note svg[b-5x8bzengfl] {
    flex-shrink: 0;
    margin-top: 1px;
    stroke: #B987F9;
}

/* ===== Detail List ===== */
.detail-list[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-list-item[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background-color: #F6F1FA;
    border-radius: 10px;
}

.detail-list-icon[b-5x8bzengfl] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
}

.detail-list-icon.workshop-icon[b-5x8bzengfl] {
    background-color: #059669;
}

.detail-list-icon.hotel-icon[b-5x8bzengfl] {
    background-color: #0284C7;
}

.detail-list-content[b-5x8bzengfl] {
    flex: 1;
    min-width: 0;
}

.detail-list-title[b-5x8bzengfl] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.detail-list-meta[b-5x8bzengfl] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    margin-top: 2px;
}

/* ===== Sponsor Info ===== */
.sponsor-item[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: #F6F1FA;
    border-radius: 8px;
}

.sponsor-info[b-5x8bzengfl] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sponsor-category[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #6C2DA8;
    font-weight: 500;
}

/* ===== More Text ===== */
.more-text[b-5x8bzengfl] {
    font-size: 12px;
    color: #6C2DA8;
    margin-left: 4px;
}

/* ===== City Autocomplete ===== */
.autocomplete-container[b-5x8bzengfl] {
    position: relative;
}

.autocomplete-dropdown[b-5x8bzengfl] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.autocomplete-item[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.autocomplete-item:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
}

.autocomplete-item:first-child[b-5x8bzengfl] {
    border-radius: 8px 8px 0 0;
}

.autocomplete-item:last-child[b-5x8bzengfl] {
    border-radius: 0 0 8px 8px;
}

.autocomplete-item:only-child[b-5x8bzengfl] {
    border-radius: 8px;
}

.city-icon[b-5x8bzengfl] {
    width: 36px;
    height: 36px;
    background-color: #F6F1FA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6C2DA8;
}

.city-info[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.city-name[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.city-country[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
}

/* ===== Search Select (for Workshops, Hotels, Sponsors) ===== */
.selected-tags[b-5x8bzengfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.selected-tag[b-5x8bzengfl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: #EDE6F5;
    border: 1px solid #B987F9;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #4B3C57;
}

.selected-tag.tag-error[b-5x8bzengfl] {
    background-color: #FEF2F2;
    border-color: #DC2626;
    color: #DC2626;
}

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

.tag-warning[b-5x8bzengfl] {
    color: #DC2626;
    flex-shrink: 0;
}

.remove-tag-btn[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #6C2DA8;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.remove-tag-btn:hover[b-5x8bzengfl] {
    background-color: rgba(108, 45, 168, 0.15);
}

.selected-tag.tag-error .remove-tag-btn[b-5x8bzengfl] {
    color: #DC2626;
}

.selected-tag.tag-error .remove-tag-btn:hover[b-5x8bzengfl] {
    background-color: rgba(220, 38, 38, 0.15);
}

.search-select-container[b-5x8bzengfl] {
    position: relative;
}

.search-select-container.has-error .search-input-wrapper[b-5x8bzengfl] {
    border-color: #DC2626;
}

.search-input-wrapper[b-5x8bzengfl] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon[b-5x8bzengfl] {
    position: absolute;
    left: 14px;
    color: #B987F9;
    pointer-events: none;
}

.search-input-wrapper .form-input.search-input[b-5x8bzengfl] {
    padding-left: 40px;
}

.search-dropdown[b-5x8bzengfl] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-dropdown-item[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.search-dropdown-item:hover[b-5x8bzengfl] {
    background-color: #F6F1FA;
}

.search-dropdown-item:first-child[b-5x8bzengfl] {
    border-radius: 8px 8px 0 0;
}

.search-dropdown-item:last-child[b-5x8bzengfl] {
    border-radius: 0 0 8px 8px;
}

.search-dropdown-item:only-child[b-5x8bzengfl] {
    border-radius: 8px;
}

.dropdown-item-icon[b-5x8bzengfl] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
}

.dropdown-item-icon.workshop-color[b-5x8bzengfl] {
    background-color: #059669;
}

.dropdown-item-icon.hotel-color[b-5x8bzengfl] {
    background-color: #0284C7;
}

.dropdown-item-dot[b-5x8bzengfl] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dropdown-item-info[b-5x8bzengfl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dropdown-item-name[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item-meta[b-5x8bzengfl] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-empty[b-5x8bzengfl] {
    padding: 14px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #B987F9;
    font-style: italic;
}

/* ===== Active Conference Hint ===== */
.active-conference-hint[b-5x8bzengfl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #6C2DA8;
    background-color: #F6F1FA;
    border-radius: 6px;
    margin-top: -8px;
}

.active-conference-hint svg[b-5x8bzengfl] {
    flex-shrink: 0;
    stroke: #B987F9;
}

/* ===== Activation Toast ===== */
.activation-toast[b-5x8bzengfl] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background-color: #059669;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 3000;
    animation: toastSlideIn-b-5x8bzengfl 0.3s ease;
}

.activation-toast svg[b-5x8bzengfl] {
    stroke: #FFFFFF;
    flex-shrink: 0;
}

@keyframes toastSlideIn-b-5x8bzengfl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Side Panel Responsive ===== */
@media screen and (max-width: 500px) {
    .side-panel[b-5x8bzengfl] {
        width: 100%;
        right: -100%;
    }

    .stats-grid[b-5x8bzengfl] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-item[b-5x8bzengfl] {
        padding: 12px 8px;
    }

    .stat-value[b-5x8bzengfl] {
        font-size: 20px;
    }

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

    .earlybird-fields[b-5x8bzengfl] {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-hotel[b-5x8bzengfl],
    .col-earlybird[b-5x8bzengfl] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-5x8bzengfl] {
        padding: var(--spacing-md);
    }

    .conferences-table th[b-5x8bzengfl],
    .conferences-table td[b-5x8bzengfl] {
        padding: 12px 8px;
    }

    .col-workshops[b-5x8bzengfl],
    .col-registrations[b-5x8bzengfl] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-sponsors[b-5x8bzengfl] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-5x8bzengfl] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-5x8bzengfl] {
        width: 100%;
        justify-content: center;
    }

    .conferences-table th[b-5x8bzengfl],
    .conferences-table td[b-5x8bzengfl] {
        padding: 10px 6px;
        font-size: 12px;
    }

    .col-place[b-5x8bzengfl] {
        display: none;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ===== Dashboard Page ===== */
.dashboard-page[b-letkp95kx3] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ===== Page Header ===== */
.page-header[b-letkp95kx3] {
    background-color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-sm);
}

.page-title[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    color: #6C2DA8;
    margin: 0;
    line-height: 1.2;
}

/* ===== Quick Actions ===== */
.quick-actions[b-letkp95kx3] {
    margin-bottom: var(--spacing-md);
}

.quick-actions-scroll[b-letkp95kx3] {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.quick-actions-scroll[b-letkp95kx3]::-webkit-scrollbar {
    height: 6px;
}

.quick-actions-scroll[b-letkp95kx3]::-webkit-scrollbar-track {
    background: transparent;
}

.quick-actions-scroll[b-letkp95kx3]::-webkit-scrollbar-thumb {
    background: var(--color-lavender);
    border-radius: 3px;
}

.quick-action-btn[b-letkp95kx3] {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    background-color: var(--color-white);
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0px;
    white-space: nowrap;
    border: 2px solid #B987F9;
    border-radius: 30px;
    cursor: pointer;
    transition: all var(--transition-normal);
    min-height: 44px;
}

.quick-action-btn:hover[b-letkp95kx3] {
    background-color: #F6F1FA;
    border-color: #6C2DA8;
    color: #6C2DA8;
}

.quick-action-btn:focus-visible[b-letkp95kx3] {
    outline: 2px solid var(--color-purple-accent);
    outline-offset: 2px;
}

.quick-action-btn svg[b-letkp95kx3] {
    flex-shrink: 0;
    stroke: #6C2DA8;
}

/* ===== Dashboard Grid ===== */
.dashboard-grid[b-letkp95kx3] {
    display: grid;
    grid-template-columns: 4fr 5fr 3fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-md);
}

/* ===== Stats Column ===== */
.stats-column[b-letkp95kx3] {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--spacing-md);
}

.stats-row[b-letkp95kx3] {
    display: contents;
}

/* ===== Stat Cards ===== */
.stat-card[b-letkp95kx3] {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.stat-card:hover[b-letkp95kx3] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* -- Top row: icon box + badge icon -- */
.stat-card-top[b-letkp95kx3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-icon-box[b-letkp95kx3] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-box svg[b-letkp95kx3] {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

.stat-icon--teal[b-letkp95kx3] { background-color: #00BA9D; }
.stat-icon--coral[b-letkp95kx3] { background-color: #FF5470; }
.stat-icon--blue[b-letkp95kx3] { background-color: #176CD6; }
.stat-icon--amber[b-letkp95kx3] { background-color: #F6A100; }
.stat-icon--orange[b-letkp95kx3] { background-color: #EF8121; }

.stat-badge-icon[b-letkp95kx3] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-badge-icon svg[b-letkp95kx3] {
    width: 20px;
    height: 20px;
}

.stat-badge-icon--teal svg[b-letkp95kx3] { stroke: rgba(0, 186, 157, 0.35); }
.stat-badge-icon--coral svg[b-letkp95kx3] { stroke: rgba(255, 84, 112, 0.35); }
.stat-badge-icon--blue svg[b-letkp95kx3] { stroke: rgba(23, 108, 214, 0.35); }
.stat-badge-icon--amber svg[b-letkp95kx3] { stroke: rgba(246, 161, 0, 0.35); }
.stat-badge-icon--orange svg[b-letkp95kx3] { stroke: rgba(239, 129, 33, 0.35); }

/* -- Bottom row: label + badge text, then value -- */
.stat-card-bottom[b-letkp95kx3] {
    margin-top: 12px;
}

.stat-info[b-letkp95kx3] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.stat-label[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.stat-value[b-letkp95kx3] {
    display: block;
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    margin-top: 2px;
}

.stat-badge[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.stat-badge--positive[b-letkp95kx3] {
    background-color: rgba(0, 186, 157, 0.12);
    color: #00BA9D;
}

.stat-badge--warning[b-letkp95kx3] {
    background-color: rgba(255, 84, 112, 0.12);
    color: #FF5470;
}

.stat-badge--info[b-letkp95kx3] {
    background-color: rgba(23, 108, 214, 0.12);
    color: #176CD6;
}

.stat-badge--danger[b-letkp95kx3] {
    background-color: rgba(246, 161, 0, 0.12);
    color: #EF8121;
}

/* -- Extra details row -- */
.stat-extra[b-letkp95kx3] {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.stat-extra-item[b-letkp95kx3] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary);
    font-size: 11px;
    color: #9ca3af;
}

.stat-extra-muted[b-letkp95kx3] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.stat-extra-dot[b-letkp95kx3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat-extra-dot--teal[b-letkp95kx3] { background-color: #00BA9D; }
.stat-extra-dot--blue[b-letkp95kx3] { background-color: #176CD6; }
.stat-extra-dot--green[b-letkp95kx3] { background-color: #22c55e; }
.stat-extra-dot--gray[b-letkp95kx3] { background-color: #d1d5db; }
.stat-extra-dot--amber[b-letkp95kx3] { background-color: #F6A100; }

/* -- Mini progress bar -- */
.stat-mini-bar[b-letkp95kx3] {
    height: 4px;
    background-color: #e5e7eb;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.stat-mini-bar-fill[b-letkp95kx3] {
    height: 100%;
    background: linear-gradient(90deg, #F6A100, #EF8121);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ===== Charts Column ===== */
.charts-column[b-letkp95kx3] {
    grid-column: 2;
    grid-row: 1;
}

/* ===== Chart Card ===== */
.chart-card[b-letkp95kx3] {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-header[b-letkp95kx3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.chart-title[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.chart-legend[b-letkp95kx3] {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.legend-item[b-letkp95kx3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-primary);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.legend-dot[b-letkp95kx3] {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    flex-shrink: 0;
}

.legend-item--green .legend-dot[b-letkp95kx3] {
    background-color: var(--color-teal);
}

.legend-item--blue .legend-dot[b-letkp95kx3] {
    background-color: var(--color-blue);
}

.chart-container[b-letkp95kx3] {
    flex: 1;
    min-height: 200px;
    max-height: 280px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.line-chart[b-letkp95kx3] {
    width: 100%;
    height: 100%;
}


/* ===== Sponsors Column ===== */
.sponsors-column[b-letkp95kx3] {
    grid-column: 3;
    grid-row: 1 / 3;
}

.sponsors-card[b-letkp95kx3] {
    height: 100%;
}

.donut-chart-container[b-letkp95kx3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) 0;
}

.donut-chart[b-letkp95kx3] {
    width: 160px;
    height: 160px;
}

.sponsor-legend[b-letkp95kx3] {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.sponsor-legend-item[b-letkp95kx3] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-lavender);
}

.sponsor-legend-item:last-child[b-letkp95kx3] {
    border-bottom: none;
}

.sponsor-dot[b-letkp95kx3] {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-round);
    flex-shrink: 0;
}

.sponsor-dot--gold[b-letkp95kx3] {
    background-color: var(--color-gold);
}

.sponsor-dot--silver[b-letkp95kx3] {
    background-color: var(--color-purple-light);
}

.sponsor-dot--bronze[b-letkp95kx3] {
    background-color: var(--color-orange);
}

.sponsor-dot--logo[b-letkp95kx3] {
    background-color: var(--color-blue);
}

.sponsor-level[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.sponsor-amount[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: right;
}

.sponsor-count[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: var(--color-purple-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Workshops Column ===== */
.workshops-column[b-letkp95kx3] {
    grid-column: 2;
    grid-row: 2;
}

/* ===== Table Card ===== */
.table-card[b-letkp95kx3] {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.table-header[b-letkp95kx3] {
    margin-bottom: var(--spacing-md);
}

.table-title[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.table-container[b-letkp95kx3] {
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.data-table[b-letkp95kx3] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
}

.data-table th[b-letkp95kx3] {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-lavender);
    white-space: nowrap;
}

.data-table td[b-letkp95kx3] {
    padding: var(--spacing-md);
    font-size: 14px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-lavender);
}

.data-table tbody tr:hover[b-letkp95kx3] {
    background-color: var(--color-lavender-light);
}

.workshop-title[b-letkp95kx3] {
    font-weight: 500;
    color: var(--color-text-primary);
    max-width: 300px;
}

.workshop-price[b-letkp95kx3] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.availability-text[b-letkp95kx3] {
    font-weight: 500;
}

/* ===== Table Footer ===== */
.table-footer[b-letkp95kx3] {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-lavender);
}

.seats-summary[b-letkp95kx3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.seats-label[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.seats-progress[b-letkp95kx3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.progress-bar[b-letkp95kx3] {
    flex: 1;
    height: 8px;
    background-color: var(--color-lavender);
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: 200px;
}

.progress-fill[b-letkp95kx3] {
    height: 100%;
    background-color: var(--color-purple-accent);
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
}

.progress-text[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ===== Responsive Styles ===== */

/* Large Desktop (1440px+) */
@media screen and (min-width: 1440px) {
    .dashboard-grid[b-letkp95kx3] {
        grid-template-columns: 4fr 5fr 3fr;
    }
}

/* Desktop (1024px - 1439px) */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .dashboard-grid[b-letkp95kx3] {
        grid-template-columns: 4fr 5fr 3fr;
        gap: var(--spacing-md);
    }

    .stat-value[b-letkp95kx3] {
        font-size: 28px;
    }
}

/* Tablet (768px - 1023px) */
@media screen and (max-width: 1023px) {
    .dashboard-grid[b-letkp95kx3] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .stats-column[b-letkp95kx3] {
        grid-column: span 2;
        grid-row: auto;
    }

    .stats-row[b-letkp95kx3] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .stats-row:last-child[b-letkp95kx3] {
        grid-template-columns: 1fr;
        max-width: 50%;
    }

    .charts-column[b-letkp95kx3] {
        grid-column: span 1;
    }

    .sponsors-column[b-letkp95kx3] {
        grid-column: span 1;
        grid-row: auto;
    }

    .workshops-column[b-letkp95kx3] {
        grid-column: span 2;
    }

    .page-title[b-letkp95kx3] {
        font-size: 32px;
    }
}

/* Mobile (< 768px) */
@media screen and (max-width: 767px) {
    .dashboard-page[b-letkp95kx3] {
        gap: var(--spacing-md);
    }

    .page-title[b-letkp95kx3] {
        font-size: 28px;
    }

    .dashboard-grid[b-letkp95kx3] {
        grid-template-columns: 1fr;
    }

    .stats-column[b-letkp95kx3],
    .charts-column[b-letkp95kx3],
    .sponsors-column[b-letkp95kx3],
    .workshops-column[b-letkp95kx3] {
        grid-column: span 1;
    }

    .stats-row[b-letkp95kx3] {
        grid-template-columns: 1fr;
    }

    .stats-row:last-child[b-letkp95kx3] {
        max-width: 100%;
    }

    .stat-card[b-letkp95kx3] {
        padding: var(--spacing-md);
    }

    .stat-value[b-letkp95kx3] {
        font-size: 28px;
    }

    .chart-header[b-letkp95kx3] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .chart-legend[b-letkp95kx3] {
        gap: var(--spacing-md);
    }

    .sponsor-legend-item[b-letkp95kx3] {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .sponsor-amount[b-letkp95kx3],
    .sponsor-count[b-letkp95kx3] {
        grid-column: 2;
    }

    .data-table th[b-letkp95kx3],
    .data-table td[b-letkp95kx3] {
        padding: var(--spacing-sm);
        font-size: 13px;
    }

    .workshop-title[b-letkp95kx3] {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Small Mobile (< 480px) */
@media screen and (max-width: 479px) {
    .page-title[b-letkp95kx3] {
        font-size: 24px;
    }

    .quick-action-btn[b-letkp95kx3] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 13px;
    }

    .quick-action-btn span[b-letkp95kx3] {
        display: none;
    }

    .quick-action-btn svg[b-letkp95kx3] {
        width: 20px;
        height: 20px;
    }

    .stat-icon-box[b-letkp95kx3] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .stat-icon-box svg[b-letkp95kx3] {
        width: 18px;
        height: 18px;
    }

    .stat-value[b-letkp95kx3] {
        font-size: 24px;
    }

    .stat-badge[b-letkp95kx3] {
        font-size: 10px;
    }

    .chart-card[b-letkp95kx3],
    .table-card[b-letkp95kx3] {
        padding: var(--spacing-md);
    }

    .donut-chart[b-letkp95kx3] {
        width: 140px;
        height: 140px;
    }

    .seats-summary[b-letkp95kx3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .progress-bar[b-letkp95kx3] {
        max-width: none;
        width: 100%;
    }
}

/* ===== No Conference Message ===== */
.no-conference-message[b-letkp95kx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    text-align: center;
    min-height: 300px;
    color: var(--color-text-secondary);
}

.no-conference-message svg[b-letkp95kx3] {
    opacity: 0.4;
    stroke: var(--color-purple-light);
}

.no-conference-message h2[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.no-conference-message p[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 14px;
    margin: 0;
}

/* ===== Chart Empty State ===== */
.chart-empty[b-letkp95kx3] {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--spacing-lg);
}

.chart-empty-block[b-letkp95kx3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Loading Skeleton ===== */
.skeleton-card[b-letkp95kx3] {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.skeleton-block[b-letkp95kx3] {
    background: linear-gradient(90deg, var(--color-lavender) 25%, #f0ecf5 50%, var(--color-lavender) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-letkp95kx3 1.5s infinite ease-in-out;
    border-radius: var(--radius-sm);
}

.skeleton-icon[b-letkp95kx3] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
}

.skeleton-text-lg[b-letkp95kx3] {
    width: 60%;
    height: 32px;
}

.skeleton-chart[b-letkp95kx3] {
    width: 100%;
    height: 160px;
}

.skeleton-table[b-letkp95kx3] {
    width: 100%;
    height: 120px;
}

@keyframes skeleton-shimmer-b-letkp95kx3 {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
/* /Pages/EventRegistrations.razor.rz.scp.css */
/* ===== Registrations Page ===== */
.registrations-page[b-yigiehegxu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-yigiehegxu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-yigiehegxu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-yigiehegxu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-yigiehegxu] {
    color: #5D2A8C;
}

.title-row[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.page-subtitle[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Category Badge ===== */
.category-badge[b-yigiehegxu] {
    display: inline-block;
    padding: 4px 12px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 16px;
}

/* ===== Filters Bar ===== */
.filters-bar[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-yigiehegxu] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-yigiehegxu] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-yigiehegxu] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-yigiehegxu] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-yigiehegxu]::placeholder {
    color: #B987F9;
}

.clear-search[b-yigiehegxu] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search:hover[b-yigiehegxu] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

/* ===== Filter Chips ===== */
.filter-chips[b-yigiehegxu] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.filter-chip[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #F6F1FA;
    border: 2px solid transparent;
    border-radius: 24px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-yigiehegxu] {
    background-color: #EDE6F5;
}

.filter-chip.active[b-yigiehegxu] {
    background-color: #6C2DA8;
    border-color: #6C2DA8;
}

.filter-chip.active .chip-label[b-yigiehegxu] {
    color: #FFFFFF;
}

.filter-chip.status-paid.active[b-yigiehegxu] {
    background-color: #03543F;
    border-color: #03543F;
}

.filter-chip.status-pending.active[b-yigiehegxu] {
    background-color: #92400E;
    border-color: #92400E;
}

.filter-chip.status-refunded.active[b-yigiehegxu] {
    background-color: #991B1B;
    border-color: #991B1B;
}

.chip-label[b-yigiehegxu] {
    font-size: 14px;
    font-weight: 500;
    color: #4B3C57;
}

.chip-count[b-yigiehegxu] {
    font-size: 12px;
    font-weight: 700;
    color: #6C2DA8;
    background-color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.filter-chip.status-paid .chip-count[b-yigiehegxu] {
    color: #03543F;
}

.filter-chip.status-pending .chip-count[b-yigiehegxu] {
    color: #92400E;
}

.filter-chip.status-refunded .chip-count[b-yigiehegxu] {
    color: #991B1B;
}

/* ===== Table Card ===== */
.table-card[b-yigiehegxu] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 0;
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Registrations Table ===== */
.registrations-table[b-yigiehegxu] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.registrations-table thead tr[b-yigiehegxu] {
    background-color: #F6F1FA;
}

.registrations-table th[b-yigiehegxu] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.registrations-table th.sortable[b-yigiehegxu] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.registrations-table th.sortable:hover[b-yigiehegxu] {
    background-color: #EDE6F5;
}

.registrations-table th.sortable span[b-yigiehegxu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-icon[b-yigiehegxu] {
    transition: transform 0.2s ease;
}

.sort-icon.desc[b-yigiehegxu] {
    transform: rotate(180deg);
}

.registrations-table tbody tr[b-yigiehegxu] {
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.2s ease;
}

.registrations-table tbody tr:last-child[b-yigiehegxu] {
    border-bottom: none;
}

.registrations-table tbody tr:hover[b-yigiehegxu] {
    background-color: #F6F1FA;
}

.registrations-table td[b-yigiehegxu] {
    padding: 14px 16px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-name[b-yigiehegxu] {
    width: 22%;
}

.name-cell[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendee-avatar[b-yigiehegxu] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.attendee-name[b-yigiehegxu] {
    font-weight: 600;
    color: #1D0F29;
}

.col-email[b-yigiehegxu] {
    width: 22%;
}

.email-link[b-yigiehegxu] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-yigiehegxu] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-organization[b-yigiehegxu] {
    width: 18%;
}

.col-date[b-yigiehegxu] {
    width: 14%;
}

.col-status[b-yigiehegxu] {
    width: 10%;
}

.col-amount[b-yigiehegxu] {
    width: 10%;
    font-weight: 600;
}

.col-actions[b-yigiehegxu] {
    width: 6%;
    text-align: center;
}

.empty-text[b-yigiehegxu] {
    color: #B987F9;
    font-style: italic;
}

/* ===== Status Badge ===== */
.status-badge[b-yigiehegxu] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-paid[b-yigiehegxu] {
    background-color: #DEF7EC;
    color: #03543F;
}

.status-badge.status-pending[b-yigiehegxu] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-refunded[b-yigiehegxu] {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* ===== Action Button ===== */
.action-btn[b-yigiehegxu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-btn:hover[b-yigiehegxu] {
    background-color: #EDE6F5;
}

/* ===== Empty State ===== */
.empty-state[b-yigiehegxu] {
    text-align: center;
    padding: 60px 20px !important;
    color: #4B3C57;
}

.empty-state svg[b-yigiehegxu] {
    margin-bottom: 16px;
}

.empty-state p[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
}

.btn-clear-filters[b-yigiehegxu] {
    padding: 10px 20px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-clear-filters:hover[b-yigiehegxu] {
    background-color: #EDE6F5;
}

/* ===== Pagination ===== */
.pagination[b-yigiehegxu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.pagination-controls[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn[b-yigiehegxu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: transparent;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-yigiehegxu] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.page-btn.active[b-yigiehegxu] {
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-color: #6C2DA8;
}

.page-btn:disabled[b-yigiehegxu] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-ellipsis[b-yigiehegxu] {
    padding: 0 8px;
    color: #4B3C57;
}

.page-size-selector[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size-selector label[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.page-size-selector select[b-yigiehegxu] {
    padding: 8px 28px 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ===== Side Panel ===== */
.panel-overlay[b-yigiehegxu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-yigiehegxu 0.2s ease;
}

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

.side-panel[b-yigiehegxu] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-yigiehegxu] {
    right: 0;
}

.panel-header[b-yigiehegxu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-yigiehegxu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-yigiehegxu] {
    background-color: #F6F1FA;
}

.panel-content[b-yigiehegxu] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.attendee-header-section[b-yigiehegxu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.attendee-avatar-large[b-yigiehegxu] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.attendee-name-large[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
}

.attendee-status-badge[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attendee-status-badge.status-paid[b-yigiehegxu] {
    background-color: #DEF7EC;
    color: #03543F;
}

.attendee-status-badge.status-pending[b-yigiehegxu] {
    background-color: #FEF3C7;
    color: #92400E;
}

.attendee-status-badge.status-refunded[b-yigiehegxu] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.detail-section[b-yigiehegxu] {
    margin-bottom: 20px;
}

.detail-section.half[b-yigiehegxu] {
    flex: 1;
}

.detail-row[b-yigiehegxu] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-yigiehegxu] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-description[b-yigiehegxu] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

.price-value[b-yigiehegxu] {
    font-size: 18px;
    font-weight: 700;
    color: #6C2DA8;
}

.contact-link[b-yigiehegxu] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-yigiehegxu] {
    color: #5D2A8C;
}

.contact-link svg[b-yigiehegxu] {
    flex-shrink: 0;
}

.panel-footer[b-yigiehegxu] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-close-panel[b-yigiehegxu] {
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-panel:hover[b-yigiehegxu] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1200px) {
    .col-organization[b-yigiehegxu] {
        display: none;
    }

    .filter-chips[b-yigiehegxu] {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 1000px) {
    .col-amount[b-yigiehegxu] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .filters-bar[b-yigiehegxu] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-yigiehegxu] {
        max-width: 100%;
    }

    .filter-chips[b-yigiehegxu] {
        margin-left: 0;
        justify-content: flex-start;
    }

    .pagination[b-yigiehegxu] {
        flex-direction: column;
        align-items: center;
    }

    .col-date[b-yigiehegxu] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-yigiehegxu] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/Events.razor.rz.scp.css */
/* ===== Events Page ===== */
.events-page[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-qn7261dy4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-qn7261dy4x] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-qn7261dy4x] {
    background-color: #5D2A8C;
}

.btn-add svg[b-qn7261dy4x] {
    stroke: #FFFFFF;
}

/* ===== Table Card ===== */
.table-card[b-qn7261dy4x] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Events Table ===== */
.events-table[b-qn7261dy4x] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.events-table thead tr[b-qn7261dy4x] {
    border-bottom: 2px solid #EDE6F5;
}

.events-table th[b-qn7261dy4x] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.events-table tbody tr[b-qn7261dy4x] {
    border-bottom: 1px solid #EDE6F5;
}

.events-table tbody tr:last-child[b-qn7261dy4x] {
    border-bottom: none;
}

.events-table tbody tr:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

.events-table td[b-qn7261dy4x] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-checkbox[b-qn7261dy4x] {
    width: 3%;
    text-align: center;
}

.col-checkbox input[type="checkbox"][b-qn7261dy4x] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6C2DA8;
}

.col-title[b-qn7261dy4x] {
    width: 15%;
    font-weight: 600;
    color: #1D0F29;
}

.col-description[b-qn7261dy4x] {
    width: 22%;
}

.description-text[b-qn7261dy4x] {
    color: #4B3C57;
    line-height: 1.5;
}

.col-category[b-qn7261dy4x] {
    width: 9%;
}

.col-datetime[b-qn7261dy4x] {
    width: 10%;
}

.datetime-cell[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-value[b-qn7261dy4x] {
    font-weight: 500;
    color: #1D0F29;
}

.time-value[b-qn7261dy4x] {
    font-size: 13px;
    color: #4B3C57;
}

.col-ceus[b-qn7261dy4x] {
    width: 6%;
}


.col-speakers[b-qn7261dy4x] {
    width: 11%;
}

.col-chairs[b-qn7261dy4x] {
    width: 10%;
}

.speakers-list-compact[b-qn7261dy4x] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.speakers-list-compact li[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.speaker-dot[b-qn7261dy4x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6C2DA8;
    flex-shrink: 0;
}

.chair-dot[b-qn7261dy4x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00BA9D;
    flex-shrink: 0;
}

.speaker-short-name[b-qn7261dy4x] {
    font-size: 12px;
    color: #4B3C57;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-actions[b-qn7261dy4x] {
    width: 7%;
    text-align: left;
}

/* ===== Empty State ===== */
.empty-text[b-qn7261dy4x] {
    color: #B987F9;
    font-style: italic;
    font-size: 13px;
}

.empty-dash[b-qn7261dy4x] {
    color: #B987F9;
    font-size: 14px;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-qn7261dy4x] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-qn7261dy4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover:not(:disabled)[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

.action-btn:disabled[b-qn7261dy4x],
.action-btn.disabled[b-qn7261dy4x] {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-btn img[b-qn7261dy4x] {
    width: 14px;
    height: 14px;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-qn7261dy4x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-qn7261dy4x 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-qn7261dy4x] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-qn7261dy4x] {
    right: 0;
}

.panel-header[b-qn7261dy4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

.panel-content[b-qn7261dy4x] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.event-detail-section[b-qn7261dy4x] {
    margin-bottom: 20px;
}

.event-detail-section.half[b-qn7261dy4x] {
    flex: 1;
}

.event-detail-row[b-qn7261dy4x] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-qn7261dy4x] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-title[b-qn7261dy4x] {
    font-size: 18px;
    font-weight: 600;
    color: #1D0F29;
}

.detail-description[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

.category-badge[b-qn7261dy4x] {
    display: inline-block;
    padding: 6px 14px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
}

.speakers-list[b-qn7261dy4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.speaker-tag[b-qn7261dy4x] {
    display: inline-block;
    padding: 6px 12px;
    background-color: #EDE6F5;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    border-radius: 6px;
}

.panel-footer[b-qn7261dy4x] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-edit-panel[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-qn7261dy4x] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-qn7261dy4x] {
    filter: brightness(0) invert(1);
}

/* ===== Clickable Speakers in Table ===== */
.speaker-item-clickable[b-qn7261dy4x] {
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.speaker-item-clickable:hover[b-qn7261dy4x] {
    background-color: #EDE6F5;
}

.speaker-item-clickable:hover .speaker-short-name[b-qn7261dy4x] {
    color: #6C2DA8;
}

.more-speakers[b-qn7261dy4x] {
    font-size: 11px;
    color: #6C2DA8;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.more-speakers:hover[b-qn7261dy4x] {
    background-color: #EDE6F5;
}

/* ===== Panel Back Button ===== */
.panel-back-btn[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #6C2DA8;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-right: 8px;
}

.panel-back-btn:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

/* ===== Speakers Detail List ===== */
.speakers-detail-list[b-qn7261dy4x] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.speaker-detail-item[b-qn7261dy4x],
.chair-detail-item[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background-color: #F6F1FA;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.speaker-detail-item:hover[b-qn7261dy4x],
.chair-detail-item:hover[b-qn7261dy4x] {
    background-color: #EDE6F5;
}

.speaker-avatar-small[b-qn7261dy4x] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.chair-avatar-small[b-qn7261dy4x] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #00BA9D;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.speaker-detail-item .speaker-name[b-qn7261dy4x],
.chair-detail-item .chair-name[b-qn7261dy4x] {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
}

.speaker-chevron[b-qn7261dy4x] {
    color: #B987F9;
    flex-shrink: 0;
}

/* ===== Speaker Header Section ===== */
.speaker-header-section[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.speaker-avatar-large[b-qn7261dy4x] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.speaker-name-large[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 8px 0;
}

.speaker-title[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Contact Link ===== */
.contact-link[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-qn7261dy4x] {
    color: #5D2A8C;
}

.contact-link svg[b-qn7261dy4x] {
    flex-shrink: 0;
}

/* ===== Detail Link ===== */
.detail-link[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-link:hover[b-qn7261dy4x] {
    color: #5D2A8C;
    text-decoration: underline;
}

/* ===== View All Speakers Button ===== */
.btn-view-all-speakers[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-all-speakers:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

/* ===== Form Styles ===== */
.form-group[b-qn7261dy4x] {
    margin-bottom: 20px;
}

.form-group.half[b-qn7261dy4x] {
    flex: 1;
}

.form-row[b-qn7261dy4x] {
    display: flex;
    gap: 16px;
}

.form-label[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-label-small[b-qn7261dy4x] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6C2DA8;
    margin-bottom: 6px;
}

.timezone-badge[b-qn7261dy4x] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background-color: #EDE6F5;
    color: #6C2DA8;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.form-group.no-margin[b-qn7261dy4x] {
    margin-bottom: 0;
}

.form-input[b-qn7261dy4x],
.form-select[b-qn7261dy4x] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-qn7261dy4x],
.form-select:focus[b-qn7261dy4x] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-qn7261dy4x]::placeholder {
    color: #B987F9;
}

.form-input.input-error[b-qn7261dy4x],
.form-select.input-error[b-qn7261dy4x] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.form-select[b-qn7261dy4x] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* ===== Quill Editor ===== */
.quill-wrapper[b-qn7261dy4x] {
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    overflow: hidden;
    background-color: #FAF5FF;
    transition: all 0.2s ease;
}

.quill-wrapper:focus-within[b-qn7261dy4x] {
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

[b-qn7261dy4x] .ql-toolbar {
    border: none !important;
    border-bottom: 1px solid #EDE6F5 !important;
    background-color: #F3EDFA;
    font-size: 14px;
}

[b-qn7261dy4x] .ql-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Roboto', sans-serif;
    padding: 12px 14px;
}

[b-qn7261dy4x] .ql-editor.ql-blank::before {
    color: #B987F9;
    font-style: normal;
}

.error-message[b-qn7261dy4x] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

/* ===== Multi-Input Editor ===== */
.multi-input-editor[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multi-input-row[b-qn7261dy4x] {
    display: flex;
    gap: 8px;
}

.multi-input-row .form-input[b-qn7261dy4x] {
    flex: 1;
}

.btn-remove-item[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #FEE2E2;
    border: none;
    border-radius: 8px;
    color: #DC2626;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-item:hover[b-qn7261dy4x] {
    background-color: #FECACA;
}

.btn-add-item[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: transparent;
    border: 1px dashed #B987F9;
    border-radius: 8px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-item:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
    border-color: #6C2DA8;
}

/* ===== Speaker Entry Block ===== */
.speaker-entry-block[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    padding: 8px;
    transition: all 0.2s ease;
}

.speaker-entry-block.expanded[b-qn7261dy4x] {
    background-color: #FDFAFF;
    border-color: #D4BEF0;
}

.speaker-entry-block.collapsed[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

.speaker-entry-block.collapsed:hover[b-qn7261dy4x] {
    background-color: #EDE6F5;
}

/* ===== Expand/Collapse Button ===== */
.speaker-expand-btn[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6C2DA8;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.speaker-expand-btn:hover[b-qn7261dy4x] {
    background-color: #EDE6F5;
}

.speaker-expand-btn svg[b-qn7261dy4x] {
    transition: transform 0.2s ease;
}

.speaker-expand-btn.expanded svg[b-qn7261dy4x] {
    transform: rotate(90deg);
}

/* ===== Collapsed Speaker Name ===== */
.speaker-collapsed-name[b-qn7261dy4x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    padding: 8px 4px;
    min-width: 0;
}

.speaker-collapsed-name span:first-child[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speaker-collapsed-topic[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Speaker Details Fields ===== */
.speaker-details-fields[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.speaker-topic-input[b-qn7261dy4x] {
    margin-left: 0;
    font-size: 13px !important;
    padding: 8px 14px !important;
}

.speaker-abstract-input[b-qn7261dy4x] {
    font-size: 13px !important;
    padding: 8px 14px !important;
    resize: vertical;
    min-height: 120px;
    max-height: 400px;
    line-height: 1.5;
}

.char-counter[b-qn7261dy4x] {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #9B7DB8;
    margin-top: 4px;
    font-family: 'Roboto', sans-serif;
}

.speaker-detail-info[b-qn7261dy4x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.speaker-topic[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    font-style: italic;
}

.speaker-abstract[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #6B5C78;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Autocomplete ===== */
.autocomplete-row[b-qn7261dy4x] {
    display: flex;
    gap: 8px;
}

.autocomplete-wrapper[b-qn7261dy4x] {
    position: relative;
    flex: 1;
}

.autocomplete-dropdown[b-qn7261dy4x] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.autocomplete-item[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.autocomplete-item:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

.autocomplete-item:first-child[b-qn7261dy4x] {
    border-radius: 8px 8px 0 0;
}

.autocomplete-item:last-child[b-qn7261dy4x] {
    border-radius: 0 0 8px 8px;
}

.autocomplete-item:only-child[b-qn7261dy4x] {
    border-radius: 8px;
}

.autocomplete-avatar[b-qn7261dy4x] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.autocomplete-avatar.chair-avatar[b-qn7261dy4x] {
    background-color: #00BA9D;
}

.autocomplete-avatar.create-avatar[b-qn7261dy4x] {
    background-color: #F6F1FA;
    color: #6C2DA8;
}

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

.autocomplete-name[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-org[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item.create-new[b-qn7261dy4x] {
    border-top: 1px solid #EDE6F5;
}

.autocomplete-item.create-new .autocomplete-name[b-qn7261dy4x] {
    color: #6C2DA8;
}

.autocomplete-item.create-new .autocomplete-org[b-qn7261dy4x] {
    color: #B987F9;
}

.autocomplete-empty[b-qn7261dy4x] {
    padding: 16px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #B987F9;
    font-style: italic;
}

/* ===== Form Footer ===== */
.form-footer[b-qn7261dy4x] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-qn7261dy4x] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-qn7261dy4x] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-qn7261dy4x] {
    background-color: #5D2A8C;
}

/* ===== Delete Confirmation Modal ===== */
.modal-overlay[b-qn7261dy4x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-qn7261dy4x 0.2s ease;
}

.modal-dialog[b-qn7261dy4x] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-qn7261dy4x 0.2s ease;
}

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

.modal-header[b-qn7261dy4x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-qn7261dy4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-qn7261dy4x] {
    background-color: #F6F1FA;
}

.modal-body[b-qn7261dy4x] {
    padding: 24px;
}

.modal-body p[b-qn7261dy4x] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-qn7261dy4x] {
    margin-bottom: 0;
}

.warning-text[b-qn7261dy4x] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-qn7261dy4x] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-qn7261dy4x] {
    flex: 1;
}

.btn-delete[b-qn7261dy4x] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-qn7261dy4x] {
    background-color: #B91C1C;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-description[b-qn7261dy4x] {
        width: 18%;
    }

    .col-chairs[b-qn7261dy4x] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-qn7261dy4x] {
        padding: var(--spacing-md);
    }

    .events-table th[b-qn7261dy4x],
    .events-table td[b-qn7261dy4x] {
        padding: 12px 8px;
    }

    .col-ceus[b-qn7261dy4x] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-description[b-qn7261dy4x] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-qn7261dy4x] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-qn7261dy4x] {
        width: 100%;
        justify-content: center;
    }

    .events-table th[b-qn7261dy4x],
    .events-table td[b-qn7261dy4x] {
        padding: 10px 6px;
        font-size: 12px;
    }

    .col-speakers[b-qn7261dy4x] {
        display: none;
    }
}

/* ===== Translation Language Bar ===== */
.translation-lang-bar[b-qn7261dy4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #F9F5FF;
    border: 1px solid #EDE6F5;
    border-radius: 6px;
    margin-bottom: 12px;
}

.translation-lang-tab[b-qn7261dy4x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8B7A9E;
    background: #fff;
    border: 1px solid #E0D4ED;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.translation-lang-tab:hover[b-qn7261dy4x] {
    color: #6C2DA8;
    border-color: #B987F9;
}

.translation-lang-tab-active[b-qn7261dy4x] {
    color: #fff;
    background: #6C2DA8;
    border-color: #6C2DA8;
    font-weight: 600;
}

.translation-lang-badge[b-qn7261dy4x] {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: lowercase;
}

/* ===== Drag-and-drop reorder (chairs + speakers in the event form) ===== */
.drag-handle[b-qn7261dy4x] {
    cursor: grab;
    color: #B987F9;
    font-size: 18px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.drag-handle:hover[b-qn7261dy4x] {
    color: #6C2DA8;
    background-color: #F6F1FA;
}

.drag-handle:active[b-qn7261dy4x] {
    cursor: grabbing;
}

[b-qn7261dy4x] .sortable-ghost {
    opacity: 0.4;
    background-color: #EDE6F5;
}

[b-qn7261dy4x] .sortable-chosen {
    background-color: #F6F1FA;
}

/* ===== Side Panel Responsive ===== */
@media screen and (max-width: 500px) {
    .side-panel[b-qn7261dy4x] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/HotelBookings.razor.rz.scp.css */
/* ===== Bookings Page ===== */
.bookings-page[b-zek9djlzwx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-zek9djlzwx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-zek9djlzwx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-zek9djlzwx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-zek9djlzwx] {
    color: #5D2A8C;
}

.page-title[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.page-subtitle[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Filters Bar ===== */
.filters-bar[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-zek9djlzwx] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-zek9djlzwx] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-zek9djlzwx] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-zek9djlzwx] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-zek9djlzwx]::placeholder {
    color: #B987F9;
}

.clear-search[b-zek9djlzwx] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search:hover[b-zek9djlzwx] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

/* ===== Filter Chips ===== */
.filter-chips[b-zek9djlzwx] {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.filter-chip[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #F6F1FA;
    border: 2px solid transparent;
    border-radius: 24px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-zek9djlzwx] {
    background-color: #EDE6F5;
}

.filter-chip.active[b-zek9djlzwx] {
    background-color: #6C2DA8;
    border-color: #6C2DA8;
}

.filter-chip.active .chip-label[b-zek9djlzwx] {
    color: #FFFFFF;
}

.filter-chip.status-confirmed.active[b-zek9djlzwx],
.filter-chip.status-paid.active[b-zek9djlzwx] {
    background-color: #03543F;
    border-color: #03543F;
}

.filter-chip.status-pending.active[b-zek9djlzwx] {
    background-color: #92400E;
    border-color: #92400E;
}

.filter-chip.status-checkedin.active[b-zek9djlzwx] {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
}

.filter-chip.status-cancelled.active[b-zek9djlzwx],
.filter-chip.status-failed.active[b-zek9djlzwx] {
    background-color: #991B1B;
    border-color: #991B1B;
}

.filter-chip.status-refunded.active[b-zek9djlzwx] {
    background-color: #6B21A8;
    border-color: #6B21A8;
}

.chip-label[b-zek9djlzwx] {
    font-size: 14px;
    font-weight: 500;
    color: #4B3C57;
}

.chip-count[b-zek9djlzwx] {
    font-size: 12px;
    font-weight: 700;
    color: #6C2DA8;
    background-color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.filter-chip.status-confirmed .chip-count[b-zek9djlzwx],
.filter-chip.status-paid .chip-count[b-zek9djlzwx] {
    color: #03543F;
}

.filter-chip.status-pending .chip-count[b-zek9djlzwx] {
    color: #92400E;
}

.filter-chip.status-checkedin .chip-count[b-zek9djlzwx] {
    color: #1D4ED8;
}

.filter-chip.status-cancelled .chip-count[b-zek9djlzwx],
.filter-chip.status-failed .chip-count[b-zek9djlzwx] {
    color: #991B1B;
}

.filter-chip.status-refunded .chip-count[b-zek9djlzwx] {
    color: #6B21A8;
}

/* ===== Table Card ===== */
.table-card[b-zek9djlzwx] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 0;
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Bookings Table ===== */
.bookings-table[b-zek9djlzwx] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.bookings-table thead tr[b-zek9djlzwx] {
    background-color: #F6F1FA;
}

.bookings-table th[b-zek9djlzwx] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.bookings-table th.sortable[b-zek9djlzwx] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.bookings-table th.sortable:hover[b-zek9djlzwx] {
    background-color: #EDE6F5;
}

.bookings-table th.sortable span[b-zek9djlzwx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-icon[b-zek9djlzwx] {
    transition: transform 0.2s ease;
}

.sort-icon.desc[b-zek9djlzwx] {
    transform: rotate(180deg);
}

.bookings-table tbody tr[b-zek9djlzwx] {
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.2s ease;
}

.bookings-table tbody tr:last-child[b-zek9djlzwx] {
    border-bottom: none;
}

.bookings-table tbody tr:hover[b-zek9djlzwx] {
    background-color: #F6F1FA;
}

.bookings-table td[b-zek9djlzwx] {
    padding: 14px 16px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-guest[b-zek9djlzwx] {
    width: 18%;
}

.guest-cell[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-initials[b-zek9djlzwx] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.guest-name[b-zek9djlzwx] {
    font-weight: 600;
    color: #1D0F29;
}

.col-email[b-zek9djlzwx] {
    width: 18%;
}

.email-link[b-zek9djlzwx] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-zek9djlzwx] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-dates[b-zek9djlzwx] {
    width: 15%;
}

.dates-cell[b-zek9djlzwx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-range[b-zek9djlzwx] {
    font-weight: 500;
    color: #1D0F29;
}

.col-nights[b-zek9djlzwx] {
    width: 7%;
    text-align: center;
}

.nights-badge[b-zek9djlzwx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 13px;
}

.col-room[b-zek9djlzwx] {
    width: 12%;
}

.col-guests[b-zek9djlzwx] {
    width: 7%;
    text-align: center;
}

.col-status[b-zek9djlzwx] {
    width: 10%;
}

.col-total[b-zek9djlzwx] {
    width: 8%;
}

.total-value[b-zek9djlzwx] {
    font-weight: 600;
    color: #1D0F29;
}

.col-actions[b-zek9djlzwx] {
    width: 5%;
    text-align: center;
}

.empty-text[b-zek9djlzwx] {
    color: #B987F9;
    font-style: italic;
}

/* ===== Status Badge ===== */
.status-badge[b-zek9djlzwx] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-confirmed[b-zek9djlzwx],
.status-badge.status-paid[b-zek9djlzwx] {
    background-color: #DEF7EC;
    color: #03543F;
}

.status-badge.status-pending[b-zek9djlzwx] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-checkedin[b-zek9djlzwx] {
    background-color: #DBEAFE;
    color: #1D4ED8;
}

.status-badge.status-cancelled[b-zek9djlzwx],
.status-badge.status-failed[b-zek9djlzwx] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.status-badge.status-refunded[b-zek9djlzwx] {
    background-color: #E9D5FF;
    color: #6B21A8;
}

.status-badge.status-disputed[b-zek9djlzwx] {
    background-color: #FEF3C7;
    color: #92400E;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.action-btn[b-zek9djlzwx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-btn:hover[b-zek9djlzwx] {
    background-color: #EDE6F5;
}

/* ===== Empty State ===== */
.empty-state[b-zek9djlzwx] {
    text-align: center;
    padding: 60px 20px !important;
    color: #4B3C57;
}

.empty-state svg[b-zek9djlzwx] {
    margin-bottom: 16px;
}

.empty-state p[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
}

.btn-clear-filters[b-zek9djlzwx] {
    padding: 10px 20px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-clear-filters:hover[b-zek9djlzwx] {
    background-color: #EDE6F5;
}

/* ===== Pagination ===== */
.pagination[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.pagination-controls[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: transparent;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-zek9djlzwx] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.page-btn.active[b-zek9djlzwx] {
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-color: #6C2DA8;
}

.page-btn:disabled[b-zek9djlzwx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-ellipsis[b-zek9djlzwx] {
    padding: 0 8px;
    color: #4B3C57;
}

.page-size-selector[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size-selector label[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.page-size-selector select[b-zek9djlzwx] {
    padding: 8px 28px 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ===== Side Panel ===== */
.panel-overlay[b-zek9djlzwx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-zek9djlzwx 0.2s ease;
}

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

.side-panel[b-zek9djlzwx] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: #FFFFFF;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-zek9djlzwx] {
    right: 0;
}

.panel-header[b-zek9djlzwx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.panel-close-btn[b-zek9djlzwx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.panel-close-btn:hover[b-zek9djlzwx] {
    background-color: #F6F1FA;
    color: #6C2DA8;
}

.panel-content[b-zek9djlzwx] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-zek9djlzwx] {
    padding: 16px 24px;
    border-top: 1px solid #EDE6F5;
    background-color: #F9F5FD;
    flex-shrink: 0;
}

/* ===== Panel Content Styles ===== */
.booking-header-section[b-zek9djlzwx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #EDE6F5;
}

.guest-avatar-large[b-zek9djlzwx] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.guest-name-large[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
}

.booking-status-badge[b-zek9djlzwx] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.booking-status-badge.status-confirmed[b-zek9djlzwx] {
    background-color: #DEF7EC;
    color: #03543F;
}

.booking-status-badge.status-pending[b-zek9djlzwx] {
    background-color: #FEF3C7;
    color: #92400E;
}

.booking-status-badge.status-checkedin[b-zek9djlzwx] {
    background-color: #DBEAFE;
    color: #1D4ED8;
}

.booking-status-badge.status-cancelled[b-zek9djlzwx] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.detail-section[b-zek9djlzwx] {
    margin-bottom: 20px;
}

.detail-label[b-zek9djlzwx] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.detail-value[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #1D0F29;
    margin: 0;
}

.confirmation-number[b-zek9djlzwx] {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #6C2DA8;
    background-color: #F6F1FA;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

.contact-link[b-zek9djlzwx] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    transition: color 0.2s ease;
}

.contact-link:hover[b-zek9djlzwx] {
    color: #5D2A8C;
}

.detail-row[b-zek9djlzwx] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-section.half[b-zek9djlzwx] {
    flex: 1;
    margin-bottom: 0;
}

.detail-description[b-zek9djlzwx] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4B3C57;
    margin: 0;
    background-color: #F6F1FA;
    padding: 12px;
    border-radius: 8px;
}

/* ===== Price Summary ===== */
.price-summary[b-zek9djlzwx] {
    background-color: #F6F1FA;
    border-radius: 8px;
    padding: 16px;
}

.price-row[b-zek9djlzwx] {
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    padding: 8px 0;
}

.price-row:first-child[b-zek9djlzwx] {
    padding-top: 0;
}

.price-row.total[b-zek9djlzwx] {
    border-top: 1px solid #EDE6F5;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    color: #1D0F29;
    font-size: 16px;
}

/* ===== Footer Button ===== */
.btn-close-panel[b-zek9djlzwx] {
    width: 100%;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-close-panel:hover[b-zek9djlzwx] {
    background-color: #5D2A8C;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .filter-chips[b-zek9djlzwx] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .page-header[b-zek9djlzwx] {
        padding: 16px;
    }

    .page-title[b-zek9djlzwx] {
        font-size: 20px;
    }

    .filters-bar[b-zek9djlzwx] {
        padding: 12px 16px;
    }

    .search-box[b-zek9djlzwx] {
        min-width: 100%;
        max-width: 100%;
    }

    .filter-chips[b-zek9djlzwx] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chip[b-zek9djlzwx] {
        flex-shrink: 0;
    }

    .table-card[b-zek9djlzwx] {
        overflow-x: auto;
    }

    .bookings-table[b-zek9djlzwx] {
        min-width: 900px;
    }

    .side-panel[b-zek9djlzwx] {
        width: 100%;
        right: -100%;
    }

    .pagination[b-zek9djlzwx] {
        padding: 12px 16px;
    }

    .pagination-info[b-zek9djlzwx] {
        width: 100%;
        text-align: center;
    }

    .pagination-controls[b-zek9djlzwx] {
        width: 100%;
        justify-content: center;
    }

    .page-size-selector[b-zek9djlzwx] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Hotels.razor.rz.scp.css */
/* ===== Hotels Page ===== */
.hotels-page[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-ud6rep0om4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-ud6rep0om4] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-ud6rep0om4] {
    background-color: #5D2A8C;
}

.btn-add svg[b-ud6rep0om4] {
    stroke: #FFFFFF;
}

/* ===== Table Card ===== */
.table-card[b-ud6rep0om4] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Hotels Table ===== */
.hotels-table[b-ud6rep0om4] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.hotels-table thead tr[b-ud6rep0om4] {
    border-bottom: 2px solid #EDE6F5;
}

.hotels-table th[b-ud6rep0om4] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hotels-table tbody tr[b-ud6rep0om4] {
    border-bottom: 1px solid #EDE6F5;
}

.hotels-table tbody tr:last-child[b-ud6rep0om4] {
    border-bottom: none;
}

.hotels-table tbody tr:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
}

.hotels-table td[b-ud6rep0om4] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-checkbox[b-ud6rep0om4] {
    width: 3%;
    text-align: center;
}

.col-checkbox input[type="checkbox"][b-ud6rep0om4] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6C2DA8;
}

.col-name[b-ud6rep0om4] {
    width: 18%;
}

.col-location[b-ud6rep0om4] {
    width: 22%;
}

.col-rooms[b-ud6rep0om4] {
    width: 14%;
}

.col-rating[b-ud6rep0om4] {
    width: 10%;
}

.col-bookings[b-ud6rep0om4] {
    width: 14%;
}

/* ===== Seats/Bookings Pill (mirrors Workshops page) ===== */
.seats-link[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.seats-link.seats-full[b-ud6rep0om4] { background-color: #D1FAE5; }
.seats-link.seats-full:hover[b-ud6rep0om4] { background-color: #A7F3D0; }
.seats-link.seats-full .seats-count[b-ud6rep0om4] { color: #047857; }
.seats-link.seats-full .seats-label[b-ud6rep0om4] { color: #065F46; }

.seats-link.seats-mid[b-ud6rep0om4] { background-color: #DBEAFE; }
.seats-link.seats-mid:hover[b-ud6rep0om4] { background-color: #BFDBFE; }
.seats-link.seats-mid .seats-count[b-ud6rep0om4] { color: #1D4ED8; }
.seats-link.seats-mid .seats-label[b-ud6rep0om4] { color: #1E40AF; }

.seats-link.seats-low[b-ud6rep0om4] { background-color: #FEF3C7; }
.seats-link.seats-low:hover[b-ud6rep0om4] { background-color: #FDE68A; }
.seats-link.seats-low .seats-count[b-ud6rep0om4] { color: #B45309; }
.seats-link.seats-low .seats-label[b-ud6rep0om4] { color: #92400E; }

.seats-count[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.seats-label[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

.seats-empty[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #FEF3C7;
    border-radius: 20px;
}

.seats-count-empty[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #B45309;
}

.seats-empty .seats-label[b-ud6rep0om4] { color: #92400E; }

.col-actions[b-ud6rep0om4] {
    width: 8%;
    text-align: left;
}

/* ===== Hotel Name Cell ===== */
.hotel-name-cell[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hotel-name[b-ud6rep0om4] {
    font-weight: 600;
    color: #1D0F29;
}

.star-rating-small[b-ud6rep0om4] {
    display: flex;
    gap: 2px;
}

/* ===== Summary Cell ===== */
.summary-cell[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-text[b-ud6rep0om4] {
    font-size: 13px;
    color: #4B3C57;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.summary-text.expanded[b-ud6rep0om4] {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.summary-toggle[b-ud6rep0om4] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    align-self: flex-start;
}

.summary-toggle:hover[b-ud6rep0om4] {
    text-decoration: underline;
}

/* ===== Price Value ===== */
.price-value[b-ud6rep0om4] {
    font-weight: 600;
    color: #6C2DA8;
}

/* ===== Room Types Cell ===== */
.room-types-cell[b-ud6rep0om4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.room-type-chip[b-ud6rep0om4] {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #4B3C57;
    background-color: #F6F1FA;
    border: 1px solid #EDE6F5;
    border-radius: 12px;
    white-space: nowrap;
}

.room-count[b-ud6rep0om4] {
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.price-range[b-ud6rep0om4] {
    font-size: 12px;
    color: #6C2DA8;
}

/* ===== Rating Badge ===== */
.rating-badge[b-ud6rep0om4] {
    display: inline-block;
    padding: 4px 10px;
    background-color: #FEF3E2;
    color: #EF8121;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

/* ===== Availability Cell ===== */
.availability-cell[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.availability-text[b-ud6rep0om4] {
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.availability-bar[b-ud6rep0om4] {
    width: 100%;
    height: 6px;
    background-color: #EDE6F5;
    border-radius: 3px;
    overflow: hidden;
}

.availability-bar-fill[b-ud6rep0om4] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.availability-bar-fill.normal[b-ud6rep0om4] {
    background-color: #22C55E;
}

.availability-bar-fill.warning[b-ud6rep0om4] {
    background-color: #F59E0B;
}

.availability-bar-fill.critical[b-ud6rep0om4] {
    background-color: #DC2626;
}

.room-type-detail-availability[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #22C55E;
    font-weight: 500;
}

.no-limit-badge[b-ud6rep0om4] {
    display: inline-block;
    padding: 3px 10px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
}

.date-range[b-ud6rep0om4] {
    font-size: 13px;
    color: #4B3C57;
}

/* ===== Bookings Link ===== */
.bookings-link[b-ud6rep0om4] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    text-decoration: none;
    padding: 4px 10px;
    background-color: #F6F1FA;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.bookings-link:hover[b-ud6rep0om4] {
    background-color: #EDE6F5;
}

.bookings-count[b-ud6rep0om4] {
    font-size: 14px;
    font-weight: 700;
    color: #6C2DA8;
}

.bookings-label[b-ud6rep0om4] {
    font-size: 12px;
    color: #4B3C57;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-ud6rep0om4] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6C2DA8;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
}

.action-btn img[b-ud6rep0om4] {
    width: 14px;
    height: 14px;
}

.action-btn:disabled[b-ud6rep0om4],
.action-btn.disabled[b-ud6rep0om4] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Empty State ===== */
.empty-text[b-ud6rep0om4] {
    color: #B987F9;
    font-style: italic;
    font-size: 13px;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-ud6rep0om4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-ud6rep0om4 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-ud6rep0om4] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-ud6rep0om4] {
    right: 0;
}

.panel-header[b-ud6rep0om4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
}

.panel-content[b-ud6rep0om4] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-ud6rep0om4] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

/* ===== Form Styles ===== */
.form-group[b-ud6rep0om4] {
    margin-bottom: 20px;
}

.form-group.half[b-ud6rep0om4] {
    flex: 1;
}

.form-row[b-ud6rep0om4] {
    display: flex;
    gap: 16px;
}

.form-label[b-ud6rep0om4] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}


.form-section-title[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #EDE6F5;
}

.form-input[b-ud6rep0om4],
.form-select[b-ud6rep0om4] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-ud6rep0om4],
.form-select:focus[b-ud6rep0om4] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-ud6rep0om4]::placeholder {
    color: #B987F9;
}

.price-currency-row[b-ud6rep0om4] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.price-currency-row .form-input[b-ud6rep0om4] {
    flex: 1;
}

.currency-select[b-ud6rep0om4] {
    width: 90px !important;
    flex-shrink: 0;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.form-input.input-error[b-ud6rep0om4],
.form-select.input-error[b-ud6rep0om4] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.form-select[b-ud6rep0om4] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-textarea[b-ud6rep0om4] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.form-textarea:focus[b-ud6rep0om4] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-textarea[b-ud6rep0om4]::placeholder {
    color: #B987F9;
}

.char-counter[b-ud6rep0om4] {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #9B7DB8;
    margin-top: 4px;
    font-family: 'Roboto', sans-serif;
}

.input-with-prefix[b-ud6rep0om4] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-ud6rep0om4] {
    position: absolute;
    left: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    pointer-events: none;
    z-index: 1;
}

.form-input.with-prefix[b-ud6rep0om4] {
    padding-left: 32px;
}

.error-message[b-ud6rep0om4] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

/* ===== Amenities (Jira-like Labels) ===== */
.amenities-tags-list[b-ud6rep0om4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.amenity-tag-item[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}

.remove-tag-btn[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #FFFFFF;
    transition: background-color 0.2s ease;
}

.remove-tag-btn:hover[b-ud6rep0om4] {
    background: rgba(255, 255, 255, 0.3);
}

.remove-tag-btn svg[b-ud6rep0om4] {
    stroke: #FFFFFF;
}

.amenity-input-container[b-ud6rep0om4] {
    position: relative;
}

.amenity-suggestions[b-ud6rep0om4] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.amenity-suggestion-item[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    transition: background-color 0.15s ease;
}

.amenity-suggestion-item:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
}

.amenity-suggestion-item:first-child[b-ud6rep0om4] {
    border-radius: 8px 8px 0 0;
}

.amenity-suggestion-item:last-child[b-ud6rep0om4] {
    border-radius: 0 0 8px 8px;
}

.amenity-suggestion-item:only-child[b-ud6rep0om4] {
    border-radius: 8px;
}

.amenity-suggestion-item.create-new[b-ud6rep0om4] {
    color: #6C2DA8;
    font-weight: 500;
}

.amenity-suggestion-item.create-new svg[b-ud6rep0om4] {
    stroke: #6C2DA8;
}

/* ===== Star Rating Picker ===== */
.star-rating-picker[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.star-btn[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease;
    border-radius: 4px;
}

.star-btn:hover[b-ud6rep0om4] {
    transform: scale(1.15);
}

.star-btn:focus[b-ud6rep0om4] {
    outline: none;
}

.star-btn:focus-visible[b-ud6rep0om4] {
    outline: 2px solid #6C2DA8;
    outline-offset: 2px;
}

.star-btn svg[b-ud6rep0om4] {
    transition: fill 0.15s ease;
}

.star-btn.hovered svg[b-ud6rep0om4],
.star-btn.active svg[b-ud6rep0om4] {
    filter: drop-shadow(0 2px 4px rgba(239, 129, 33, 0.3));
}

.clear-rating-btn[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    background-color: #F6F1FA;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #9CA3AF;
    transition: all 0.2s ease;
}

.clear-rating-btn:hover[b-ud6rep0om4] {
    background-color: #FEE2E2;
    color: #DC2626;
}

.star-rating-label[b-ud6rep0om4] {
    margin-left: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

/* ===== Room Types ===== */
.room-types-list[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.room-type-item[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: #F6F1FA;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.room-type-item:hover[b-ud6rep0om4] {
    background-color: #EDE6F5;
}

.room-type-info[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.room-type-name[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.room-type-price[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #6C2DA8;
    font-weight: 500;
}

.remove-room-type-btn[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #9CA3AF;
    transition: all 0.2s ease;
}

.remove-room-type-btn:hover[b-ud6rep0om4] {
    background-color: #FEE2E2;
    color: #DC2626;
}

/* ===== Add Room Type Card ===== */
.add-room-type-card[b-ud6rep0om4] {
    background-color: #F6F1FA;
    border: 1px dashed #B987F9;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}

.add-room-type-header[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: #EDE6F5;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6C2DA8;
}

.add-room-type-header svg[b-ud6rep0om4] {
    stroke: #6C2DA8;
}

.add-room-type-body[b-ud6rep0om4] {
    padding: 16px;
}

.add-room-type-body .form-group[b-ud6rep0om4] {
    margin-bottom: 14px;
}

.add-room-type-body .form-group:last-of-type[b-ud6rep0om4] {
    margin-bottom: 16px;
}

.add-room-type-body .form-row[b-ud6rep0om4] {
    margin-bottom: 0;
}

.add-room-type-body .form-input[b-ud6rep0om4],
.add-room-type-body .form-select[b-ud6rep0om4] {
    background-color: #FFFFFF;
}

.btn-add-room-type[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add-room-type:hover:not(:disabled)[b-ud6rep0om4] {
    background-color: #5D2A8C;
}

.btn-add-room-type:disabled[b-ud6rep0om4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Room Type Thumbnails ===== */
.room-type-thumbnail[b-ud6rep0om4] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.room-type-thumbnail-placeholder[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #EDE6F5;
    border-radius: 6px;
    color: #B987F9;
    flex-shrink: 0;
}

/* ===== Drag Handle ===== */
.drag-handle[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    cursor: grab;
    color: #B987F9;
    transition: color 0.2s ease;
}

.drag-handle:active[b-ud6rep0om4] {
    cursor: grabbing;
}

.room-type-item:hover .drag-handle[b-ud6rep0om4] {
    color: #6C2DA8;
}

.room-type-item.dragging[b-ud6rep0om4] {
    opacity: 0.4;
}

.room-type-item.drag-over[b-ud6rep0om4] {
    border-top: 2px solid #6C2DA8;
    margin-top: -2px;
}

.room-type-actions[b-ud6rep0om4] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Add Inline Button ===== */
.btn-add-inline[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    padding: 4px 12px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    vertical-align: middle;
}

.btn-add-inline:hover[b-ud6rep0om4] {
    background-color: #5D2A8C;
}

.btn-add-inline svg[b-ud6rep0om4] {
    stroke: #FFFFFF;
}

/* ===== File Upload ===== */
.file-upload-area[b-ud6rep0om4] {
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.file-upload-area:hover[b-ud6rep0om4] {
    border-color: #B987F9;
}

.file-upload-area.input-error[b-ud6rep0om4] {
    border-color: #DC2626;
}

.file-upload-label[b-ud6rep0om4] {
    display: block;
    cursor: pointer;
}

.file-upload-content[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: #B987F9;
}

.file-upload-text[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
}

.file-upload-hint[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
}

.file-preview[b-ud6rep0om4] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.preview-image[b-ud6rep0om4] {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
}

.btn-remove-image[b-ud6rep0om4] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: rgba(220, 38, 38, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #FFFFFF;
    transition: background-color 0.2s ease;
}

.btn-remove-image:hover[b-ud6rep0om4] {
    background-color: #DC2626;
}

.btn-remove-image svg[b-ud6rep0om4] {
    stroke: #FFFFFF;
}

/* Room Types Detail View */
.room-types-detail-list[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.room-type-detail-item[b-ud6rep0om4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background-color: #F6F1FA;
    border-radius: 8px;
}

.room-type-detail-thumbnail[b-ud6rep0om4] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.room-type-detail-icon[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: #EDE6F5;
    border-radius: 6px;
    color: #6C2DA8;
    flex-shrink: 0;
}

.room-type-detail-info[b-ud6rep0om4] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.room-type-detail-name[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1D0F29;
}

.room-type-detail-desc[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}

.room-type-detail-price[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6C2DA8;
}

.room-type-detail-amenities[b-ud6rep0om4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.room-type-amenity-bullet[b-ud6rep0om4] {
    display: inline-block;
    padding: 2px 8px;
    background-color: #EDE6F5;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    border-radius: 10px;
}

/* ===== Save Button Disabled ===== */
.btn-save:disabled[b-ud6rep0om4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== City Autocomplete ===== */
.autocomplete-container[b-ud6rep0om4] {
    position: relative;
}

.autocomplete-dropdown[b-ud6rep0om4] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.autocomplete-item[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.autocomplete-item:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
}

.autocomplete-item:first-child[b-ud6rep0om4] {
    border-radius: 8px 8px 0 0;
}

.autocomplete-item:last-child[b-ud6rep0om4] {
    border-radius: 0 0 8px 8px;
}

.autocomplete-item:only-child[b-ud6rep0om4] {
    border-radius: 8px;
}

.city-icon[b-ud6rep0om4] {
    width: 36px;
    height: 36px;
    background-color: #F6F1FA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6C2DA8;
}

.city-info[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.city-name[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.city-country[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
}

/* ===== Form Footer ===== */
.form-footer[b-ud6rep0om4] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-ud6rep0om4] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-ud6rep0om4] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-ud6rep0om4] {
    background-color: #5D2A8C;
}

/* ===== Detail View Styles ===== */
.hotel-detail-section[b-ud6rep0om4] {
    margin-bottom: 20px;
}

.hotel-detail-section.half[b-ud6rep0om4] {
    flex: 1;
}

.detail-row[b-ud6rep0om4] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-ud6rep0om4] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-value-secondary[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #B987F9;
    margin: 4px 0 0 0;
}

.detail-description[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.7;
    margin: 0;
}

/* ===== Hotel Header Detail ===== */
.hotel-header-detail[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 0;
}

.hotel-detail-picture[b-ud6rep0om4] {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 12px;
}

.hotel-name-large[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 8px 0;
}

.star-rating-large[b-ud6rep0om4] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* ===== Location Detail ===== */
.location-detail[b-ud6rep0om4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background-color: #F6F1FA;
    border-radius: 10px;
}

.location-detail svg[b-ud6rep0om4] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Amenities Tags ===== */
.amenities-tags[b-ud6rep0om4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.amenity-tag[b-ud6rep0om4] {
    display: inline-block;
    padding: 6px 12px;
    background-color: #F6F1FA;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    border-radius: 16px;
}

/* ===== Special Rate Box ===== */
.special-rate-box[b-ud6rep0om4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background-color: #ECFDF5;
    border: 1px solid #00BA9D;
    border-radius: 10px;
}

.special-rate-box svg[b-ud6rep0om4] {
    flex-shrink: 0;
    margin-top: 2px;
}

.special-rate-box p[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #065F46;
    line-height: 1.5;
    margin: 0;
}

/* ===== Contact Links ===== */
.contact-links[b-ud6rep0om4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-link[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.contact-link:hover[b-ud6rep0om4] {
    background-color: #EDE6F5;
}

/* ===== View Bookings Link ===== */
.view-bookings-link[b-ud6rep0om4] {
    display: block;
    text-decoration: none;
}

.bookings-summary[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background-color: #F6F1FA;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bookings-summary:hover[b-ud6rep0om4] {
    background-color: #EDE6F5;
}

.bookings-icon[b-ud6rep0om4] {
    width: 48px;
    height: 48px;
    background-color: #6C2DA8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
}

.bookings-info[b-ud6rep0om4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bookings-count-large[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1D0F29;
}

.bookings-action[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #6C2DA8;
}

.bookings-chevron[b-ud6rep0om4] {
    color: #6C2DA8;
    flex-shrink: 0;
}

/* ===== Edit Panel Button ===== */
.btn-edit-panel[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-ud6rep0om4] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-ud6rep0om4] {
    filter: brightness(0) invert(1);
}

/* ===== Delete Confirmation Modal ===== */
.modal-overlay[b-ud6rep0om4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-ud6rep0om4 0.2s ease;
}

.modal-dialog[b-ud6rep0om4] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-ud6rep0om4 0.2s ease;
}

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

.modal-header[b-ud6rep0om4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-ud6rep0om4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-ud6rep0om4] {
    background-color: #F6F1FA;
}

.modal-body[b-ud6rep0om4] {
    padding: 24px;
}

.modal-body p[b-ud6rep0om4] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-ud6rep0om4] {
    margin-bottom: 0;
}

.warning-text[b-ud6rep0om4] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-ud6rep0om4] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-ud6rep0om4] {
    flex: 1;
}

.btn-delete[b-ud6rep0om4] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-ud6rep0om4] {
    background-color: #B91C1C;
}

/* ===== Responsive ===== */
@media screen and (max-width: 500px) {
    .side-panel[b-ud6rep0om4] {
        width: 100%;
        right: -100%;
    }

    .amenities-grid[b-ud6rep0om4] {
        grid-template-columns: 1fr;
    }

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

    .detail-row[b-ud6rep0om4] {
        flex-direction: column;
        gap: 0;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-ud6rep0om4] {
        padding: var(--spacing-md);
    }

    .hotels-table th[b-ud6rep0om4],
    .hotels-table td[b-ud6rep0om4] {
        padding: 12px 8px;
    }

    .col-rating[b-ud6rep0om4] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-bookings[b-ud6rep0om4] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-ud6rep0om4] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-ud6rep0om4] {
        width: 100%;
        justify-content: center;
    }

    .hotels-table th[b-ud6rep0om4],
    .hotels-table td[b-ud6rep0om4] {
        padding: 10px 6px;
        font-size: 12px;
    }

    .col-location[b-ud6rep0om4] {
        display: none;
    }
}

/* ===== Translation Language Bar ===== */
.translation-lang-bar[b-ud6rep0om4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #F9F5FF;
    border: 1px solid #EDE6F5;
    border-radius: 6px;
    margin-bottom: 12px;
}

.translation-lang-tabs[b-ud6rep0om4] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.translation-lang-tab[b-ud6rep0om4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8B7A9E;
    background: #fff;
    border: 1px solid #E0D4ED;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.translation-lang-tab:hover[b-ud6rep0om4] {
    color: #6C2DA8;
    border-color: #B987F9;
}

.translation-lang-tab-active[b-ud6rep0om4] {
    color: #fff;
    background: #6C2DA8;
    border-color: #6C2DA8;
    font-weight: 600;
}

.translation-lang-badge[b-ud6rep0om4] {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: lowercase;
}
/* /Pages/Settings.razor.rz.scp.css */
/* ===== Settings Page ===== */
.settings-page[b-f4gwa7rp4y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 800px;
}

/* ===== Page Header ===== */
.page-header[b-f4gwa7rp4y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-f4gwa7rp4y] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.conference-name[b-f4gwa7rp4y] {
    font-size: 16px;
    font-weight: 400;
    color: #8B7A9E;
    margin-left: 8px;
}

/* ===== Banners ===== */
.error-banner[b-f4gwa7rp4y] {
    background-color: #FEE2E2;
    color: #991B1B;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.error-banner button[b-f4gwa7rp4y] {
    background: none;
    border: none;
    color: #991B1B;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

.success-banner[b-f4gwa7rp4y] {
    background-color: #D1FAE5;
    color: #065F46;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.success-banner button[b-f4gwa7rp4y] {
    background: none;
    border: none;
    color: #065F46;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

/* ===== Loading & Empty ===== */
.loading-indicator[b-f4gwa7rp4y] {
    text-align: center;
    padding: 40px;
    color: #8B7A9E;
    font-size: 14px;
}

.empty-state[b-f4gwa7rp4y] {
    text-align: center;
    padding: 40px;
    color: #8B7A9E;
    font-size: 14px;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
}

/* ===== Settings Tab Bar ===== */
.settings-tab-bar[b-f4gwa7rp4y] {
    display: flex;
    gap: 4px;
    background-color: var(--color-white);
    padding: 6px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.settings-tab[b-f4gwa7rp4y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #8B7A9E;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-tab:hover[b-f4gwa7rp4y] {
    color: #6C2DA8;
    background-color: #F6F1FA;
}

.settings-tab-active[b-f4gwa7rp4y] {
    color: #6C2DA8;
    background-color: #EDE6F5;
    font-weight: 600;
}

.settings-tab svg[b-f4gwa7rp4y] {
    stroke: currentColor;
}

/* ===== Language Badge ===== */
.lang-code-badge[b-f4gwa7rp4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 8px;
    background-color: #EDE6F5;
    color: #6C2DA8;
    font-family: 'Roboto Mono', 'Roboto', monospace;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* ===== Settings Card ===== */
.settings-card[b-f4gwa7rp4y] {
    background-color: var(--color-white);
    border-radius: 6px;
    border: 1px solid #B987F9;
    overflow: hidden;
}

.card-header[b-f4gwa7rp4y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #EDE6F5;
    background-color: #F9F5FF;
}

.card-title[b-f4gwa7rp4y] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title svg[b-f4gwa7rp4y] {
    stroke: #6C2DA8;
}

.card-count[b-f4gwa7rp4y] {
    font-size: 13px;
    color: #8B7A9E;
    font-weight: 500;
}

.card-body[b-f4gwa7rp4y] {
    padding: 16px 20px;
}

/* ===== Amenity List ===== */
.amenity-list[b-f4gwa7rp4y] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.amenity-row[b-f4gwa7rp4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.15s ease;
}

.amenity-row:last-child[b-f4gwa7rp4y] {
    border-bottom: none;
}

.amenity-row:hover[b-f4gwa7rp4y] {
    background-color: #F6F1FA;
}

.amenity-label[b-f4gwa7rp4y] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    flex: 1;
}

.inline-edit-input[b-f4gwa7rp4y] {
    flex: 1;
    margin-right: 8px;
}

.row-actions[b-f4gwa7rp4y] {
    display: flex;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.amenity-row:hover .row-actions[b-f4gwa7rp4y] {
    opacity: 1;
}

.action-btn[b-f4gwa7rp4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.15s ease;
}

.action-btn:hover[b-f4gwa7rp4y] {
    background-color: #EDE6F5;
}

.save-btn svg[b-f4gwa7rp4y] {
    stroke: #059669;
}

.cancel-btn svg[b-f4gwa7rp4y] {
    stroke: #DC2626;
}

/* ===== Add Amenity Row ===== */
.add-amenity-row[b-f4gwa7rp4y] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #EDE6F5;
}

.add-amenity-row .form-input[b-f4gwa7rp4y] {
    flex: 1;
}

.form-input[b-f4gwa7rp4y] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D1C4E9;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    background: #fff;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-f4gwa7rp4y] {
    outline: none;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 2px rgba(108, 45, 168, 0.1);
}

.btn-add-small[b-f4gwa7rp4y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #6C2DA8;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.btn-add-small:hover:not(:disabled)[b-f4gwa7rp4y] {
    background-color: #5D2A8C;
}

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

.btn-add-small svg[b-f4gwa7rp4y] {
    stroke: #fff;
}

/* ===== Empty Text ===== */
.empty-text[b-f4gwa7rp4y] {
    color: #8B7A9E;
    font-size: 14px;
    font-style: italic;
    margin: 8px 0;
}

/* ===== Save Section ===== */
.save-section[b-f4gwa7rp4y] {
    display: flex;
    justify-content: flex-end;
}

.btn-save[b-f4gwa7rp4y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background-color: #6C2DA8;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover:not(:disabled)[b-f4gwa7rp4y] {
    background-color: #5D2A8C;
}

.btn-save:disabled[b-f4gwa7rp4y] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/Speakers.razor.rz.scp.css */
/* ===== Speakers Page ===== */
.speakers-page[b-8sfnwznrw8] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-8sfnwznrw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-8sfnwznrw8] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-8sfnwznrw8] {
    background-color: #5D2A8C;
}

/* ===== Table Card ===== */
.table-card[b-8sfnwznrw8] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Speakers Table ===== */
.speakers-table[b-8sfnwznrw8] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.speakers-table thead tr[b-8sfnwznrw8] {
    border-bottom: 2px solid #EDE6F5;
}

.speakers-table th[b-8sfnwznrw8] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.speakers-table tbody tr[b-8sfnwznrw8] {
    border-bottom: 1px solid #EDE6F5;
}

.speakers-table tbody tr:last-child[b-8sfnwznrw8] {
    border-bottom: none;
}

.speakers-table tbody tr:hover[b-8sfnwznrw8] {
    background-color: #F6F1FA;
}

.speakers-table td[b-8sfnwznrw8] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Drag Handle ===== */
.col-drag[b-8sfnwznrw8] {
    width: 3%;
    text-align: center;
}

.drag-handle[b-8sfnwznrw8] {
    cursor: grab;
    color: #B987F9;
    font-size: 18px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.drag-handle:hover[b-8sfnwznrw8] {
    color: #6C2DA8;
    background-color: #F6F1FA;
}

.drag-handle:active[b-8sfnwznrw8] {
    cursor: grabbing;
}

[b-8sfnwznrw8] .sortable-ghost {
    opacity: 0.4;
    background-color: #EDE6F5;
}

[b-8sfnwznrw8] .sortable-chosen {
    background-color: #F6F1FA;
}

/* ===== Column Styles ===== */
.col-checkbox[b-8sfnwznrw8] {
    width: 3%;
    text-align: center;
}

.col-checkbox input[type="checkbox"][b-8sfnwznrw8] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6C2DA8;
}

.col-name[b-8sfnwznrw8] {
    width: 18%;
    font-weight: 600;
    color: #1D0F29;
}

.col-credentials[b-8sfnwznrw8] {
    width: 20%;
}

.credentials-text[b-8sfnwznrw8] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.col-email[b-8sfnwznrw8] {
    width: 18%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-country[b-8sfnwznrw8] {
    width: 10%;
}

.country-flag[b-8sfnwznrw8] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.col-social[b-8sfnwznrw8] {
    width: 14%;
}

.social-icons[b-8sfnwznrw8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.social-link[b-8sfnwznrw8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.social-link:hover[b-8sfnwznrw8] {
    opacity: 0.7;
}

.col-picture[b-8sfnwznrw8] {
    width: 10%;
}

.speaker-photo[b-8sfnwznrw8] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.speaker-photo-placeholder[b-8sfnwznrw8] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 18px;
}

.col-actions[b-8sfnwznrw8] {
    width: 7%;
    text-align: left;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-8sfnwznrw8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-8sfnwznrw8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover:not(:disabled)[b-8sfnwznrw8] {
    background-color: #F6F1FA;
}

.action-btn:disabled[b-8sfnwznrw8],
.action-btn.disabled[b-8sfnwznrw8] {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-btn img[b-8sfnwznrw8] {
    width: 14px;
    height: 14px;
}

/* ===== Empty State ===== */
.empty-text[b-8sfnwznrw8] {
    color: #B987F9;
    font-style: italic;
    font-size: 13px;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-credentials[b-8sfnwznrw8] {
        display: none;
    }

    .col-email[b-8sfnwznrw8] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-8sfnwznrw8] {
        padding: var(--spacing-md);
    }

    .speakers-table th[b-8sfnwznrw8],
    .speakers-table td[b-8sfnwznrw8] {
        padding: 12px 8px;
    }
}

@media screen and (max-width: 1000px) {
    .col-social[b-8sfnwznrw8] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-8sfnwznrw8] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-8sfnwznrw8] {
        width: 100%;
        justify-content: center;
    }

    .speakers-table th[b-8sfnwznrw8],
    .speakers-table td[b-8sfnwznrw8] {
        padding: 10px 6px;
        font-size: 12px;
    }

    .speaker-photo[b-8sfnwznrw8],
    .speaker-photo-placeholder[b-8sfnwznrw8] {
        width: 45px;
        height: 45px;
    }
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-8sfnwznrw8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-8sfnwznrw8 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-8sfnwznrw8] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-8sfnwznrw8] {
    right: 0;
}

.panel-header[b-8sfnwznrw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-8sfnwznrw8] {
    background-color: #F6F1FA;
}

.panel-content[b-8sfnwznrw8] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.speaker-detail-photo[b-8sfnwznrw8] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.speaker-detail-photo img[b-8sfnwznrw8] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
}

.photo-placeholder-large[b-8sfnwznrw8] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 36px;
}

.speaker-detail-header[b-8sfnwznrw8] {
    text-align: center;
    margin-bottom: 24px;
}

.speaker-detail-name[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 4px 0;
}

.speaker-detail-prefix[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6C2DA8;
    font-weight: 500;
}

.speaker-detail-section[b-8sfnwznrw8] {
    margin-bottom: 20px;
}

.detail-label[b-8sfnwznrw8] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-country[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-flag[b-8sfnwznrw8] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.detail-social[b-8sfnwznrw8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-link-large[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background-color: #F6F1FA;
    border-radius: 8px;
    text-decoration: none;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.social-link-large:hover[b-8sfnwznrw8] {
    background-color: #EDE6F5;
}

.panel-footer[b-8sfnwznrw8] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-edit-panel[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-8sfnwznrw8] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-8sfnwznrw8] {
    filter: brightness(0) invert(1);
}

/* ===== Form Styles ===== */
.form-group[b-8sfnwznrw8] {
    margin-bottom: 20px;
}

.form-group.half[b-8sfnwznrw8] {
    flex: 1;
}

.form-row[b-8sfnwznrw8] {
    display: flex;
    gap: 16px;
}

.form-label[b-8sfnwznrw8] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-section-title[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #EDE6F5;
}

.form-input[b-8sfnwznrw8],
.form-select[b-8sfnwznrw8] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-8sfnwznrw8],
.form-select:focus[b-8sfnwznrw8] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-8sfnwznrw8]::placeholder {
    color: #B987F9;
}

.form-input.input-error[b-8sfnwznrw8],
.form-select.input-error[b-8sfnwznrw8] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.form-select[b-8sfnwznrw8] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
    line-height: 1.2;
}

.form-textarea[b-8sfnwznrw8] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 150px;
    box-sizing: border-box;
}

.form-textarea:focus[b-8sfnwznrw8] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-textarea[b-8sfnwznrw8]::placeholder {
    color: #B987F9;
}

.form-textarea.input-error[b-8sfnwznrw8] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.error-message[b-8sfnwznrw8] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

/* ===== Quill Editor ===== */
.quill-wrapper[b-8sfnwznrw8] {
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background-color: #F6F1FA;
    transition: all 0.2s ease;
}

.quill-wrapper:focus-within[b-8sfnwznrw8] {
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.quill-wrapper.input-error[b-8sfnwznrw8] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

[b-8sfnwznrw8] .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid #EDE6F5 !important;
    background-color: transparent;
    padding: 6px 8px !important;
}

[b-8sfnwznrw8] .ql-container.ql-snow {
    border: none !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

[b-8sfnwznrw8] .ql-editor {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    color: #1D0F29;
    padding: 12px 14px;
}

[b-8sfnwznrw8] .ql-editor.ql-blank::before {
    color: #B987F9;
    font-style: normal;
}

[b-8sfnwznrw8] .ql-snow .ql-stroke {
    stroke: #4B3C57;
}

[b-8sfnwznrw8] .ql-snow .ql-fill {
    fill: #4B3C57;
}

[b-8sfnwznrw8] .ql-snow button:hover .ql-stroke,
[b-8sfnwznrw8] .ql-snow button.ql-active .ql-stroke {
    stroke: #6C2DA8;
}

[b-8sfnwznrw8] .ql-snow button:hover .ql-fill,
[b-8sfnwznrw8] .ql-snow button.ql-active .ql-fill {
    fill: #6C2DA8;
}

/* ===== Biography Detail (HTML content) ===== */
.detail-biography[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.7;
}

[b-8sfnwznrw8] .detail-biography p {
    margin: 0 0 8px 0;
}

[b-8sfnwznrw8] .detail-biography p:last-child {
    margin-bottom: 0;
}

[b-8sfnwznrw8] .detail-biography ul,
[b-8sfnwznrw8] .detail-biography ol {
    margin: 0 0 8px 0;
    padding-left: 24px;
}

[b-8sfnwznrw8] .detail-biography li {
    margin-bottom: 4px;
}

/* ===== File Upload ===== */
.file-upload-area[b-8sfnwznrw8] {
    border: 2px dashed #B987F9;
    border-radius: 12px;
    background-color: #F6F1FA;
    transition: all 0.2s ease;
}

.file-upload-area:hover[b-8sfnwznrw8] {
    border-color: #6C2DA8;
    background-color: #EDE6F5;
}

.file-upload-area.input-error[b-8sfnwznrw8] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.file-upload-label[b-8sfnwznrw8] {
    display: block;
    cursor: pointer;
    padding: 24px;
}

.file-input-hidden[b-8sfnwznrw8] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[b-8sfnwznrw8] input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-upload-content[b-8sfnwznrw8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6C2DA8;
}

.file-upload-text[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6C2DA8;
}

.file-upload-hint[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #B987F9;
}

.file-preview[b-8sfnwznrw8] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.preview-image[b-8sfnwznrw8] {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
}

.btn-remove-image[b-8sfnwznrw8] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DC2626;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-remove-image:hover[b-8sfnwznrw8] {
    background-color: #B91C1C;
}

/* ===== Form Footer ===== */
.form-footer[b-8sfnwznrw8] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-8sfnwznrw8] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-8sfnwznrw8] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-8sfnwznrw8] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-8sfnwznrw8] {
    background-color: #5D2A8C;
}

/* ===== Contact Link ===== */
.contact-link[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-8sfnwznrw8] {
    color: #5D2A8C;
}

.contact-link svg[b-8sfnwznrw8] {
    flex-shrink: 0;
}

/* ===== Assignment Info ===== */
.assignment-info[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6C2DA8;
}

.assignment-info svg[b-8sfnwznrw8] {
    flex-shrink: 0;
}

/* ===== Delete Confirmation Modal ===== */
.modal-overlay[b-8sfnwznrw8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-8sfnwznrw8 0.2s ease;
}

.modal-dialog[b-8sfnwznrw8] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-8sfnwznrw8 0.2s ease;
}

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

.modal-header[b-8sfnwznrw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-8sfnwznrw8] {
    background-color: #F6F1FA;
}

.modal-body[b-8sfnwznrw8] {
    padding: 24px;
}

.modal-body p[b-8sfnwznrw8] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-8sfnwznrw8] {
    margin-bottom: 0;
}

.warning-text[b-8sfnwznrw8] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-8sfnwznrw8] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-8sfnwznrw8] {
    flex: 1;
}

.btn-delete[b-8sfnwznrw8] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-8sfnwznrw8] {
    background-color: #B91C1C;
}

/* ===== Participation Section ===== */
.participation-group[b-8sfnwznrw8] {
    margin-bottom: 16px;
}

.participation-group:last-child[b-8sfnwznrw8] {
    margin-bottom: 0;
}

.participation-group-label[b-8sfnwznrw8] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #B987F9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.participation-list[b-8sfnwznrw8] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participation-item[b-8sfnwznrw8] {
    border-radius: 10px;
    overflow: hidden;
}

.participation-link[b-8sfnwznrw8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background-color: #F6F1FA;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.participation-link:hover[b-8sfnwznrw8] {
    background-color: #EDE6F5;
}

.participation-icon[b-8sfnwznrw8] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.participation-icon.event-icon[b-8sfnwznrw8] {
    background-color: #6C2DA8;
    color: #FFFFFF;
}

.participation-icon.workshop-icon[b-8sfnwznrw8] {
    background-color: #059669;
    color: #FFFFFF;
}

.participation-info[b-8sfnwznrw8] {
    flex: 1;
    min-width: 0;
}

.participation-title[b-8sfnwznrw8] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participation-meta[b-8sfnwznrw8] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
    margin-top: 2px;
}

.participation-chevron[b-8sfnwznrw8] {
    flex-shrink: 0;
    color: #B987F9;
}

/* ===== Translation Language Bar (reusable across entities) ===== */
.translation-lang-bar[b-8sfnwznrw8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #F9F5FF;
    border: 1px solid #EDE6F5;
    border-radius: 6px;
    margin-bottom: 12px;
}

.translation-lang-tab[b-8sfnwznrw8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8B7A9E;
    background: #fff;
    border: 1px solid #E0D4ED;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.translation-lang-tab:hover[b-8sfnwznrw8] {
    color: #6C2DA8;
    border-color: #B987F9;
}

.translation-lang-tab-active[b-8sfnwznrw8] {
    color: #fff;
    background: #6C2DA8;
    border-color: #6C2DA8;
    font-weight: 600;
}

.translation-lang-badge[b-8sfnwznrw8] {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: lowercase;
}

/* ===== Side Panel Responsive ===== */
@media screen and (max-width: 500px) {
    .side-panel[b-8sfnwznrw8] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/SponsorRegistrations.razor.rz.scp.css */
/* ===== Registrations Page ===== */
.registrations-page[b-ex4hose2h7] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-ex4hose2h7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-ex4hose2h7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-ex4hose2h7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-ex4hose2h7] {
    color: #5D2A8C;
}

.page-title[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.conference-name[b-ex4hose2h7] {
    font-size: 16px;
    font-weight: 400;
    color: #4B3C57;
}

.page-subtitle[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Level Badge & Dots ===== */
.level-badge[b-ex4hose2h7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.level-dot[b-ex4hose2h7] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.level-dot.level-platinum[b-ex4hose2h7] {
    background-color: #E5E4E2;
    box-shadow: 0 0 6px rgba(229, 228, 226, 0.8);
}

.level-dot.level-gold[b-ex4hose2h7] {
    background-color: #FFD700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.level-dot.level-silver[b-ex4hose2h7] {
    background-color: #A8A8A8;
}

.level-dot.level-bronze[b-ex4hose2h7] {
    background-color: #CD7F32;
}

.level-dot.level-default[b-ex4hose2h7] {
    background-color: #6C2DA8;
}

/* ===== Loading & Error ===== */
.loading-indicator[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    text-align: center;
    padding: 40px 20px;
}

.error-banner[b-ex4hose2h7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #991B1B;
}

.error-banner button[b-ex4hose2h7] {
    background: none;
    border: none;
    color: #991B1B;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ===== Table Card ===== */
.table-card[b-ex4hose2h7] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 0;
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Registrations Table ===== */
.registrations-table[b-ex4hose2h7] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.registrations-table thead tr[b-ex4hose2h7] {
    background-color: #F6F1FA;
}

.registrations-table th[b-ex4hose2h7] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.registrations-table tbody tr[b-ex4hose2h7] {
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.2s ease;
}

.registrations-table tbody tr:last-child[b-ex4hose2h7] {
    border-bottom: none;
}

.registrations-table tbody tr:hover[b-ex4hose2h7] {
    background-color: #F6F1FA;
}

.registrations-table td[b-ex4hose2h7] {
    padding: 14px 16px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-logo[b-ex4hose2h7] {
    width: 5%;
    text-align: center;
}

.sponsor-logo[b-ex4hose2h7] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
}

.sponsor-logo-large[b-ex4hose2h7] {
    max-width: 120px;
    max-height: 80px;
    border-radius: 12px;
    object-fit: contain;
    margin-bottom: 16px;
}

.sponsor-initials[b-ex4hose2h7] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.col-organization[b-ex4hose2h7] {
    width: 16%;
}

.organization-name[b-ex4hose2h7] {
    font-weight: 600;
    color: #1D0F29;
}

.col-headline[b-ex4hose2h7] {
    width: 18%;
}

.headline-text[b-ex4hose2h7] {
    color: #4B3C57;
    line-height: 1.4;
}

.col-contact[b-ex4hose2h7] {
    width: 10%;
}

.col-email[b-ex4hose2h7] {
    width: 16%;
}

.email-link[b-ex4hose2h7] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-ex4hose2h7] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-website[b-ex4hose2h7] {
    width: 10%;
}

.website-link[b-ex4hose2h7] {
    color: #6C2DA8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.website-link:hover[b-ex4hose2h7] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-status[b-ex4hose2h7] {
    width: 10%;
}

.col-paid-date[b-ex4hose2h7] {
    width: 10%;
}

.col-actions[b-ex4hose2h7] {
    width: 5%;
    text-align: center;
}

.empty-text[b-ex4hose2h7] {
    color: #B987F9;
    font-style: italic;
}

/* ===== Status Badge ===== */
.status-badge[b-ex4hose2h7] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-paid[b-ex4hose2h7] {
    background-color: #DEF7EC;
    color: #03543F;
}

.status-badge.status-pending[b-ex4hose2h7] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-refunded[b-ex4hose2h7] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.status-badge.status-disputed[b-ex4hose2h7] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-cancelled[b-ex4hose2h7] {
    background-color: #F3F4F6;
    color: #6B7280;
}

/* ===== Action Button ===== */
.action-btn[b-ex4hose2h7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-btn:hover[b-ex4hose2h7] {
    background-color: #EDE6F5;
}

/* ===== Empty State ===== */
.empty-state[b-ex4hose2h7] {
    text-align: center;
    padding: 60px 20px !important;
    color: #4B3C57;
}

.empty-state svg[b-ex4hose2h7] {
    margin-bottom: 16px;
}

.empty-state p[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
}

/* ===== Side Panel ===== */
.panel-overlay[b-ex4hose2h7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-ex4hose2h7 0.2s ease;
}

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

.side-panel[b-ex4hose2h7] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-ex4hose2h7] {
    right: 0;
}

.panel-header[b-ex4hose2h7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-ex4hose2h7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-ex4hose2h7] {
    background-color: #F6F1FA;
}

.panel-content[b-ex4hose2h7] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.sponsor-header-section[b-ex4hose2h7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.sponsor-avatar-large[b-ex4hose2h7] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sponsor-name-large[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
}

.sponsor-level-tag[b-ex4hose2h7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: #FFFFFF;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #4B3C57;
    margin-bottom: 12px;
}

.sponsor-status-badge[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sponsor-status-badge.status-paid[b-ex4hose2h7] {
    background-color: #DEF7EC;
    color: #03543F;
}

.sponsor-status-badge.status-pending[b-ex4hose2h7] {
    background-color: #FEF3C7;
    color: #92400E;
}

.sponsor-status-badge.status-refunded[b-ex4hose2h7] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.sponsor-status-badge.status-disputed[b-ex4hose2h7] {
    background-color: #FEF3C7;
    color: #92400E;
}

.sponsor-status-badge.status-cancelled[b-ex4hose2h7] {
    background-color: #F3F4F6;
    color: #6B7280;
}

.detail-section[b-ex4hose2h7] {
    margin-bottom: 20px;
}

.detail-section.half[b-ex4hose2h7] {
    flex: 1;
}

.detail-row[b-ex4hose2h7] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-ex4hose2h7] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-ex4hose2h7] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.contact-link[b-ex4hose2h7] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-ex4hose2h7] {
    color: #5D2A8C;
}

.contact-link svg[b-ex4hose2h7] {
    flex-shrink: 0;
}

.panel-footer[b-ex4hose2h7] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-close-panel[b-ex4hose2h7] {
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-panel:hover[b-ex4hose2h7] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-headline[b-ex4hose2h7] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .col-website[b-ex4hose2h7] {
        display: none;
    }

    .col-paid-date[b-ex4hose2h7] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-contact[b-ex4hose2h7] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-ex4hose2h7] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .col-email[b-ex4hose2h7] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-ex4hose2h7] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/Sponsors.razor.rz.scp.css */
/* ===== Sponsors Page ===== */
.sponsors-page[b-3od6v2h0zy] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-3od6v2h0zy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-3od6v2h0zy] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-3od6v2h0zy] {
    background-color: #5D2A8C;
}

.btn-add svg[b-3od6v2h0zy] {
    stroke: #FFFFFF;
}

/* ===== Table Card ===== */
.table-card[b-3od6v2h0zy] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Sponsors Table ===== */
.sponsors-table[b-3od6v2h0zy] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.sponsors-table thead tr[b-3od6v2h0zy] {
    border-bottom: 2px solid #EDE6F5;
}

.sponsors-table th[b-3od6v2h0zy] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sponsors-table tbody tr[b-3od6v2h0zy] {
    border-bottom: 1px solid #EDE6F5;
}

.sponsors-table tbody tr:last-child[b-3od6v2h0zy] {
    border-bottom: none;
}

.sponsors-table tbody tr:hover[b-3od6v2h0zy] {
    background-color: #F6F1FA;
}

.sponsors-table td[b-3od6v2h0zy] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Drag Handle ===== */
.col-drag[b-3od6v2h0zy] {
    width: 3%;
    text-align: center;
}

.drag-handle[b-3od6v2h0zy] {
    cursor: grab;
    color: #B987F9;
    font-size: 18px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.drag-handle:hover[b-3od6v2h0zy] {
    color: #6C2DA8;
    background-color: #F6F1FA;
}

.drag-handle:active[b-3od6v2h0zy] {
    cursor: grabbing;
}

[b-3od6v2h0zy] .sortable-ghost {
    opacity: 0.4;
    background-color: #EDE6F5;
}

[b-3od6v2h0zy] .sortable-chosen {
    background-color: #F6F1FA;
}

/* ===== Column Styles ===== */
.col-checkbox[b-3od6v2h0zy] {
    width: 3%;
    text-align: center;
}

.col-checkbox input[type="checkbox"][b-3od6v2h0zy] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6C2DA8;
}

.col-image[b-3od6v2h0zy] {
    width: 5%;
    text-align: center;
}

.table-level-image[b-3od6v2h0zy] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
}

.col-level[b-3od6v2h0zy] {
    width: 12%;
}

.level-badge[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.level-dot[b-3od6v2h0zy] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.level-dot.level-platinum[b-3od6v2h0zy] {
    background-color: #E5E4E2;
    box-shadow: 0 0 4px rgba(229, 228, 226, 0.8);
}

.level-dot.level-gold[b-3od6v2h0zy] {
    background-color: #FFD700;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.level-dot.level-silver[b-3od6v2h0zy] {
    background-color: #A8A8A8;
}

.level-dot.level-bronze[b-3od6v2h0zy] {
    background-color: #CD7F32;
}

.level-dot.level-default[b-3od6v2h0zy] {
    background-color: #6C2DA8;
}

.level-text[b-3od6v2h0zy] {
    font-size: 14px;
    color: #4B3C57;
}

.col-price[b-3od6v2h0zy] {
    width: 8%;
    font-weight: 600;
    color: #1D0F29;
}

.col-slots[b-3od6v2h0zy] {
    width: 10%;
}

.slots-info[b-3od6v2h0zy] {
    font-weight: 500;
    color: #4B3C57;
}

.slots-info.fully-booked[b-3od6v2h0zy] {
    color: #6C2DA8;
    font-weight: 600;
}

.slots-unlimited[b-3od6v2h0zy] {
    font-size: 13px;
    color: #4B3C57;
}

.col-sponsors[b-3od6v2h0zy] {
    width: 12%;
}

.sponsors-count-btn[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

.sponsors-count-btn:hover[b-3od6v2h0zy] {
    opacity: 0.8;
}

.sponsors-link[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sponsors-link:hover[b-3od6v2h0zy] {
    opacity: 0.8;
}

.sponsors-link:hover .sponsors-label[b-3od6v2h0zy] {
    text-decoration: underline;
}

.sponsors-count[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
}

.sponsors-label[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.col-description[b-3od6v2h0zy] {
    width: 25%;
}

.description-text[b-3od6v2h0zy] {
    color: #4B3C57;
    line-height: 1.5;
}

.col-actions[b-3od6v2h0zy] {
    width: 7%;
    text-align: left;
}

/* ===== Empty State ===== */
.empty-text[b-3od6v2h0zy] {
    color: #B987F9;
    font-style: italic;
    font-size: 13px;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-3od6v2h0zy] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-3od6v2h0zy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover:not(:disabled)[b-3od6v2h0zy] {
    background-color: #F6F1FA;
}

.action-btn:disabled[b-3od6v2h0zy],
.action-btn.disabled[b-3od6v2h0zy] {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-btn img[b-3od6v2h0zy] {
    width: 14px;
    height: 14px;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-3od6v2h0zy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-3od6v2h0zy 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-3od6v2h0zy] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-3od6v2h0zy] {
    right: 0;
}

.panel-header[b-3od6v2h0zy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
    gap: 12px;
}

.panel-back-btn[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #6C2DA8;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.panel-back-btn:hover[b-3od6v2h0zy] {
    background-color: #F6F1FA;
}

.panel-title[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-3od6v2h0zy] {
    background-color: #F6F1FA;
}

.panel-content[b-3od6v2h0zy] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.sponsor-detail-section[b-3od6v2h0zy] {
    margin-bottom: 20px;
}

.sponsor-detail-section.half[b-3od6v2h0zy] {
    flex: 1;
}

.sponsor-header-section[b-3od6v2h0zy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.sponsor-avatar-large[b-3od6v2h0zy] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sponsor-name-large[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.sponsor-level-tag[b-3od6v2h0zy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: #FFFFFF;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4B3C57;
}

.detail-row[b-3od6v2h0zy] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-3od6v2h0zy] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-title[b-3od6v2h0zy] {
    font-size: 18px;
    font-weight: 600;
    color: #1D0F29;
}

.detail-description[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

.price-value[b-3od6v2h0zy] {
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
}

.level-badge-large[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
}

.level-name[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
}

.level-dot-large[b-3od6v2h0zy] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.level-dot-large.level-platinum[b-3od6v2h0zy] {
    background-color: #E5E4E2;
    box-shadow: 0 0 6px rgba(229, 228, 226, 0.8);
}

.level-dot-large.level-gold[b-3od6v2h0zy] {
    background-color: #FFD700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.level-dot-large.level-silver[b-3od6v2h0zy] {
    background-color: #A8A8A8;
}

.level-dot-large.level-bronze[b-3od6v2h0zy] {
    background-color: #CD7F32;
}

.level-dot-large.level-default[b-3od6v2h0zy] {
    background-color: #6C2DA8;
}

.benefits-list[b-3od6v2h0zy] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.benefits-list li[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.benefits-list li svg[b-3od6v2h0zy] {
    flex-shrink: 0;
}

.sponsors-list[b-3od6v2h0zy] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sponsor-item[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #F6F1FA;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.sponsor-item.clickable[b-3od6v2h0zy] {
    cursor: pointer;
}

.sponsor-item.clickable:hover[b-3od6v2h0zy] {
    background-color: #EDE6F5;
}

.sponsor-chevron[b-3od6v2h0zy] {
    margin-left: auto;
    color: #6C2DA8;
    flex-shrink: 0;
}

.sponsor-initials[b-3od6v2h0zy] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

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

.sponsor-name[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sponsor-email[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
}

.contact-info[b-3od6v2h0zy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.website-link[b-3od6v2h0zy] {
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.website-link:hover[b-3od6v2h0zy] {
    color: #5D2A8C;
    text-decoration: underline;
}

.panel-footer[b-3od6v2h0zy] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.form-footer[b-3od6v2h0zy] {
    display: flex;
    gap: 12px;
}

/* ===== Form Styles ===== */
.form-group[b-3od6v2h0zy] {
    margin-bottom: 20px;
}

.form-group.half[b-3od6v2h0zy] {
    flex: 1;
}

.form-row[b-3od6v2h0zy] {
    display: flex;
    gap: 16px;
}

.form-label[b-3od6v2h0zy] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-input[b-3od6v2h0zy] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-3od6v2h0zy] {
    outline: none;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-3od6v2h0zy]::placeholder {
    color: #B987F9;
}

.input-with-prefix[b-3od6v2h0zy] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-3od6v2h0zy] {
    position: absolute;
    left: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    pointer-events: none;
}

.form-input.with-prefix[b-3od6v2h0zy] {
    padding-left: 28px;
}

.form-textarea[b-3od6v2h0zy] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-textarea:focus[b-3od6v2h0zy] {
    outline: none;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-textarea[b-3od6v2h0zy]::placeholder {
    color: #B987F9;
}

.char-counter[b-3od6v2h0zy] {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #9B7DB8;
    margin-top: 4px;
    font-family: 'Roboto', sans-serif;
}

/* ===== File Upload ===== */
.file-upload-area[b-3od6v2h0zy] {
    border: 2px dashed #B987F9;
    border-radius: 12px;
    background-color: #F6F1FA;
    transition: all 0.2s ease;
}

.file-upload-area:hover[b-3od6v2h0zy] {
    border-color: #6C2DA8;
    background-color: #EDE6F5;
}

.file-upload-label[b-3od6v2h0zy] {
    display: block;
    cursor: pointer;
    padding: 24px;
}

[b-3od6v2h0zy] input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-upload-content[b-3od6v2h0zy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6C2DA8;
}

.file-upload-text[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6C2DA8;
}

.file-upload-hint[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #B987F9;
}

.file-preview[b-3od6v2h0zy] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.preview-image[b-3od6v2h0zy] {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
}

.btn-remove-image[b-3od6v2h0zy] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DC2626;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-remove-image:hover[b-3od6v2h0zy] {
    background-color: #B91C1C;
}

.level-image-preview[b-3od6v2h0zy] {
    margin-top: 12px;
    text-align: center;
}

.level-image[b-3od6v2h0zy] {
    max-height: 100px;
    border-radius: 8px;
}

/* ===== Benefits Editor ===== */
.benefits-editor[b-3od6v2h0zy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.benefit-row[b-3od6v2h0zy] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.benefit-input[b-3od6v2h0zy] {
    flex: 1;
}

.btn-remove-benefit[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-benefit:hover[b-3od6v2h0zy] {
    background-color: #FEE2E2;
    border-color: #EF4444;
    color: #EF4444;
}

.btn-add-benefit[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #F6F1FA;
    border: 1px dashed #B987F9;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-benefit:hover[b-3od6v2h0zy] {
    background-color: #EDE6F5;
    border-color: #6C2DA8;
}

/* ===== Form Buttons ===== */
.btn-cancel[b-3od6v2h0zy] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-3od6v2h0zy] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-3od6v2h0zy] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-3od6v2h0zy] {
    background-color: #5D2A8C;
}

.btn-edit-panel[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-3od6v2h0zy] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-3od6v2h0zy] {
    filter: brightness(0) invert(1);
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-description[b-3od6v2h0zy] {
        width: 20%;
    }

    .col-slots[b-3od6v2h0zy] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-3od6v2h0zy] {
        padding: var(--spacing-md);
    }

    .sponsors-table th[b-3od6v2h0zy],
    .sponsors-table td[b-3od6v2h0zy] {
        padding: 12px 8px;
    }

    .col-description[b-3od6v2h0zy] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-price[b-3od6v2h0zy] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-3od6v2h0zy] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-3od6v2h0zy] {
        width: 100%;
        justify-content: center;
    }

    .sponsors-table th[b-3od6v2h0zy],
    .sponsors-table td[b-3od6v2h0zy] {
        padding: 10px 6px;
        font-size: 12px;
    }

    .col-sponsors[b-3od6v2h0zy] {
        display: none;
    }
}

/* ===== Side Panel Responsive ===== */
@media screen and (max-width: 500px) {
    .side-panel[b-3od6v2h0zy] {
        width: 100%;
        right: -100%;
    }
}

/* ===== Form Validation ===== */
.form-input.input-error[b-3od6v2h0zy],
.form-textarea.input-error[b-3od6v2h0zy] {
    border-color: #EF4444;
}

.form-input.input-error:focus[b-3od6v2h0zy],
.form-textarea.input-error:focus[b-3od6v2h0zy] {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.error-message[b-3od6v2h0zy] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #EF4444;
    margin-top: 6px;
}

.benefits-editor.has-error .btn-add-benefit[b-3od6v2h0zy] {
    border-color: #EF4444;
    background-color: #FEF2F2;
}

/* ===== Delete Confirmation Modal ===== */
.modal-overlay[b-3od6v2h0zy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-3od6v2h0zy 0.2s ease;
}

.modal-dialog[b-3od6v2h0zy] {
    background-color: #FFFFFF;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    margin: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-3od6v2h0zy 0.3s ease;
}

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

.modal-header[b-3od6v2h0zy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-3od6v2h0zy] {
    background-color: #F6F1FA;
}

.modal-body[b-3od6v2h0zy] {
    padding: 24px;
}

.modal-body p[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.modal-body p:last-child[b-3od6v2h0zy] {
    margin-bottom: 0;
}

.modal-body .warning-text[b-3od6v2h0zy] {
    color: #EF4444;
    font-weight: 500;
}

.modal-footer[b-3od6v2h0zy] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-3od6v2h0zy] {
    flex: 1;
}

.btn-delete[b-3od6v2h0zy] {
    flex: 1;
    padding: 14px 24px;
    background-color: #EF4444;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-3od6v2h0zy] {
    background-color: #DC2626;
}

/* ===== Sponsor Status Badges ===== */
.sponsor-status[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.sponsor-status.status-paid[b-3od6v2h0zy] {
    background-color: #DEF7EC;
    color: #03543F;
}

.sponsor-status.status-pending[b-3od6v2h0zy] {
    background-color: #FEF3C7;
    color: #92400E;
}

.sponsor-status.status-refunded[b-3od6v2h0zy] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.sponsor-status.status-cancelled[b-3od6v2h0zy] {
    background-color: #F3F4F6;
    color: #6B7280;
}

.sponsor-status-badge[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
}

.sponsor-status-badge.status-paid[b-3od6v2h0zy] {
    background-color: #DEF7EC;
    color: #03543F;
}

.sponsor-status-badge.status-pending[b-3od6v2h0zy] {
    background-color: #FEF3C7;
    color: #92400E;
}

.sponsor-status-badge.status-refunded[b-3od6v2h0zy] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.sponsor-status-badge.status-cancelled[b-3od6v2h0zy] {
    background-color: #F3F4F6;
    color: #6B7280;
}

/* ===== Contact Link ===== */
.contact-link[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-3od6v2h0zy] {
    color: #5D2A8C;
}

.contact-link svg[b-3od6v2h0zy] {
    flex-shrink: 0;
}

/* ===== Benefits Comparison Matrix ===== */
.matrix-section[b-3od6v2h0zy] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.matrix-header-row[b-3od6v2h0zy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.matrix-title[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.matrix-actions[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unsaved-indicator[b-3od6v2h0zy] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #F59E0B;
    font-weight: 500;
}

.btn-save-matrix[b-3od6v2h0zy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save-matrix:hover:not(:disabled)[b-3od6v2h0zy] {
    background-color: #5D2A8C;
}

.btn-save-matrix:disabled[b-3od6v2h0zy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.matrix-table-card[b-3od6v2h0zy] {
    overflow-x: auto;
}

.benefits-matrix[b-3od6v2h0zy] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.benefits-matrix thead tr[b-3od6v2h0zy] {
    border-bottom: 2px solid #EDE6F5;
}

.benefits-matrix th[b-3od6v2h0zy] {
    text-align: left;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.matrix-category-header[b-3od6v2h0zy] {
    min-width: 180px;
    width: 25%;
}

.matrix-level-header[b-3od6v2h0zy] {
    min-width: 140px;
    text-align: center;
}

.matrix-level-badge[b-3od6v2h0zy] {
    justify-content: center;
}

.matrix-action-header[b-3od6v2h0zy] {
    width: 40px;
}

.benefits-matrix tbody tr[b-3od6v2h0zy] {
    border-bottom: 1px solid #EDE6F5;
}

.benefits-matrix tbody tr:last-child[b-3od6v2h0zy] {
    border-bottom: none;
}

.benefits-matrix tbody tr:hover[b-3od6v2h0zy] {
    background-color: #F6F1FA;
}

.category-name-cell[b-3od6v2h0zy] {
    padding: 3px 6px;
}

.category-name-input[b-3od6v2h0zy] {
    width: 100%;
    padding: 4px 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: #1D0F29;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    resize: none;
    height: calc(2 * 1.4em + 8px + 2px);
    overflow-y: auto;
}

.category-name-input:hover[b-3od6v2h0zy] {
    border-color: #EDE6F5;
    background-color: #FFFFFF;
}

.category-name-input:focus[b-3od6v2h0zy] {
    outline: none;
    border-color: #6C2DA8;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.matrix-cell[b-3od6v2h0zy] {
    padding: 3px 6px;
    text-align: center;
}

.matrix-cell-input[b-3od6v2h0zy] {
    width: 100%;
    padding: 4px 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    text-align: center;
}

.matrix-cell-input:hover[b-3od6v2h0zy] {
    border-color: #EDE6F5;
    background-color: #FFFFFF;
}

.matrix-cell-input:focus[b-3od6v2h0zy] {
    outline: none;
    border-color: #6C2DA8;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.matrix-cell-input[b-3od6v2h0zy]::placeholder {
    color: #B987F9;
}

.matrix-delete-cell[b-3od6v2h0zy] {
    padding: 3px 4px;
    text-align: center;
}

.matrix-footer[b-3od6v2h0zy] {
    padding: 8px 12px;
    border-top: 1px solid #EDE6F5;
}

.btn-add-category[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background-color: #F6F1FA;
    border: 1px dashed #B987F9;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-category:hover:not(:disabled)[b-3od6v2h0zy] {
    background-color: #EDE6F5;
    border-color: #6C2DA8;
}

.btn-add-category:disabled[b-3od6v2h0zy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.view-sponsors-link[b-3od6v2h0zy] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.view-sponsors-link:hover[b-3od6v2h0zy] {
    color: #5D2A8C;
}

/* ===== Translation Language Bar ===== */
.translation-lang-bar[b-3od6v2h0zy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #F9F5FF;
    border: 1px solid #EDE6F5;
    border-radius: 6px;
    margin-bottom: 12px;
}

.translation-lang-tab[b-3od6v2h0zy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8B7A9E;
    background: #fff;
    border: 1px solid #E0D4ED;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.translation-lang-tab:hover[b-3od6v2h0zy] {
    color: #6C2DA8;
    border-color: #B987F9;
}

.translation-lang-tab-active[b-3od6v2h0zy] {
    color: #fff;
    background: #6C2DA8;
    border-color: #6C2DA8;
    font-weight: 600;
}

.translation-lang-badge[b-3od6v2h0zy] {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: lowercase;
}
/* /Pages/StaffUsers.razor.rz.scp.css */
/* ===== Staff Users Page ===== */
.staff-users-page[b-fxb2gledx6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-fxb2gledx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-fxb2gledx6] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-fxb2gledx6] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-fxb2gledx6] {
    background-color: #5D2A8C;
}

.btn-add svg[b-fxb2gledx6] {
    stroke: #FFFFFF;
}

/* ===== Banners ===== */
.success-banner[b-fxb2gledx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 8px;
    color: #166534;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.success-banner button[b-fxb2gledx6] {
    background: none;
    border: none;
    color: #166534;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.error-banner[b-fxb2gledx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.error-banner button[b-fxb2gledx6] {
    background: none;
    border: none;
    color: #991B1B;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ===== Filters Bar ===== */
.filters-bar[b-fxb2gledx6] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-fxb2gledx6] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-fxb2gledx6] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-fxb2gledx6] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-fxb2gledx6] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-fxb2gledx6]::placeholder {
    color: #B987F9;
}

.clear-search[b-fxb2gledx6] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #B987F9;
    display: flex;
    align-items: center;
    padding: 4px;
}

.clear-search:hover[b-fxb2gledx6] {
    color: #6C2DA8;
}

/* ===== Loading ===== */
.loading-indicator[b-fxb2gledx6] {
    text-align: center;
    padding: 40px;
    color: #B987F9;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

/* ===== Table Card ===== */
.table-card[b-fxb2gledx6] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

.data-table[b-fxb2gledx6] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.data-table thead tr[b-fxb2gledx6] {
    border-bottom: 2px solid #EDE6F5;
}

.data-table th[b-fxb2gledx6] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr[b-fxb2gledx6] {
    border-bottom: 1px solid #EDE6F5;
}

.data-table tbody tr:last-child[b-fxb2gledx6] {
    border-bottom: none;
}

.data-table tbody tr:hover[b-fxb2gledx6] {
    background-color: #F6F1FA;
}

.data-table td[b-fxb2gledx6] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

.col-name[b-fxb2gledx6] {
    width: 30%;
    font-weight: 600;
    color: #1D0F29;
}

.col-email[b-fxb2gledx6] {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-date[b-fxb2gledx6] {
    width: 20%;
}

.col-actions[b-fxb2gledx6] {
    width: 20%;
    text-align: left;
}

.name-cell[b-fxb2gledx6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-initials[b-fxb2gledx6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.user-name-text[b-fxb2gledx6] {
    font-weight: 600;
    color: #1D0F29;
}

.email-link[b-fxb2gledx6] {
    color: #6C2DA8;
    text-decoration: none;
}

.email-link:hover[b-fxb2gledx6] {
    text-decoration: underline;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-fxb2gledx6] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
}

.action-btn[b-fxb2gledx6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
    color: #4B3C57;
}

.action-btn:hover[b-fxb2gledx6] {
    background-color: #F6F1FA;
}

.action-btn img[b-fxb2gledx6] {
    width: 16px;
    height: 16px;
}

/* ===== Empty State ===== */
.empty-row td[b-fxb2gledx6] {
    text-align: center;
    padding: 40px;
    color: #B987F9;
    font-style: italic;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-fxb2gledx6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-fxb2gledx6 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-fxb2gledx6] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-fxb2gledx6] {
    right: 0;
}

.panel-header[b-fxb2gledx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-fxb2gledx6] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-fxb2gledx6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-fxb2gledx6] {
    background-color: #F6F1FA;
}

.panel-content[b-fxb2gledx6] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-fxb2gledx6] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

/* ===== Form Styles ===== */
.form-group[b-fxb2gledx6] {
    margin-bottom: 20px;
}

.form-label[b-fxb2gledx6] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-input[b-fxb2gledx6] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-fxb2gledx6] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-fxb2gledx6]::placeholder {
    color: #B987F9;
}

.form-input.input-error[b-fxb2gledx6] {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

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

.error-message[b-fxb2gledx6] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #DC2626;
    margin-top: 6px;
}

/* ===== Form Footer ===== */
.form-footer[b-fxb2gledx6] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-fxb2gledx6] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-fxb2gledx6] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-fxb2gledx6] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-fxb2gledx6] {
    background-color: #5D2A8C;
}

/* ===== Modal ===== */
.modal-overlay[b-fxb2gledx6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-fxb2gledx6 0.2s ease;
}

.modal-dialog[b-fxb2gledx6] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-fxb2gledx6 0.2s ease;
}

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

.modal-header[b-fxb2gledx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-fxb2gledx6] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-fxb2gledx6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-fxb2gledx6] {
    background-color: #F6F1FA;
}

.modal-body[b-fxb2gledx6] {
    padding: 24px;
}

.modal-body p[b-fxb2gledx6] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-fxb2gledx6] {
    margin-bottom: 0;
}

.warning-text[b-fxb2gledx6] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-fxb2gledx6] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-fxb2gledx6] {
    flex: 1;
}

.btn-delete[b-fxb2gledx6] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-fxb2gledx6] {
    background-color: #B91C1C;
}

/* ===== Responsive ===== */
@media screen and (max-width: 768px) {
    .page-header[b-fxb2gledx6] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-fxb2gledx6] {
        width: 100%;
        justify-content: center;
    }

    .col-date[b-fxb2gledx6] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-fxb2gledx6] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/SupportRequests.razor.rz.scp.css */
/* ===== Support Requests Page ===== */
.support-requests-page[b-fggyfo33c3] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-fggyfo33c3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-fggyfo33c3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.page-subtitle[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Banners ===== */
.success-banner[b-fggyfo33c3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 8px;
    color: #166534;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.success-banner button[b-fggyfo33c3] {
    background: none;
    border: none;
    color: #166534;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.error-banner[b-fggyfo33c3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.error-banner button[b-fggyfo33c3] {
    background: none;
    border: none;
    color: #991B1B;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ===== Loading ===== */
.loading-indicator[b-fggyfo33c3] {
    text-align: center;
    padding: 40px;
    color: #B987F9;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

/* ===== Filters Bar ===== */
.filters-bar[b-fggyfo33c3] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-fggyfo33c3] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-fggyfo33c3] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-fggyfo33c3] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-fggyfo33c3] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-fggyfo33c3]::placeholder {
    color: #B987F9;
}

.clear-search[b-fggyfo33c3] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #B987F9;
    display: flex;
    align-items: center;
    padding: 4px;
}

.clear-search:hover[b-fggyfo33c3] {
    color: #6C2DA8;
}

/* ===== Filter Chips ===== */
.filter-chips[b-fggyfo33c3] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip[b-fggyfo33c3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-fggyfo33c3] {
    background-color: #EDE6F5;
}

.filter-chip.active[b-fggyfo33c3] {
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-color: #6C2DA8;
}

.filter-chip.active .chip-count[b-fggyfo33c3] {
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.chip-count[b-fggyfo33c3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background-color: #EDE6F5;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    color: #6C2DA8;
}

/* ===== Table Card ===== */
.table-card[b-fggyfo33c3] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

.data-table[b-fggyfo33c3] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.data-table thead tr[b-fggyfo33c3] {
    border-bottom: 2px solid #EDE6F5;
}

.data-table th[b-fggyfo33c3] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr[b-fggyfo33c3] {
    border-bottom: 1px solid #EDE6F5;
}

.data-table tbody tr:last-child[b-fggyfo33c3] {
    border-bottom: none;
}

.data-table tbody tr:hover[b-fggyfo33c3] {
    background-color: #F6F1FA;
}

.data-table td[b-fggyfo33c3] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

.clickable-row[b-fggyfo33c3] {
    cursor: pointer;
}

.col-name[b-fggyfo33c3] {
    width: 20%;
    font-weight: 600;
    color: #1D0F29;
}

.col-email[b-fggyfo33c3] {
    width: 22%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-conference[b-fggyfo33c3] {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-status[b-fggyfo33c3] {
    width: 14%;
}

.col-date[b-fggyfo33c3] {
    width: 12%;
}

.col-actions[b-fggyfo33c3] {
    width: 12%;
    text-align: left;
}

.name-cell[b-fggyfo33c3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-initials[b-fggyfo33c3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.user-name-text[b-fggyfo33c3] {
    font-weight: 600;
    color: #1D0F29;
}

.email-text[b-fggyfo33c3] {
    color: #4B3C57;
}

/* ===== Status Badges ===== */
.status-badge[b-fggyfo33c3] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.large[b-fggyfo33c3] {
    padding: 6px 16px;
    font-size: 13px;
}

.badge-pending[b-fggyfo33c3] {
    background-color: #FEF3C7;
    color: #92400E;
}

.badge-inprogress[b-fggyfo33c3] {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.badge-resolved[b-fggyfo33c3] {
    background-color: #D1FAE5;
    color: #065F46;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-fggyfo33c3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
}

.action-btn[b-fggyfo33c3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover[b-fggyfo33c3] {
    background-color: #F6F1FA;
}

.action-btn img[b-fggyfo33c3] {
    width: 16px;
    height: 16px;
}

/* ===== Empty State ===== */
.empty-state[b-fggyfo33c3] {
    text-align: center;
    padding: 40px !important;
    color: #B987F9;
}

.empty-state p[b-fggyfo33c3] {
    margin: 12px 0 0 0;
    font-size: 14px;
}

.btn-clear-filters[b-fggyfo33c3] {
    margin-top: 12px;
    padding: 8px 20px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    border: none;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-clear-filters:hover[b-fggyfo33c3] {
    background-color: #5D2A8C;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-fggyfo33c3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-fggyfo33c3 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-fggyfo33c3] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-fggyfo33c3] {
    right: 0;
}

.panel-header[b-fggyfo33c3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-fggyfo33c3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-fggyfo33c3] {
    background-color: #F6F1FA;
}

.panel-content[b-fggyfo33c3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.panel-footer[b-fggyfo33c3] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

/* ===== Request Detail Header ===== */
.request-header-section[b-fggyfo33c3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.request-avatar[b-fggyfo33c3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #6C2DA8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 24px;
}

.request-name[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

/* ===== Detail Sections ===== */
.detail-section[b-fggyfo33c3] {
    margin-bottom: 20px;
}

.detail-label[b-fggyfo33c3] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.contact-link[b-fggyfo33c3] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-fggyfo33c3] {
    color: #5D2A8C;
}

.contact-link svg[b-fggyfo33c3] {
    flex-shrink: 0;
}

.message-content[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.7;
    padding: 16px;
    background-color: #F6F1FA;
    border-radius: 8px;
    white-space: pre-wrap;
}

/* ===== Form Select ===== */
.form-select[b-fggyfo33c3] {
    width: 100%;
    height: 46px;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-select:focus[b-fggyfo33c3] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

/* ===== Close Panel Button ===== */
.btn-close-panel[b-fggyfo33c3] {
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-panel:hover[b-fggyfo33c3] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

/* ===== Modal ===== */
.modal-overlay[b-fggyfo33c3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-fggyfo33c3 0.2s ease;
}

.modal-dialog[b-fggyfo33c3] {
    width: 100%;
    max-width: 420px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-fggyfo33c3 0.2s ease;
}

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

.modal-header[b-fggyfo33c3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-fggyfo33c3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-fggyfo33c3] {
    background-color: #F6F1FA;
}

.modal-body[b-fggyfo33c3] {
    padding: 24px;
}

.modal-body p[b-fggyfo33c3] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.modal-body p:last-child[b-fggyfo33c3] {
    margin-bottom: 0;
}

.warning-text[b-fggyfo33c3] {
    color: #DC2626 !important;
    font-weight: 500;
}

.modal-footer[b-fggyfo33c3] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.btn-cancel[b-fggyfo33c3] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-fggyfo33c3] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-delete[b-fggyfo33c3] {
    flex: 1;
    padding: 14px 24px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-fggyfo33c3] {
    background-color: #B91C1C;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1200px) {
    .col-conference[b-fggyfo33c3] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-fggyfo33c3] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .col-date[b-fggyfo33c3] {
        display: none;
    }

    .col-email[b-fggyfo33c3] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-fggyfo33c3] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/UnmatchedPaymentEvents.razor.rz.scp.css */
/* ===== Unmatched Payment Events Page ===== */
.unmatched-page[b-e73x0iidd7] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-e73x0iidd7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-e73x0iidd7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-e73x0iidd7] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.page-subtitle[b-e73x0iidd7] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    max-width: 760px;
}

/* ===== States ===== */
.loading-state[b-e73x0iidd7] {
    text-align: center;
    padding: 40px;
    color: #B987F9;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

.empty-state[b-e73x0iidd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
}

.empty-state p[b-e73x0iidd7] {
    margin: 0;
    font-size: 15px;
}

.error-banner[b-e73x0iidd7] {
    padding: 12px 16px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

/* ===== Table ===== */
.table-card[b-e73x0iidd7] {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.unmatched-table[b-e73x0iidd7] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}

.unmatched-table thead th[b-e73x0iidd7] {
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #EDE6F5;
}

.unmatched-table tbody td[b-e73x0iidd7] {
    padding: 12px 16px;
    color: #1D0F29;
    border-bottom: 1px solid #F3EEF8;
    vertical-align: middle;
}

.unmatched-table tbody tr.row:hover[b-e73x0iidd7] {
    background-color: #FBF8FD;
}

.col-time[b-e73x0iidd7] {
    width: 180px;
    white-space: nowrap;
    color: #4B3C57;
    font-variant-numeric: tabular-nums;
}

.col-type code[b-e73x0iidd7] {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: #6C2DA8;
    background-color: #F6F1FA;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.col-stripe[b-e73x0iidd7],
.col-pi[b-e73x0iidd7] {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: #4B3C57;
}

.col-actions[b-e73x0iidd7] {
    text-align: right;
    white-space: nowrap;
    width: 140px;
}

.btn-toggle[b-e73x0iidd7] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #E1D2F0;
    background-color: #F6F1FA;
    color: #6C2DA8;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-toggle:hover[b-e73x0iidd7] {
    background-color: #EDE6F5;
    border-color: #B987F9;
}

.payload-row td[b-e73x0iidd7] {
    background-color: #FBF8FD;
    padding: 0;
    border-bottom: 1px solid #F3EEF8;
}

.payload[b-e73x0iidd7] {
    margin: 0;
    padding: 14px 18px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: #1D0F29;
    white-space: pre-wrap;
    word-break: break-all;
}
/* /Pages/WorkshopRegistrations.razor.rz.scp.css */
/* ===== Registrations Page ===== */
.registrations-page[b-kymupw6j4l] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-kymupw6j4l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.header-left[b-kymupw6j4l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-kymupw6j4l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-kymupw6j4l] {
    color: #5D2A8C;
}

.page-title[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.page-subtitle[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Filters Bar ===== */
.filters-bar[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.search-box[b-kymupw6j4l] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-icon[b-kymupw6j4l] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.search-input[b-kymupw6j4l] {
    width: 100%;
    padding: 10px 40px 10px 44px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.search-input:focus[b-kymupw6j4l] {
    outline: none;
    background-color: #FFFFFF;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.search-input[b-kymupw6j4l]::placeholder {
    color: #B987F9;
}

.clear-search[b-kymupw6j4l] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search:hover[b-kymupw6j4l] {
    background-color: #EDE6F5;
    color: #6C2DA8;
}

/* ===== Filter Chips ===== */
.filter-chips[b-kymupw6j4l] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.filter-chip[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #F6F1FA;
    border: 2px solid transparent;
    border-radius: 24px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-kymupw6j4l] {
    background-color: #EDE6F5;
}

.filter-chip.active[b-kymupw6j4l] {
    background-color: #6C2DA8;
    border-color: #6C2DA8;
}

.filter-chip.active .chip-label[b-kymupw6j4l] {
    color: #FFFFFF;
}

.filter-chip.status-paid.active[b-kymupw6j4l] {
    background-color: #03543F;
    border-color: #03543F;
}

.filter-chip.status-pending.active[b-kymupw6j4l] {
    background-color: #92400E;
    border-color: #92400E;
}

.filter-chip.status-refunded.active[b-kymupw6j4l] {
    background-color: #991B1B;
    border-color: #991B1B;
}

.filter-chip.status-waitlist.active[b-kymupw6j4l] {
    background-color: #6B21A8;
    border-color: #6B21A8;
}

.chip-label[b-kymupw6j4l] {
    font-size: 14px;
    font-weight: 500;
    color: #4B3C57;
}

.chip-count[b-kymupw6j4l] {
    font-size: 12px;
    font-weight: 700;
    color: #6C2DA8;
    background-color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.filter-chip.status-paid .chip-count[b-kymupw6j4l] {
    color: #03543F;
}

.filter-chip.status-pending .chip-count[b-kymupw6j4l] {
    color: #92400E;
}

.filter-chip.status-refunded .chip-count[b-kymupw6j4l] {
    color: #991B1B;
}

.filter-chip.status-waitlist .chip-count[b-kymupw6j4l] {
    color: #6B21A8;
}

/* ===== Table Card ===== */
.table-card[b-kymupw6j4l] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: 0;
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Registrations Table ===== */
.registrations-table[b-kymupw6j4l] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.registrations-table thead tr[b-kymupw6j4l] {
    background-color: #F6F1FA;
}

.registrations-table th[b-kymupw6j4l] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #EDE6F5;
}

.registrations-table th.sortable[b-kymupw6j4l] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.registrations-table th.sortable:hover[b-kymupw6j4l] {
    background-color: #EDE6F5;
}

.registrations-table th.sortable span[b-kymupw6j4l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-icon[b-kymupw6j4l] {
    transition: transform 0.2s ease;
}

.sort-icon.desc[b-kymupw6j4l] {
    transform: rotate(180deg);
}

.registrations-table tbody tr[b-kymupw6j4l] {
    border-bottom: 1px solid #EDE6F5;
    transition: background-color 0.2s ease;
}

.registrations-table tbody tr:last-child[b-kymupw6j4l] {
    border-bottom: none;
}

.registrations-table tbody tr:hover[b-kymupw6j4l] {
    background-color: #F6F1FA;
}

.registrations-table td[b-kymupw6j4l] {
    padding: 14px 16px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Column Styles ===== */
.col-name[b-kymupw6j4l] {
    width: 18%;
}

.name-cell[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendee-initials[b-kymupw6j4l] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #EF8121;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.attendee-name[b-kymupw6j4l] {
    font-weight: 600;
    color: #1D0F29;
}

.col-email[b-kymupw6j4l] {
    width: 20%;
}

.email-link[b-kymupw6j4l] {
    color: #6C2DA8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.email-link:hover[b-kymupw6j4l] {
    color: #5D2A8C;
    text-decoration: underline;
}

.col-phone[b-kymupw6j4l] {
    width: 12%;
}

.col-organization[b-kymupw6j4l] {
    width: 15%;
}

.col-role[b-kymupw6j4l] {
    width: 12%;
}

/* ===== Loading / Error States ===== */
.loading-state[b-kymupw6j4l],
.error-state[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #4B3C57;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

.error-state[b-kymupw6j4l] {
    color: #991B1B;
    background-color: #FEF2F2;
}

.col-date[b-kymupw6j4l] {
    width: 12%;
}

.col-status[b-kymupw6j4l] {
    width: 10%;
}

.col-amount[b-kymupw6j4l] {
    width: 8%;
    font-weight: 600;
}

.col-actions[b-kymupw6j4l] {
    width: 5%;
    text-align: center;
}

.empty-text[b-kymupw6j4l] {
    color: #B987F9;
    font-style: italic;
}

/* ===== Status Badge ===== */
.status-badge[b-kymupw6j4l] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-paid[b-kymupw6j4l] {
    background-color: #DEF7EC;
    color: #03543F;
}

.status-badge.status-pending[b-kymupw6j4l] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-refunded[b-kymupw6j4l] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.status-badge.status-disputed[b-kymupw6j4l] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-badge.status-waitlist[b-kymupw6j4l] {
    background-color: #EDE9FE;
    color: #6B21A8;
}

/* ===== Position Badge (Waitlist) ===== */
.col-position[b-kymupw6j4l] {
    width: 80px;
    text-align: center;
}

.position-badge[b-kymupw6j4l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    background-color: #EDE9FE;
    color: #6B21A8;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 14px;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-btn[b-kymupw6j4l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-btn:hover[b-kymupw6j4l] {
    background-color: #EDE6F5;
}

.action-btn.promote-btn[b-kymupw6j4l] {
    color: #047857;
}

.action-btn.promote-btn:hover[b-kymupw6j4l] {
    background-color: #D1FAE5;
}

/* ===== Empty State ===== */
.empty-state[b-kymupw6j4l] {
    text-align: center;
    padding: 60px 20px !important;
    color: #4B3C57;
}

.empty-state svg[b-kymupw6j4l] {
    margin-bottom: 16px;
}

.empty-state p[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
}

.btn-clear-filters[b-kymupw6j4l] {
    padding: 10px 20px;
    background-color: #F6F1FA;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-clear-filters:hover[b-kymupw6j4l] {
    background-color: #EDE6F5;
}

/* ===== Pagination ===== */
.pagination[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.pagination-controls[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background-color: transparent;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-kymupw6j4l] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.page-btn.active[b-kymupw6j4l] {
    background-color: #6C2DA8;
    color: #FFFFFF;
    border-color: #6C2DA8;
}

.page-btn:disabled[b-kymupw6j4l] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-ellipsis[b-kymupw6j4l] {
    padding: 0 8px;
    color: #4B3C57;
}

.page-size-selector[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size-selector label[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
}

.page-size-selector select[b-kymupw6j4l] {
    padding: 8px 28px 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #F6F1FA;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B3C57' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ===== Side Panel ===== */
.panel-overlay[b-kymupw6j4l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-kymupw6j4l 0.2s ease;
}

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

.side-panel[b-kymupw6j4l] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-kymupw6j4l] {
    right: 0;
}

.panel-header[b-kymupw6j4l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-kymupw6j4l] {
    background-color: #F6F1FA;
}

.panel-content[b-kymupw6j4l] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.attendee-header-section[b-kymupw6j4l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.attendee-avatar-large[b-kymupw6j4l] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #EF8121;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.attendee-name-large[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 12px 0;
}

.attendee-status-badge[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attendee-status-badge.status-paid[b-kymupw6j4l] {
    background-color: #DEF7EC;
    color: #03543F;
}

.attendee-status-badge.status-pending[b-kymupw6j4l] {
    background-color: #FEF3C7;
    color: #92400E;
}

.attendee-status-badge.status-refunded[b-kymupw6j4l] {
    background-color: #FEE2E2;
    color: #991B1B;
}

.attendee-status-badge.status-disputed[b-kymupw6j4l] {
    background-color: #FEF3C7;
    color: #92400E;
}

.attendee-status-badge.status-waitlist[b-kymupw6j4l] {
    background-color: #EDE9FE;
    color: #6B21A8;
}

.detail-section[b-kymupw6j4l] {
    margin-bottom: 20px;
}

.detail-section.half[b-kymupw6j4l] {
    flex: 1;
}

.detail-row[b-kymupw6j4l] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-kymupw6j4l] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-description[b-kymupw6j4l] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

.price-value[b-kymupw6j4l] {
    font-size: 18px;
    font-weight: 700;
    color: #6C2DA8;
}

.contact-link[b-kymupw6j4l] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-kymupw6j4l] {
    color: #5D2A8C;
}

.contact-link svg[b-kymupw6j4l] {
    flex-shrink: 0;
}

.panel-footer[b-kymupw6j4l] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-close-panel[b-kymupw6j4l] {
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-panel:hover[b-kymupw6j4l] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1200px) {
    .col-organization[b-kymupw6j4l] {
        display: none;
    }

    .filter-stats[b-kymupw6j4l] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-phone[b-kymupw6j4l] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .filters-bar[b-kymupw6j4l] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-kymupw6j4l] {
        max-width: 100%;
    }

    .filter-group[b-kymupw6j4l] {
        justify-content: space-between;
    }

    .pagination[b-kymupw6j4l] {
        flex-direction: column;
        align-items: center;
    }

    .col-date[b-kymupw6j4l] {
        display: none;
    }

    .col-amount[b-kymupw6j4l] {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .side-panel[b-kymupw6j4l] {
        width: 100%;
        right: -100%;
    }
}
/* /Pages/Workshops.razor.rz.scp.css */
/* ===== Workshops Page ===== */
.workshops-page[b-1w64htovns] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Page Header ===== */
.page-header[b-1w64htovns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.page-title[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.btn-add[b-1w64htovns] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add:hover[b-1w64htovns] {
    background-color: #5D2A8C;
}

.btn-add svg[b-1w64htovns] {
    stroke: #FFFFFF;
}

/* ===== Table Card ===== */
.table-card[b-1w64htovns] {
    background-color: var(--color-white);
    border-radius: 6px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid #B987F9;
    overflow: hidden;
}

/* ===== Workshops Table ===== */
.workshops-table[b-1w64htovns] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.workshops-table thead tr[b-1w64htovns] {
    border-bottom: 2px solid #EDE6F5;
}

.workshops-table th[b-1w64htovns] {
    text-align: left;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workshops-table tbody tr[b-1w64htovns] {
    border-bottom: 1px solid #EDE6F5;
}

.workshops-table tbody tr:last-child[b-1w64htovns] {
    border-bottom: none;
}

.workshops-table tbody tr:hover[b-1w64htovns] {
    background-color: #F6F1FA;
}

.workshops-table td[b-1w64htovns] {
    padding: 12px 8px;
    font-size: 14px;
    color: #4B3C57;
    vertical-align: middle;
}

/* ===== Drag Handle ===== */
.col-drag[b-1w64htovns] {
    width: 3%;
    text-align: center;
}

.drag-handle[b-1w64htovns] {
    cursor: grab;
    color: #B987F9;
    font-size: 18px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.drag-handle:hover[b-1w64htovns] {
    color: #6C2DA8;
    background-color: #F6F1FA;
}

.drag-handle:active[b-1w64htovns] {
    cursor: grabbing;
}

[b-1w64htovns] .sortable-ghost {
    opacity: 0.4;
    background-color: #EDE6F5;
}

[b-1w64htovns] .sortable-chosen {
    background-color: #F6F1FA;
}

/* ===== Column Styles ===== */
.col-checkbox[b-1w64htovns] {
    width: 3%;
    text-align: center;
}

.col-checkbox input[type="checkbox"][b-1w64htovns] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6C2DA8;
}

.col-title[b-1w64htovns] {
    width: 28%;
    font-weight: 600;
    color: #1D0F29;
}

.title-text[b-1w64htovns] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.col-datetime[b-1w64htovns] {
    width: 12%;
}

.datetime-cell[b-1w64htovns] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-value[b-1w64htovns] {
    font-weight: 500;
    color: #1D0F29;
}

.time-value[b-1w64htovns] {
    font-size: 13px;
    color: #4B3C57;
}

.col-price[b-1w64htovns] {
    width: 7%;
    font-weight: 600;
}

.col-ceus[b-1w64htovns] {
    width: 6%;
}

.col-seats[b-1w64htovns] {
    width: 8%;
    text-align: left;
}

.seats-link[b-1w64htovns] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Green - Full seats */
.seats-link.seats-full[b-1w64htovns] {
    background-color: #D1FAE5;
}

.seats-link.seats-full:hover[b-1w64htovns] {
    background-color: #A7F3D0;
}

.seats-link.seats-full .seats-count[b-1w64htovns] {
    color: #047857;
}

.seats-link.seats-full .seats-label[b-1w64htovns] {
    color: #065F46;
}

/* Blue - Mid range */
.seats-link.seats-mid[b-1w64htovns] {
    background-color: #DBEAFE;
}

.seats-link.seats-mid:hover[b-1w64htovns] {
    background-color: #BFDBFE;
}

.seats-link.seats-mid .seats-count[b-1w64htovns] {
    color: #1D4ED8;
}

.seats-link.seats-mid .seats-label[b-1w64htovns] {
    color: #1E40AF;
}

/* Yellow - Low seats */
.seats-link.seats-low[b-1w64htovns] {
    background-color: #FEF3C7;
}

.seats-link.seats-low:hover[b-1w64htovns] {
    background-color: #FDE68A;
}

.seats-link.seats-low .seats-count[b-1w64htovns] {
    color: #B45309;
}

.seats-link.seats-low .seats-label[b-1w64htovns] {
    color: #92400E;
}

.seats-count[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.seats-label[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

/* Empty state - no registrations */
.seats-empty[b-1w64htovns] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #FEF3C7;
    border-radius: 20px;
}

.seats-count-empty[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #B45309;
}

.seats-empty .seats-label[b-1w64htovns] {
    color: #92400E;
}

.waitlist-link[b-1w64htovns] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #EDE9FE;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.waitlist-link:hover[b-1w64htovns] {
    background-color: #DDD6FE;
}

.waitlist-count[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6B21A8;
}

.waitlist-label[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #7C3AED;
}

.col-speakers[b-1w64htovns] {
    width: 16%;
}

.speakers-list-compact[b-1w64htovns] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.speakers-list-compact li[b-1w64htovns] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.speaker-dot[b-1w64htovns] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6C2DA8;
    flex-shrink: 0;
}

.speaker-short-name[b-1w64htovns] {
    font-size: 12px;
    color: #4B3C57;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speaker-item-clickable[b-1w64htovns] {
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.speaker-item-clickable:hover[b-1w64htovns] {
    background-color: #EDE6F5;
}

.speaker-item-clickable:hover .speaker-short-name[b-1w64htovns] {
    color: #6C2DA8;
}

.col-waitlist[b-1w64htovns] {
    width: 8%;
}

.col-actions[b-1w64htovns] {
    width: 7%;
    text-align: left;
}

/* ===== Empty State ===== */
.empty-text[b-1w64htovns] {
    color: #B987F9;
    font-style: italic;
    font-size: 13px;
}

/* ===== Action Buttons ===== */
.actions-wrapper[b-1w64htovns] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    justify-content: flex-start;
}

.action-btn[b-1w64htovns] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.action-btn:hover:not(:disabled)[b-1w64htovns] {
    background-color: #F6F1FA;
}

.action-btn:disabled[b-1w64htovns],
.action-btn.disabled[b-1w64htovns] {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-btn img[b-1w64htovns] {
    width: 14px;
    height: 14px;
}

/* ===== Side Panel Overlay ===== */
.panel-overlay[b-1w64htovns] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-1w64htovns 0.2s ease;
}

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

/* ===== Side Panel ===== */
.side-panel[b-1w64htovns] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open[b-1w64htovns] {
    right: 0;
}

.panel-header[b-1w64htovns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.panel-title[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
    margin: 0;
}

.panel-close-btn[b-1w64htovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.panel-close-btn:hover[b-1w64htovns] {
    background-color: #F6F1FA;
}

.panel-content[b-1w64htovns] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.workshop-detail-section[b-1w64htovns] {
    margin-bottom: 20px;
}

.workshop-detail-section.half[b-1w64htovns] {
    flex: 1;
}

.detail-row[b-1w64htovns] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-label[b-1w64htovns] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.detail-value[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.5;
}

.detail-title[b-1w64htovns] {
    font-size: 18px;
    font-weight: 600;
    color: #1D0F29;
}

.detail-description[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0;
    line-height: 1.7;
}

[b-1w64htovns] .detail-description p {
    margin: 0 0 8px 0;
}

[b-1w64htovns] .detail-description p:last-child {
    margin-bottom: 0;
}

[b-1w64htovns] .detail-description ul,
[b-1w64htovns] .detail-description ol {
    margin: 0 0 8px 0;
    padding-left: 24px;
}

[b-1w64htovns] .detail-description li {
    margin-bottom: 4px;
}

.price-value[b-1w64htovns] {
    font-size: 20px;
    font-weight: 700;
    color: #6C2DA8;
}

.fully-booked-text[b-1w64htovns] {
    color: #6C2DA8;
    font-weight: 600;
}

.speakers-list[b-1w64htovns] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.speaker-tag[b-1w64htovns] {
    display: inline-block;
    padding: 6px 12px;
    background-color: #EDE6F5;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    border-radius: 6px;
}

.panel-footer[b-1w64htovns] {
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
    flex-shrink: 0;
}

.btn-edit-panel[b-1w64htovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-edit-panel:hover[b-1w64htovns] {
    background-color: #5D2A8C;
}

.btn-edit-panel img[b-1w64htovns] {
    filter: brightness(0) invert(1);
}

/* ===== Panel Back Button ===== */
.panel-back-btn[b-1w64htovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #6C2DA8;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.panel-back-btn:hover[b-1w64htovns] {
    background-color: #F6F1FA;
}

.btn-back-panel[b-1w64htovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #6C2DA8;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back-panel:hover[b-1w64htovns] {
    background-color: #F6F1FA;
}

/* ===== Speakers Detail List ===== */
.speakers-detail-list[b-1w64htovns] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.speaker-item[b-1w64htovns] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: #F6F1FA;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.speaker-item.clickable[b-1w64htovns] {
    cursor: pointer;
}

.speaker-item.clickable:hover[b-1w64htovns] {
    background-color: #EDE6F5;
}

.speaker-initials[b-1w64htovns] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

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

.speaker-name[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speaker-credentials[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
}

.speaker-chevron[b-1w64htovns] {
    color: #6C2DA8;
    flex-shrink: 0;
}

/* ===== Speaker Detail View ===== */
.speaker-header-section[b-1w64htovns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #F6F1FA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.speaker-photo-large[b-1w64htovns] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.speaker-avatar-large[b-1w64htovns] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.speaker-name-large[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0 0 8px 0;
}

.speaker-credentials-large[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #6C2DA8;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.speaker-country[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #4B3C57;
    margin: 0;
}

/* ===== Contact Links ===== */
.contact-links[b-1w64htovns] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-link[b-1w64htovns] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6C2DA8;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-link:hover[b-1w64htovns] {
    color: #5D2A8C;
}

.contact-link svg[b-1w64htovns] {
    flex-shrink: 0;
}

/* ===== Speaker Selection ===== */
.selected-speakers[b-1w64htovns] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.selected-speaker-tag[b-1w64htovns] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #EDE6F5;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #4B3C57;
}

.remove-speaker-btn[b-1w64htovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #4B3C57;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.remove-speaker-btn:hover[b-1w64htovns] {
    background-color: #6C2DA8;
    color: #FFFFFF;
}

.speaker-search-container[b-1w64htovns] {
    position: relative;
}

.speaker-search-container.has-error .speaker-search-input[b-1w64htovns] {
    border-color: #EF4444;
}

.speaker-search-input-wrapper[b-1w64htovns] {
    position: relative;
}

.speaker-search-input-wrapper .search-icon[b-1w64htovns] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B987F9;
    pointer-events: none;
}

.speaker-search-input[b-1w64htovns] {
    padding-left: 40px !important;
}

.speaker-dropdown[b-1w64htovns] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 4px;
}

.speaker-dropdown-item[b-1w64htovns] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.speaker-dropdown-item:hover[b-1w64htovns] {
    background-color: #F6F1FA;
}

.speaker-dropdown-item:first-child[b-1w64htovns] {
    border-radius: 8px 8px 0 0;
}

.speaker-dropdown-item:last-child[b-1w64htovns] {
    border-radius: 0 0 8px 8px;
}

.speaker-dropdown-item:only-child[b-1w64htovns] {
    border-radius: 8px;
}

.speaker-dropdown-initials[b-1w64htovns] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.speaker-dropdown-info[b-1w64htovns] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.speaker-dropdown-name[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1D0F29;
}

.speaker-dropdown-credentials[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #4B3C57;
}

.speaker-dropdown-empty[b-1w64htovns] {
    padding: 16px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #B987F9;
    font-style: italic;
    text-align: center;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1400px) {
    .col-waitlist[b-1w64htovns] {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .table-card[b-1w64htovns] {
        padding: var(--spacing-md);
    }

    .workshops-table th[b-1w64htovns],
    .workshops-table td[b-1w64htovns] {
        padding: 12px 6px;
    }

    .col-ceus[b-1w64htovns] {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .col-speakers[b-1w64htovns] {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header[b-1w64htovns] {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .btn-add[b-1w64htovns] {
        width: 100%;
        justify-content: center;
    }

    .workshops-table th[b-1w64htovns],
    .workshops-table td[b-1w64htovns] {
        padding: 10px 4px;
        font-size: 12px;
    }

    .col-seats[b-1w64htovns] {
        display: none;
    }
}

/* ===== Form Styles ===== */
.form-group[b-1w64htovns] {
    margin-bottom: 20px;
}

.form-group.half[b-1w64htovns] {
    flex: 1;
}

.form-group.third[b-1w64htovns] {
    flex: 1;
}

.form-select[b-1w64htovns] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    cursor: pointer;
    appearance: auto;
}

.form-select:focus[b-1w64htovns] {
    outline: none;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-group.no-margin[b-1w64htovns] {
    margin-bottom: 0;
}

.form-label-small[b-1w64htovns] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #4B3C57;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.form-row[b-1w64htovns] {
    display: flex;
    gap: 16px;
}

.form-label[b-1w64htovns] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4B3C57;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-input[b-1w64htovns] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-1w64htovns] {
    outline: none;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-input[b-1w64htovns]::placeholder {
    color: #B987F9;
}

.form-input.input-error[b-1w64htovns] {
    border-color: #EF4444;
}

.form-input.input-error:focus[b-1w64htovns] {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input-with-prefix[b-1w64htovns] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-1w64htovns] {
    position: absolute;
    left: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    pointer-events: none;
}

.form-input.with-prefix[b-1w64htovns] {
    padding-left: 28px;
}

/* ===== Quill Editor ===== */
.quill-wrapper[b-1w64htovns] {
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    overflow: hidden;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
}

.quill-wrapper:focus-within[b-1w64htovns] {
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

[b-1w64htovns] .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid #EDE6F5 !important;
    background-color: transparent;
    padding: 6px 8px !important;
}

[b-1w64htovns] .ql-container.ql-snow {
    border: none !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

[b-1w64htovns] .ql-editor {
    min-height: 180px;
    max-height: 350px;
    overflow-y: auto;
    color: #1D0F29;
    padding: 12px 14px;
}

[b-1w64htovns] .ql-editor.ql-blank::before {
    color: #B987F9;
    font-style: normal;
}

[b-1w64htovns] .ql-snow .ql-stroke {
    stroke: #4B3C57;
}

[b-1w64htovns] .ql-snow .ql-fill {
    fill: #4B3C57;
}

[b-1w64htovns] .ql-snow button:hover .ql-stroke,
[b-1w64htovns] .ql-snow button.ql-active .ql-stroke {
    stroke: #6C2DA8;
}

[b-1w64htovns] .ql-snow button:hover .ql-fill,
[b-1w64htovns] .ql-snow button.ql-active .ql-fill {
    fill: #6C2DA8;
}

.form-textarea[b-1w64htovns] {
    width: 100%;
    padding: 12px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1D0F29;
    background-color: #FFFFFF;
    border: 1px solid #EDE6F5;
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-textarea:focus[b-1w64htovns] {
    outline: none;
    border-color: #6C2DA8;
    box-shadow: 0 0 0 3px rgba(108, 45, 168, 0.1);
}

.form-textarea[b-1w64htovns]::placeholder {
    color: #B987F9;
}

.error-message[b-1w64htovns] {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #EF4444;
    margin-top: 6px;
}

.form-footer[b-1w64htovns] {
    display: flex;
    gap: 12px;
}

/* ===== Form Buttons ===== */
.btn-cancel[b-1w64htovns] {
    flex: 1;
    padding: 14px 24px;
    background-color: #FFFFFF;
    color: #4B3C57;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #EDE6F5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-1w64htovns] {
    background-color: #F6F1FA;
    border-color: #B987F9;
}

.btn-save[b-1w64htovns] {
    flex: 1;
    padding: 14px 24px;
    background-color: #6C2DA8;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover[b-1w64htovns] {
    background-color: #5D2A8C;
}

/* ===== Delete Confirmation Modal ===== */
.modal-overlay[b-1w64htovns] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-1w64htovns 0.2s ease;
}

.modal-dialog[b-1w64htovns] {
    background-color: #FFFFFF;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    margin: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-1w64htovns 0.3s ease;
}

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

.modal-header[b-1w64htovns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EDE6F5;
}

.modal-title[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1D0F29;
    margin: 0;
}

.modal-close-btn[b-1w64htovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4B3C57;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-1w64htovns] {
    background-color: #F6F1FA;
}

.modal-body[b-1w64htovns] {
    padding: 24px;
}

.modal-body p[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #4B3C57;
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.modal-body p:last-child[b-1w64htovns] {
    margin-bottom: 0;
}

.modal-body .warning-text[b-1w64htovns] {
    color: #EF4444;
    font-weight: 500;
}

.modal-footer[b-1w64htovns] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #EDE6F5;
}

.modal-footer .btn-cancel[b-1w64htovns] {
    flex: 1;
}

.btn-delete[b-1w64htovns] {
    flex: 1;
    padding: 14px 24px;
    background-color: #EF4444;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete:hover[b-1w64htovns] {
    background-color: #DC2626;
}

/* ===== View Registrations Link ===== */
.view-registrations-link[b-1w64htovns] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.registrations-summary[b-1w64htovns] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: #F6F1FA;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

.view-registrations-link:hover .registrations-summary[b-1w64htovns] {
    background-color: #EDE6F5;
}

.registrations-icon[b-1w64htovns] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #EF8121;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.registrations-info[b-1w64htovns] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.registrations-count[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1D0F29;
}

.registrations-action[b-1w64htovns] {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #6C2DA8;
}

.registrations-chevron[b-1w64htovns] {
    color: #6C2DA8;
    flex-shrink: 0;
}

/* ===== Translation Language Bar ===== */
.translation-lang-bar[b-1w64htovns] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #F9F5FF;
    border: 1px solid #EDE6F5;
    border-radius: 6px;
    margin-bottom: 12px;
}

.translation-lang-tab[b-1w64htovns] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8B7A9E;
    background: #fff;
    border: 1px solid #E0D4ED;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.translation-lang-tab:hover[b-1w64htovns] {
    color: #6C2DA8;
    border-color: #B987F9;
}

.translation-lang-tab-active[b-1w64htovns] {
    color: #fff;
    background: #6C2DA8;
    border-color: #6C2DA8;
    font-weight: 600;
}

.translation-lang-badge[b-1w64htovns] {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    text-transform: lowercase;
}

/* ===== Side Panel Responsive ===== */
@media screen and (max-width: 500px) {
    .side-panel[b-1w64htovns] {
        width: 100%;
        right: -100%;
    }
}