/* Admin-specific styles */

/* Hide Admin Management navigation for non-super_admin roles */
.nav-item[data-hidden-by-role="true"],
.nav-item:has(.nav-link[data-section="admin-management"])[data-hidden-by-role="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* COMPLETELY DELETE main site navigation (navbar) on admin dashboard - NO RIGHT-SIDE NAVIGATION */
/* Hide ALL navigation elements that are NOT the admin sidebar */
body .navbar:not(.admin-sidebar),
body .nav-container:not(.admin-sidebar .nav-container),
body .hamburger:not(.hamburger-menu-btn),
body .nav-menu:not(.admin-sidebar .nav-menu),
body .mobile-nav-toggle,
body .mobile-overlay:not(#sidebarOverlay),
body #navMenu,
body #hamburger:not(.hamburger-menu-btn),
body nav.navbar:not(.admin-sidebar .sidebar-nav),
body .navbar .nav-container:not(.admin-sidebar .nav-container),
body .navbar .hamburger:not(.hamburger-menu-btn),
body .navbar .nav-menu:not(.admin-sidebar .nav-menu),
body > nav:not(.admin-sidebar .sidebar-nav),
body > .navbar:not(.admin-sidebar),
body > .nav-container:not(.admin-sidebar .nav-container) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -9999px !important;
    right: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    transform: translateX(100%) !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* COMPLETELY DELETE any navigation menus that are NOT the admin sidebar */
nav:not(.admin-sidebar .sidebar-nav),
nav:not(.admin-sidebar .sidebar-nav) .nav-menu,
.nav-menu:not(.admin-sidebar .nav-menu),
.nav-menu.active:not(.admin-sidebar .nav-menu),
body .nav-menu:not(.admin-sidebar .nav-menu),
body .nav-menu.active:not(.admin-sidebar .nav-menu),
body nav.navbar:not(.admin-sidebar),
body nav.navbar .nav-menu:not(.admin-sidebar .nav-menu),
/* Additional selectors to catch any duplicate navigation */
body > nav:not(.admin-sidebar .sidebar-nav),
body > .navbar:not(.admin-sidebar),
header .navbar:not(.admin-sidebar),
header nav:not(.admin-sidebar .sidebar-nav),
/* FORCE ONLY ONE SIDEBAR - Remove ALL duplicates and other sidebars */
/* Hide ALL sidebars except the one with id="adminSidebar" */
/* Also hide any sidebar on the RIGHT side */
body > aside:not(.admin-sidebar),
body > aside.admin-sidebar ~ aside.admin-sidebar,
aside.admin-sidebar:not(#adminSidebar),
aside:not(#adminSidebar),
.sidebar:not(.admin-sidebar),
.sidebar:not(#adminSidebar),
.admin-sidebar:not(#adminSidebar),
aside[style*="right"],
.admin-sidebar[style*="right"],
aside.admin-sidebar[style*="right"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    position: fixed !important;
    left: -9999px !important;
    right: auto !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Force only ONE sidebar - the one with id="adminSidebar" */
/* Ensure sidebar is ALWAYS on LEFT, never on RIGHT */
aside.admin-sidebar:not(#adminSidebar),
.admin-sidebar:not(#adminSidebar),
aside[style*="right"]:not(#adminSidebar),
.admin-sidebar[style*="right"]:not(#adminSidebar) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    right: auto !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Force #adminSidebar to always be on LEFT */
#adminSidebar {
    left: 0 !important;
    right: auto !important;
}

/* On mobile/tablet, ensure only ONE sidebar is visible */
@media (max-width: 1024px) {
    /* Hide ALL sidebars except #adminSidebar */
    aside:not(#adminSidebar),
    .admin-sidebar:not(#adminSidebar),
    aside.admin-sidebar:not(#adminSidebar) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        z-index: -9999 !important;
    }
    
    /* Only show the sidebar with id="adminSidebar" when mobile-open */
    #adminSidebar:not(.mobile-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* When mobile-open, show sidebar and ensure navlinks text is visible */
    #adminSidebar.mobile-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Only show the sidebar with id="adminSidebar" when mobile-open */
    #adminSidebar:not(.mobile-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* When mobile-open, show sidebar and ensure navlinks text is visible */
    #adminSidebar.mobile-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force navlinks text to be visible when sidebar is open */
    #adminSidebar.mobile-open .link-text,
    #adminSidebar.mobile-open .logo-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }
    
    /* Ensure navlinks are fully visible */
    #adminSidebar.mobile-open .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Ensure ALL navlinks are in the dark blue sidebar only */
.nav-link:not(.admin-sidebar .nav-link),
.nav-menu:not(.admin-sidebar .nav-menu),
.nav-item:not(.admin-sidebar .nav-item),
nav:not(.admin-sidebar .sidebar-nav) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* COMPLETELY DELETE the main site nav-menu that slides from right - NO RIGHT-SIDE NAVIGATION */
body .nav-menu[style*="right"],
body .nav-menu.active[style*="right"],
.nav-menu[style*="right"]:not(.admin-sidebar .nav-menu),
.nav-menu.active[style*="right"]:not(.admin-sidebar .nav-menu),
body nav[style*="right"]:not(.admin-sidebar),
body .navbar[style*="right"]:not(.admin-sidebar) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* GLOBAL: Ensure sidebar navigation is ALWAYS visible on ALL screen sizes */
/* Desktop (1025px and above) */
@media (min-width: 1025px) {
    .admin-sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        left: 0 !important;
        right: auto !important; /* Never on right */
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 1000 !important;
        flex-direction: column !important;
        background: #1e40af !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Sidebar closed state on desktop */
    .admin-sidebar.sidebar-closed {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
    }
    
    .admin-sidebar.collapsed {
        width: 80px !important;
    }

    .admin-sidebar .sidebar-nav,
    .admin-sidebar .nav-menu,
    .admin-sidebar .nav-item,
    .admin-sidebar .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Left-align navlinks text on laptop/desktop */
    .admin-sidebar .nav-link {
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        direction: ltr !important;
    }

    .admin-sidebar .nav-link .link-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-align: left !important;
        text-align-last: left !important;
        margin-left: 0.75rem !important;
        direction: ltr !important;
        unicode-bidi: embed !important;
    }

    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: left !important;
    }
    
    /* Force left alignment for all navlinks */
    .admin-sidebar .nav-menu {
        text-align: left !important;
        align-items: flex-start !important;
    }
    
    .admin-sidebar .nav-item {
        text-align: left !important;
        align-items: flex-start !important;
    }
}

/* GLOBAL: Ensure navlinks are visible when sidebar is open on ALL sizes */
/* Apply to ALL screen sizes - desktop, tablet, mobile */
.admin-sidebar .sidebar-nav,
.admin-sidebar .nav-menu,
.admin-sidebar .nav-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.admin-sidebar .nav-link,
#adminSidebar .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

.admin-sidebar .nav-link i,
#adminSidebar .nav-link i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

.admin-sidebar .link-text,
.admin-sidebar .logo-text,
#adminSidebar .link-text,
#adminSidebar .logo-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* When sidebar is mobile-open, ensure navlinks are visible */
.admin-sidebar.mobile-open .sidebar-nav,
.admin-sidebar.mobile-open .nav-menu,
.admin-sidebar.mobile-open .nav-item,
.admin-sidebar.mobile-open .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.admin-sidebar.mobile-open .nav-link i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.admin-sidebar.mobile-open .link-text,
.admin-sidebar.mobile-open .logo-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When sidebar is collapsed, hide text but keep icons visible */
.admin-sidebar.collapsed .link-text,
.admin-sidebar.collapsed .logo-text {
    display: none !important;
}

.admin-sidebar.collapsed .nav-link i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile Touch Optimization */
* {
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: 2px;
}

body {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* Admin Login Styles */
.admin-login-container {
    min-height: 100vh;
    background: #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-header {
    margin-bottom: 2rem;
}

.login-header i {
    font-size: 3rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.login-header h1 {
    font-size: 2rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: #718096;
    font-size: 1.1rem;
}

.login-form {
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2d3748;
}

.login-form input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.login-form input:focus {
    outline: none;
    border-color: #1e40af;
}

/* Password input wrapper and toggle button */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 2.75rem;
    width: 100%;
    box-sizing: border-box;
}

.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    outline: none;
}

.password-toggle-btn:hover {
    color: #1e40af;
    background: rgba(30, 64, 175, 0.08);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
    background: rgba(30, 64, 175, 0.15);
}

.password-toggle-btn:focus {
    outline: none;
    color: #1e40af;
    background: rgba(30, 64, 175, 0.1);
}

.password-toggle-btn i {
    font-size: 1.1rem;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.password-toggle-btn:hover i {
    transform: scale(1.1);
}

.btn-full {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
}

.login-footer {
    margin-top: 2rem;
    text-align: center;
}

.back-link {
    color: #1e40af;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #1e3a8a;
}

/* REMOVED: All sidebar CSS - sidebar has been completely removed */

.admin-sidebar:not(.collapsed) .logo-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, width 0.3s ease;
}

/* Ensure icons and links remain visible when collapsed - override for mobile */
@media (max-width: 768px) {
    .admin-sidebar.collapsed .nav-link,
    .admin-sidebar.collapsed .nav-link i,
    .admin-sidebar.collapsed .nav-item,
    .admin-sidebar.collapsed .sidebar-nav,
    .admin-sidebar.collapsed .nav-menu {
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
        pointer-events: auto !important;
    }
}

/* Desktop and larger screens - ensure navigation is always visible and clickable */
@media (min-width: 1025px) {
    .admin-sidebar .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 2 !important;
    }
    
    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* When collapsed on desktop */
    .admin-sidebar.collapsed .nav-link {
        justify-content: center !important;
        align-items: center !important;
    }
    
    .admin-sidebar.collapsed .nav-link i {
        margin: 0 auto !important;
    }
    
    /* Ensure text labels are visible when NOT collapsed on desktop */
    .admin-sidebar:not(.collapsed) .link-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
    }
    
    .admin-sidebar:not(.collapsed) .logo-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
    }
}

.admin-sidebar.collapsed .nav-link {
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
}

.admin-sidebar.collapsed .nav-link i {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-sidebar.collapsed .sidebar-logo {
    justify-content: center;
    padding: 1rem 0;
}

.admin-sidebar.collapsed .sidebar-logo .logo-img {
    margin-right: 0;
}

/* Admin Main - Desktop Only */
@media (min-width: 1025px) {
.admin-main {
        margin-left: 280px;
    padding: 0;
    min-height: 100vh;
    background: #f8fafc;
        width: calc(100% - 280px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* When sidebar is closed on desktop, main content takes full width */
    .admin-sidebar.sidebar-closed ~ .admin-main,
    body.sidebar-closed .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .admin-main.sidebar-collapsed {
        margin-left: 80px;
        width: calc(100% - 80px);
    }
}

/* Admin Main - Mobile/Tablet (Adjusts based on sidebar state) */
@media (max-width: 1024px) {
    .admin-main {
        margin-left: 0 !important;
        padding: 0;
        min-height: 100vh;
        background: #f8fafc;
        width: 100% !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* When sidebar is open and collapsed (icons only - 80px) */
    body.sidebar-open-collapsed .admin-main {
        margin-left: 80px !important;
        width: calc(100% - 80px) !important;
    }
    
    /* When sidebar is open and NOT collapsed (full width - 280px) */
    body.sidebar-open-expanded .admin-main {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
    }
    
    /* On smaller screens where sidebar is 85vw when expanded */
    @media (max-width: 768px) {
        body.sidebar-open-expanded .admin-main {
            margin-left: 85vw !important;
            width: calc(100% - 85vw) !important;
        }
    }
    
    /* When sidebar is closed, main content is full width */
    body:not(.sidebar-open-collapsed):not(.sidebar-open-expanded) .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Admin Top Header */
.admin-top-header {
    background: #ffffff;
    border-bottom: 2px solid #e2e8f0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.header-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 0;
    padding-left: 0;
}

/* REMOVED: Hamburger Menu Button - mobile/tablet sidebar removed */

/* REMOVED: Hamburger menu and sidebar overlay styles - mobile/tablet sidebar removed */

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 101;
}

/* Calendar icon next to profile – matches user-profile-area style */
.header-calendar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #2d3748;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}
.header-calendar-btn:hover {
    background: #f8fafc;
    color: #1e40af;
}
.header-calendar-btn:active {
    background: #f1f5f9;
}
.header-calendar-btn i {
    font-size: 1.4rem;
}

/* Calendar popover */
.calendar-popover-wrapper {
    position: relative;
    z-index: 1001;
}

.calendar-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: 336px;
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow: hidden;
    pointer-events: none;
}

.calendar-popover.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.calendar-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.calendar-popover-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

.calendar-popover-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.calendar-popover-close:hover {
    background: #f1f5f9;
    color: #1e40af;
}

.calendar-popover-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.calendar-nav-btn:hover {
    background: #e2e8f0;
    color: #1e40af;
}

.calendar-month-year {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.calendar-grid-wrap {
    padding: 0 0.75rem 0.75rem;
    box-sizing: border-box;
    min-width: 0;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

.calendar-weekdays span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    min-height: 160px;
    min-width: 0;
}

.calendar-day-cell {
    aspect-ratio: 1;
    max-height: 36px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.calendar-day-cell .calendar-day-num {
    line-height: 1;
    flex-shrink: 0;
    z-index: 1;
}

.calendar-day-cell .calendar-day-event-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.calendar-day-cell.has-event .calendar-day-num {
    text-shadow: 0 0 2px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.3);
    font-weight: 600;
}

.calendar-day-cell.other-month {
    color: #94a3b8;
}

.calendar-day-cell.other-month.has-event .calendar-day-num {
    color: #1e293b;
}

.calendar-day-cell.today {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
}

.calendar-day-cell.has-event {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 500;
}

.calendar-day-cell.has-event .calendar-day-event-img {
    opacity: 0.9;
}

.calendar-day-cell.has-event.today {
    background: #2563eb;
    color: #fff;
}

.calendar-day-cell.has-event.today .calendar-day-event-img {
    opacity: 0.7;
}

.calendar-day-cell.has-event:hover,
.calendar-day-cell:hover {
    background: #2563eb;
    color: #fff;
}

.calendar-day-cell.has-event:hover .calendar-day-event-img,
.calendar-day-cell:hover .calendar-day-event-img {
    opacity: 0.6;
}

.calendar-day-cell.selected {
    background: #1e40af;
    color: #fff;
    font-weight: 600;
}

.calendar-day-cell.selected .calendar-day-event-img {
    opacity: 0.65;
}

.calendar-events-section {
    border-top: 1px solid #e2e8f0;
    padding: 0.75rem 1rem 1rem;
    max-height: 220px;
    overflow-y: auto;
}

.calendar-events-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

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

.calendar-event-item {
    display: block;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #2563eb;
    font-size: 0.8rem;
    color: #334155;
    text-decoration: none;
    transition: background 0.2s ease;
}

.calendar-event-item:hover {
    background: #eff6ff;
}

.calendar-event-item .event-item-title {
    font-weight: 600;
    display: block;
}

.calendar-event-item .event-item-meta {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

.calendar-event-item.past {
    border-left-color: #94a3b8;
    opacity: 0.85;
}

.calendar-events-empty {
    font-size: 0.8rem;
    color: #94a3b8;
    padding: 0.5rem 0;
}

/* Calendar popover – tablet */
@media (max-width: 768px) {
    .calendar-popover {
        width: min(336px, calc(100vw - 1.5rem));
    }
    
    .calendar-popover-header {
        padding: 0.6rem 0.75rem;
    }
    
    .calendar-popover-title {
        font-size: 0.9rem;
    }
    
    .calendar-grid-wrap {
        padding: 0 0.75rem 0.6rem;
    }
    
    .calendar-days {
        min-height: 140px;
    }
    
    .calendar-day-cell {
        max-height: 32px;
        font-size: 0.75rem;
        border-radius: 6px;
    }
    
    .calendar-weekdays {
        font-size: 0.6rem;
    }
    
    .calendar-events-section {
        padding: 0.6rem 0.75rem 0.75rem;
        max-height: 180px;
    }
    
    .calendar-events-title {
        font-size: 0.75rem;
    }
    
    .calendar-event-item {
        padding: 0.45rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* Calendar popover – mobile: fixed position, full-width */
@media (max-width: 480px) {
    .calendar-popover {
        position: fixed;
        top: 56px;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-width: none;
        transform: translateY(-8px) scale(0.95);
        border-radius: 12px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
    
    .calendar-popover.open {
        transform: translateY(0) scale(1);
    }
    
    .calendar-popover-header {
        padding: 0.6rem 0.75rem;
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .calendar-popover-title {
        font-size: 0.875rem;
    }
    
    .calendar-popover-close {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .calendar-popover-nav {
        padding: 0.5rem 0.75rem;
    }
    
    .calendar-nav-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .calendar-month-year {
        font-size: 0.85rem;
    }
    
    .calendar-grid-wrap {
        padding: 0 0.75rem 0.5rem;
    }
    
    .calendar-weekdays {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }
    
    .calendar-days {
        gap: 2px;
        min-height: 0;
        aspect-ratio: 7 / 6;
    }
    
    .calendar-day-cell {
        aspect-ratio: 1;
        max-height: 44px;
        min-height: 28px;
        font-size: 0.75rem;
        border-radius: 6px;
    }
    
    .calendar-events-section {
        padding: 0.6rem 0.75rem 0.75rem;
        max-height: 200px;
        -webkit-overflow-scrolling: touch;
    }
    
    .calendar-events-title {
        font-size: 0.75rem;
    }
    
    .calendar-event-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .calendar-event-item .event-item-title {
        font-size: 0.8rem;
    }
    
    .calendar-event-item .event-item-meta {
        font-size: 0.7rem;
    }
}

/* User Menu */
.user-menu-wrapper {
    position: relative;
    z-index: 1001;
}

.user-profile-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    color: #2d3748;
}

.user-profile-area:hover {
    background: #f8fafc;
}

.user-profile-area:active {
    background: #f1f5f9;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.user-profile-area:hover .user-avatar {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
}

.user-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
    white-space: nowrap;
    line-height: 1.2;
}

.user-role {
    font-size: 0.75rem;
    color: #718096;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.2;
}

.user-menu-arrow {
    font-size: 0.7rem;
    color: #94a3b8;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.user-menu-wrapper.active .user-menu-arrow {
    transform: rotate(180deg);
    color: #1e40af;
}

.user-menu-wrapper.active .user-profile-area {
    background: #f8fafc;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    min-width: 260px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow: hidden;
    backdrop-filter: blur(10px);
    pointer-events: none;
    display: block !important; /* Ensure it's always in the DOM flow */
}

.user-menu-wrapper.active .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
    overflow: hidden;
    position: relative;
}

.user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.user-menu-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.user-menu-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
    line-height: 1.3;
}

.user-menu-email {
    font-size: 0.8rem;
    color: #718096;
    line-height: 1.3;
    word-break: break-word;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.5rem;
    color: #4a5568;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.user-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #1e40af;
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.user-menu-item:hover {
    background: #f8fafc;
    color: #1e40af;
}

.user-menu-item:hover::before {
    transform: scaleY(1);
}

.user-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.user-menu-item:hover i {
    color: #1e40af;
    transform: scale(1.1);
}

.user-menu-item-danger {
    color: #718096;
}

.user-menu-item-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.user-menu-item-danger i {
    color: #f87171;
}

.user-menu-item-danger:hover i {
    color: #dc2626;
    transform: scale(1.1);
}

.user-menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}

/* Update admin section padding */
.admin-section {
    padding: 2rem;
    flex: 1;
}

.admin-main.sidebar-collapsed {
    margin-left: 80px;
    width: calc(100% - 80px);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    visibility: visible;
    opacity: 1;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}

.sidebar-logo .logo-img {
    margin-right: 0.75rem;
    transition: margin 0.3s ease;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo-text {
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
}

/* When collapsed, center logo */
.admin-sidebar.collapsed .sidebar-logo {
    justify-content: center;
}

.admin-sidebar.collapsed .sidebar-logo .logo-img {
    margin-right: 0;
}


/* Sidebar Navigation - ALWAYS VISIBLE */
.sidebar-nav {
    padding: 1.5rem 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex !important;
    flex-direction: column !important;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Opera */
}

/* Ensure text visibility and proper alignment */
.nav-link .link-text {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-wrap: break-word;
}

/* Ensure proper spacing for all navigation items - ALWAYS VISIBLE */
.nav-menu {
    list-style: none !important;
    margin: 0;
    padding: 0.75rem 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-item {
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    padding: 0;
    height: 48px;
    min-height: 48px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 0 30px 30px 0;
    margin-right: 0;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    gap: 0.875rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    user-select: none;
    -webkit-user-select: none;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1;
    transform: none !important;
}

/* Override any mobile menu styles that might affect admin sidebar - ensure admin nav links are always visible */
.admin-sidebar .nav-link,
.admin-sidebar .sidebar-nav .nav-link,
.admin-sidebar .nav-menu .nav-link,
.admin-sidebar .nav-item .nav-link,
.admin-sidebar .nav-link .link-text,
.admin-sidebar .nav-link i {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    transform: none !important;
    pointer-events: auto !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* CRITICAL: Ensure nav links are always clickable when sidebar is open */
.admin-sidebar.mobile-open .nav-link,
.admin-sidebar.mobile-open .sidebar-nav .nav-link,
.admin-sidebar.mobile-open .nav-menu .nav-link,
.admin-sidebar.mobile-open .nav-item .nav-link {
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    touch-action: manipulation !important;
}

/* Ensure link text is always visible */
.admin-sidebar .nav-link .link-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Icon container - always centered vertically and horizontally */
.nav-link i {
    font-size: 1.1rem;
    width: 22px;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    pointer-events: none;
}

/* Ensure nav-link itself centers content properly */
.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
    text-align: left !important;
    direction: ltr !important;
}

/* Left-align navlinks text on desktop/laptop */
@media (min-width: 1025px) {
    .admin-sidebar .nav-link {
        justify-content: flex-start !important;
        text-align: left !important;
        direction: ltr !important;
    }
    
    .admin-sidebar .nav-link .link-text {
        text-align: left !important;
        text-align-last: left !important;
        margin-left: 0.75rem !important;
        direction: ltr !important;
        unicode-bidi: embed !important;
    }
    
    .admin-sidebar .nav-link i {
        text-align: left !important;
    }
    
    /* Force left alignment for nav menu and items */
    .admin-sidebar .nav-menu {
        text-align: left !important;
        align-items: flex-start !important;
    }
    
    .admin-sidebar .nav-item {
        text-align: left !important;
        align-items: flex-start !important;
    }
}

/* When collapsed, center icons perfectly */
.admin-sidebar.collapsed .nav-link {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin-right: 0 !important;
}

.admin-sidebar.collapsed .nav-link i {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
}

/* Tooltip styles for collapsed sidebar */
.admin-sidebar.collapsed .nav-link {
    position: relative;
}

/* Enhanced tooltip on hover when collapsed */
.admin-sidebar.collapsed .nav-link:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: tooltipFadeIn 0.2s ease;
}

.admin-sidebar.collapsed .nav-link:hover::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.9);
    z-index: 10001;
    pointer-events: none;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* When NOT collapsed, ensure text labels are visible */
.admin-sidebar:not(.collapsed) .link-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
}

.admin-sidebar:not(.collapsed) .logo-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
}


.nav-link.active {
    background: #2563eb;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    width: 100% !important;
    margin-right: 0 !important;
    border-radius: 0;
}

.nav-link.active i {
    color: white;
}

.nav-link:hover {
    background: #1e3a8a;
    color: white;
}

.nav-link:hover i {
    color: white;
}

/* Icon styles are now defined above in .nav-link i */

.link-text {
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    flex: 1;
    display: inline-block;
    align-items: center;
    line-height: 1.2;
    margin: 0;
    text-align: left !important;
    text-align-last: left !important;
    padding: 0;
    visibility: visible;
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.nav-item.has-submenu.open .submenu-arrow {
    transform: rotate(180deg);
}

/* Submenu */
.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 15px 0;
    margin-right: 1rem;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item.has-submenu.open .submenu {
    max-height: 500px;
    overflow: visible;
    padding: 0.5rem 0;
}

.submenu-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    height: 40px;
    padding: 0;
    padding-left: 3.5rem;
    padding-right: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-radius: 0 20px 20px 0;
    margin-right: 1rem;
    white-space: nowrap;
    box-sizing: border-box;
    gap: 0.875rem;
    width: calc(100% - 1rem);
}

/* Sidebar Toggle Button */
/* Arrow toggle button removed - using hamburger menu instead */
.sidebar-toggle-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-toggle-btn:hover {
    background: #f8fafc;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sidebar-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.sidebar-toggle-btn .toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
}

.admin-sidebar.collapsed .sidebar-toggle-btn .toggle-icon {
    transform: rotate(180deg);
}

/* Additional spacing and alignment improvements */
.nav-item:not(.logout-item) {
    margin: 0;
    padding: 0;
}

.nav-item.has-submenu {
    margin: 0;
    padding: 0;
}

.nav-item.has-submenu.open {
    margin: 0;
    padding: 0;
}

/* Ensure consistent vertical alignment */
.nav-link,
.submenu-link {
    box-sizing: border-box;
}

/* Improve hover states */
.nav-link:hover,
.submenu-link:hover {
    background: #1e3a8a;
    color: white;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-right: 0;
}

.submenu-link.active {
    background: #2563eb;
    color: white;
}

/* Logout Item - Removed from sidebar, now in user menu */

/* Mobile Overlay - Hidden (using sidebar-overlay instead) */
.mobile-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mobile-overlay.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile Nav Toggle - Hidden (using hamburger-menu-btn instead) */
.mobile-nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hamburger Menu Button (for mobile/tablet sidebar) */
.hamburger-menu-btn {
    display: none;
    background: #1e40af;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    z-index: 1002;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    margin-left: 0;
    margin-right: 0;
}

.hamburger-menu-btn:hover {
    background: #1e3a8a;
    transform: scale(1.05);
}

.hamburger-menu-btn:active {
    transform: scale(0.95);
}

/* Sidebar Overlay (for mobile/tablet) - REMOVED - No longer blocking clicks */
.sidebar-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -9999 !important;
    background: transparent !important;
}

.sidebar-overlay.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Desktop: Show hamburger menu button */
@media (min-width: 1025px) {
    .hamburger-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Mobile/Tablet: Show hamburger menu button */
@media (max-width: 1024px) {
    .hamburger-menu-btn {
        display: flex;
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Position hamburger menu button right next to sidebar when closed (icon-only) */
    .header-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
        gap: 0.5rem !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* When sidebar is closed (icon-only), hamburger is right next to it */
    .admin-sidebar:not(.mobile-open) ~ .admin-main .header-content {
        padding-left: 0.75rem !important;
        padding-right: 1rem !important;
    }
    
    /* When sidebar is expanded, adjust header padding */
    .admin-sidebar.mobile-open ~ .admin-main .header-content {
        padding-left: 0.75rem !important;
        padding-right: 1rem !important;
    }
    
    .header-content {
        padding-left: 0.75rem !important;
        padding-right: 1rem !important;
        transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Sidebar - Icon-only style on mobile/tablet by default */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0 !important; /* Always on left */
        right: auto !important; /* Never on right */
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height for mobile */
        width: 70px; /* Compact icon-only width */
        z-index: 10000; /* Much higher than overlay (1001) */
        transform: translateX(0); /* Always visible */
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important; /* Always visible */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        flex-direction: column;
        background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important;
        background-color: #1e3a8a !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
        overflow-x: hidden;
    }
    
    /* Hide text labels in icon-only mode */
    .admin-sidebar:not(.mobile-open) .link-text,
    .admin-sidebar:not(.mobile-open) .logo-text {
        display: none !important;
        opacity: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
    
    /* Center icons in icon-only mode */
    .admin-sidebar:not(.mobile-open) .nav-link {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .admin-sidebar:not(.mobile-open) .sidebar-header {
        justify-content: center !important;
        padding: 0.75rem 0.5rem !important;
    }
    
    .admin-sidebar:not(.mobile-open) .logo-img {
        margin: 0 auto !important;
    }
    
    /* Adjust main content margin for icon-only sidebar */
    .admin-main {
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Expanded state - show full sidebar with text */
    .admin-sidebar.mobile-open {
        width: 280px !important;
        max-width: 85vw !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
        left: 0 !important;
        right: auto !important;
        background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important;
        background-color: #1e3a8a !important;
    }
    
    /* Adjust main content when sidebar is expanded */
    .admin-sidebar.mobile-open ~ .admin-main {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
    }
    
    /* Ensure hamburger menu button stays positioned correctly */
    .admin-sidebar:not(.mobile-open) ~ .admin-main .header-left,
    .admin-sidebar.mobile-open ~ .admin-main .header-left {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Hamburger button should always be right next to sidebar edge */
    .admin-sidebar:not(.mobile-open) ~ .admin-main .hamburger-menu-btn {
        margin-left: 0 !important;
    }
    
    .admin-sidebar.mobile-open ~ .admin-main .hamburger-menu-btn {
        margin-left: 0 !important;
    }
    
    /* Show text labels when expanded */
    .admin-sidebar.mobile-open .link-text,
    .admin-sidebar.mobile-open .logo-text {
        display: inline-block !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
    }
    
    .admin-sidebar.mobile-open .nav-link {
        justify-content: flex-start !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .admin-sidebar.mobile-open .sidebar-header {
        justify-content: flex-start !important;
        padding: 1rem !important;
    }
    
    /* Ensure navlinks are ALWAYS visible when sidebar is open on mobile/tablet */
    /* Navlinks should be INSIDE the dark blue sidebar, positioned on the left */
    #adminSidebar.mobile-open .sidebar-nav,
    .admin-sidebar.mobile-open .sidebar-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        align-items: flex-start !important;
    }
    
    #adminSidebar.mobile-open .nav-menu,
    .admin-sidebar.mobile-open .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        align-items: flex-start !important;
    }
    
    #adminSidebar.mobile-open .nav-item,
    .admin-sidebar.mobile-open .nav-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        align-items: flex-start !important;
    }
    
    #adminSidebar.mobile-open .nav-link,
    .admin-sidebar.mobile-open .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10001 !important;
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        right: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding-left: 1.5rem !important;
        padding-right: 1rem !important;
    }
    
    #adminSidebar.mobile-open .nav-link i,
    .admin-sidebar.mobile-open .nav-link i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }
    
    #adminSidebar.mobile-open .link-text,
    #adminSidebar.mobile-open .logo-text,
    .admin-sidebar.mobile-open .link-text,
    .admin-sidebar.mobile-open .logo-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure navlinks are clickable */
    #adminSidebar.mobile-open .nav-link,
    #adminSidebar.mobile-open a.nav-link,
    .admin-sidebar.mobile-open .nav-link,
    .admin-sidebar.mobile-open a.nav-link {
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
        z-index: 10001 !important;
        position: relative !important;
    }
    
    /* Ensure navlinks are positioned INSIDE the dark blue sidebar on the left */
    #adminSidebar.mobile-open .sidebar-nav,
    .admin-sidebar.mobile-open .sidebar-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        align-items: flex-start !important;
        padding: 1.5rem 0 !important;
    }
    
    /* Force nav-menu to be visible and left-aligned */
    #adminSidebar.mobile-open .nav-menu,
    .admin-sidebar.mobile-open .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        align-items: flex-start !important;
    }
    
    /* Ensure nav-items are left-aligned */
    #adminSidebar.mobile-open .nav-item,
    .admin-sidebar.mobile-open .nav-item {
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        align-items: flex-start !important;
    }
    
    /* When mobile-open and collapsed, show only icons (80px width) */
    #adminSidebar.mobile-open.collapsed {
        width: 80px !important;
        max-width: 80px !important;
    }
    
    /* Hide text when collapsed on mobile */
    #adminSidebar.mobile-open.collapsed .link-text,
    #adminSidebar.mobile-open.collapsed .logo-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
    
    /* Center icons when collapsed on mobile */
    #adminSidebar.mobile-open.collapsed .nav-link {
        justify-content: center !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* When mobile-open and NOT collapsed, show full width WITH TEXT */
    #adminSidebar.mobile-open:not(.collapsed) {
        width: 280px !important;
        max-width: 85vw !important;
    }
    
    /* Show text when NOT collapsed on mobile - FORCE VISIBLE */
    #adminSidebar.mobile-open:not(.collapsed) .link-text,
    #adminSidebar.mobile-open:not(.collapsed) .logo-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        margin-left: 0.75rem !important;
    }
    
    /* Ensure navlinks show text properly */
    #adminSidebar.mobile-open:not(.collapsed) .nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Ensure navlinks icons are visible */
    .admin-sidebar.mobile-open .nav-link i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure nav links are clickable and above overlay */
    .admin-sidebar.mobile-open .nav-link {
        z-index: 10001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        touch-action: manipulation !important;
    }
    
    /* Force all nav links to be clickable */
    .admin-sidebar.mobile-open .nav-link,
    .admin-sidebar.mobile-open a.nav-link {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Prevent pseudo-elements from blocking clicks */
    .admin-sidebar.mobile-open .nav-link::before,
    .admin-sidebar.mobile-open .nav-link::after {
        pointer-events: none !important;
    }
}

.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
    visibility: visible;
    opacity: 1;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.section-header h1 {
    color: #2d3748;
    font-size: 2rem;
    margin: 0;
}

.section-header p {
    color: #718096;
    margin: 0.5rem 0 0 0;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

.header-actions .btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2);
    user-select: none;
    -webkit-user-select: none;
}

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

.stat-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.1);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    min-height: 100px;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    background: #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

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

.stat-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    line-height: 1.2;
}

.stat-content p {
    color: #718096;
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.stat-arrow {
    color: #1e40af;
    font-size: 1.25rem;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.stat-card:hover .stat-arrow {
    opacity: 1;
    transform: translateX(5px);
}

/* Dashboard Charts */
.dashboard-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.chart-container {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Recent Events - Left Side */
.dashboard-charts .chart-container:first-child {
    grid-column: 1;
}

/* Quick Actions - Right Side */
.dashboard-charts .chart-container:last-child {
    grid-column: 2;
}

.chart-container h3 {
    margin-bottom: 1.5rem;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 700;
}

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.quick-actions .btn {
    background: #1e40af;
    color: #ffffff;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.quick-actions .btn:hover {
    background: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.quick-actions .btn i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.quick-actions .btn-primary {
    background: #1e40af;
}

.quick-actions .btn-primary:hover {
    background: #1e3a8a;
}

/* Tabs */
.events-tabs,
.admin-tabs,
.notification-tabs,
.attendees-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 0.875rem 1.5rem;
    border: none;
    background: transparent;
    color: #718096;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    position: relative;
    white-space: nowrap;
}

.tab-btn i {
    font-size: 1rem;
}

.tab-btn.active,
.tab-btn:hover {
    color: #1e40af;
    border-bottom-color: #1e40af;
    background: rgba(30, 64, 175, 0.05);
}

.tab-btn.active {
    font-weight: 600;
}

/* Registration Review Tabs */
.registration-review-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
    flex-wrap: wrap;
}

.registration-review-tabs .tab-btn {
    padding: 0.875rem 1.5rem;
    border: none;
    background: transparent;
    color: #718096;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    position: relative;
    white-space: nowrap;
}

.registration-review-tabs .tab-btn i {
    font-size: 1rem;
}

.registration-review-tabs .tab-btn.active,
.registration-review-tabs .tab-btn:hover {
    color: #1e40af;
    border-bottom-color: #1e40af;
    background: rgba(30, 64, 175, 0.05);
}

.registration-review-tabs .tab-btn.active {
    font-weight: 600;
}

/* Tables */
/* Universal Table Responsive Container */
.table-responsive-wrapper,
.events-table-container,
.admin-table-container,
.certificates-table-container,
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: white;
    width: 100%;
    position: relative;
}

.events-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: white;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Scrollbar styles for all table containers */
.table-responsive-wrapper::-webkit-scrollbar,
.events-table-container::-webkit-scrollbar,
.admin-table-container::-webkit-scrollbar,
.certificates-table-container::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-responsive-wrapper::-webkit-scrollbar-track,
.events-table-container::-webkit-scrollbar-track,
.admin-table-container::-webkit-scrollbar-track,
.certificates-table-container::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb,
.events-table-container::-webkit-scrollbar-thumb,
.admin-table-container::-webkit-scrollbar-thumb,
.certificates-table-container::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb:hover,
.events-table-container::-webkit-scrollbar-thumb:hover,
.admin-table-container::-webkit-scrollbar-thumb:hover,
.certificates-table-container::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.admin-table {
    width: 100%;
    background: white;
    border-radius: 15px;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    table-layout: auto;
    border-collapse: collapse;
    min-width: auto;
}

/* CIT Students & Faculty tables: allow horizontal scroll on small screens */
#cit-student-records .table-responsive-wrapper .admin-table,
#faculty-management .table-responsive-wrapper .admin-table {
    table-layout: auto;
}

#cit-student-records .table-responsive-wrapper,
#faculty-management .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table th {
    background: #f8fafc;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #2d3748;
}

.admin-table .description-cell {
    max-width: none;
    min-width: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    cursor: default;
    position: relative;
    padding: 0.875rem 1rem;
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table .description-cell .truncated-text {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table .description-cell:hover {
    background-color: #f7fafc;
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    max-width: 350px;
}

.admin-table .description-cell .empty-text {
    color: #a0aec0;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.admin-table .description-cell .empty-text i {
    font-size: 0.75rem;
    opacity: 0.6;
}

.admin-table th i {
    margin-right: 0.5rem;
    color: #1e40af;
    font-size: 0.9rem;
    vertical-align: middle;
}

.admin-table .event-desc-cell {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease;
    max-width: none;
    min-width: auto;
    overflow: visible;
    cursor: default;
    position: relative;
    padding: 0.875rem 1rem;
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table .event-desc-cell .truncated-text {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table .event-desc-cell:hover {
    border-left-color: #1e40af;
    background-color: #f7fafc;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    max-width: 350px;
    overflow: visible;
}

/* Expandable event rows – Event Management table */
.events-table-expandable .event-main-row-expandable {
    cursor: pointer;
}
.events-table-expandable .events-table-expand-col {
    width: 2.5rem;
    min-width: 2.5rem;
    vertical-align: middle;
    padding: 0.5rem;
}
.event-row-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.event-row-expand-btn:hover {
    background: #e2e8f0;
    color: #2d3748;
}
.event-row-expand-btn.expanded {
    background: #1e40af;
    color: #fff;
}
.event-row-expand-btn i {
    font-size: 0.75rem;
    transition: transform 0.2s;
}
.event-detail-row {
    background: #f8fafc;
}
.event-detail-row .event-detail-cell {
    padding: 0;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.event-sessions-wrap {
    padding: 0.75rem 1rem 1rem 2.5rem;
}
.event-sessions-table {
    width: 100%;
    margin: 0;
    box-shadow: none;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.event-sessions-table th {
    background: #f1f5f9;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}
.event-sessions-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-top: 1px solid #f1f5f9;
}
.event-session-actions-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.event-sessions-table .event-session-action-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.event-sessions-table .capacity-clickable {
    cursor: pointer;
    color: #1e40af;
    text-decoration: underline;
    font-weight: 500;
}
.event-sessions-table .capacity-clickable:hover {
    color: #1d4ed8;
}

.admin-table .event-desc-cell:hover .truncated-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-wrap: break-word;
}

.admin-table .speaker-desc-cell {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease;
    max-width: none;
    min-width: auto;
    overflow: visible;
    cursor: default;
    position: relative;
    padding: 0.875rem 1rem;
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table .speaker-desc-cell .truncated-text {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table .speaker-desc-cell:hover {
    border-left-color: #48bb78;
    background-color: #f7fafc;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    max-width: 350px;
    overflow: visible;
}

.admin-table .speaker-desc-cell:hover .truncated-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-wrap: break-word;
}

.admin-table .speaker-desc-cell .empty-text {
    color: #a0aec0;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    white-space: normal;
}

/* Registration Review Table - Responsive and Text Overflow Prevention */
#registrationReviewTable {
    table-layout: auto;
    width: 100%;
    min-width: 1100px; /* Slightly wider to account for added columns */
}

#registrationReviewTable th,
#registrationReviewTable td {
    padding: 0.75rem 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 220px; /* Prevent columns from getting too wide */
    min-width: 70px;  /* Ensure minimum readability */
    white-space: normal;
    line-height: 1.4;
    vertical-align: top;
}

/* Specific column width constraints for registration review table
   Current column order:
   1: Select checkbox
   2: Name
   3: Email
   4: Contact Number
   5: Category
   6: Department
   7: Event
   8: Amount Paid
   9: Payment Method
   10: Ref No.
   11: Proof of Payment
   12: Registration Status
   13: Registration Date
   14: Status Date
   15: Actions
*/

#registrationReviewTable th:nth-child(1),
#registrationReviewTable td:nth-child(1) {
    /* Select checkbox */
    max-width: 40px;
    min-width: 32px;
    text-align: center;
}

#registrationReviewTable th:nth-child(2),
#registrationReviewTable td:nth-child(2) {
    /* Name */
    max-width: 160px;
    min-width: 120px;
}

#registrationReviewTable th:nth-child(3),
#registrationReviewTable td:nth-child(3) {
    /* Email */
    max-width: 210px;
    min-width: 150px;
}

#registrationReviewTable th:nth-child(4),
#registrationReviewTable td:nth-child(4) {
    /* Contact Number */
    max-width: 130px;
    min-width: 90px;
}

#registrationReviewTable th:nth-child(5),
#registrationReviewTable td:nth-child(5) {
    /* Category */
    max-width: 110px;
    min-width: 90px;
}

#registrationReviewTable th:nth-child(6),
#registrationReviewTable td:nth-child(6) {
    /* Department */
    max-width: 170px;
    min-width: 120px;
}

#registrationReviewTable th:nth-child(7),
#registrationReviewTable td:nth-child(7) {
    /* Event */
    max-width: 210px;
    min-width: 150px;
}

#registrationReviewTable th:nth-child(8),
#registrationReviewTable td:nth-child(8) {
    /* Amount Paid */
    max-width: 110px;
    min-width: 90px;
}

#registrationReviewTable th:nth-child(9),
#registrationReviewTable td:nth-child(9) {
    /* Payment Method */
    max-width: 140px;
    min-width: 110px;
}

#registrationReviewTable th:nth-child(10),
#registrationReviewTable td:nth-child(10) {
    /* Ref No. */
    max-width: 150px;
    min-width: 120px;
}

#registrationReviewTable th:nth-child(11),
#registrationReviewTable td:nth-child(11) {
    /* Proof of Payment */
    max-width: 150px;
    min-width: 120px;
    vertical-align: middle;
}

#registrationReviewTable th:nth-child(12),
#registrationReviewTable td:nth-child(12) {
    /* Registration Status */
    max-width: 140px;
    min-width: 120px;
    vertical-align: middle;
}

/* Uniform badge in Registration Review: same height, content centered, stable on zoom in/out */
#registrationReviewTable .reg-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    min-width: 6.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
}
#registrationReviewTable .reg-review-badge i {
    flex-shrink: 0;
    font-size: 0.875rem;
}
#registrationReviewTable .reg-review-badge span {
    flex-shrink: 0;
}

#registrationReviewTable th:nth-child(13),
#registrationReviewTable td:nth-child(13) {
    /* Registration Date */
    max-width: 150px;
    min-width: 120px;
}

#registrationReviewTable th:nth-child(14),
#registrationReviewTable td:nth-child(14) {
    /* Status Date */
    max-width: 160px;
    min-width: 130px;
}

#registrationReviewTable th:nth-child(15),
#registrationReviewTable td:nth-child(15) {
    /* Actions */
    max-width: 90px;
    min-width: 70px;
    text-align: center;
    white-space: nowrap;
}

/* Ensure text doesn't overflow in registration review table cells */
#registrationReviewTable td {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Long text handling - show ellipsis but allow full text on hover */
#registrationReviewTable td[title] {
    cursor: help;
}

/* Mobile responsiveness for registration review table */
@media (max-width: 968px) {
    .events-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    #registrationReviewTable {
        font-size: 0.875rem;
    }
    
    #registrationReviewTable th,
    #registrationReviewTable td {
        padding: 0.5rem 0.375rem;
        font-size: 0.8rem;
    }
    
    /* Slightly tighter widths on tablet/mobile, rely on horizontal scroll */
    #registrationReviewTable th:nth-child(2),
    #registrationReviewTable td:nth-child(2) {
        /* Name */
        max-width: 140px;
        min-width: 110px;
    }
    
    #registrationReviewTable th:nth-child(3),
    #registrationReviewTable td:nth-child(3) {
        /* Email */
        max-width: 170px;
        min-width: 130px;
    }
    
    #registrationReviewTable th:nth-child(6),
    #registrationReviewTable td:nth-child(6) {
        /* Department */
        max-width: 140px;
        min-width: 110px;
    }
    
    #registrationReviewTable th:nth-child(7),
    #registrationReviewTable td:nth-child(7) {
        /* Event */
        max-width: 170px;
        min-width: 130px;
    }
}

@media (max-width: 640px) {
    #registrationReviewTable {
        font-size: 0.75rem;
        min-width: 900px; /* Allow horizontal scroll; keep columns readable */
    }
    
    #registrationReviewTable th,
    #registrationReviewTable td {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
    }
    
    /* Further reduce key column widths on very small screens */
    #registrationReviewTable th:nth-child(2),
    #registrationReviewTable td:nth-child(2) {
        /* Name */
        max-width: 110px;
        min-width: 90px;
    }
    
    #registrationReviewTable th:nth-child(3),
    #registrationReviewTable td:nth-child(3) {
        /* Email */
        max-width: 130px;
        min-width: 100px;
    }
}

/* Certificate Management Tables - Responsive and Text Overflow Prevention */
/* Certificate Requests Table */
#certificateRequestsTable {
    table-layout: auto;
    width: 100%;
    min-width: 1000px; /* Ensure Requested Date and Actions columns don't overlap */
}

/* Hide checkbox column until Select is clicked */
#certificateRequestsTable th:nth-child(1),
#certificateRequestsTable td:nth-child(1) {
    display: none;
}
#certificateRequestsTable.cert-request-select-mode th:nth-child(1),
#certificateRequestsTable.cert-request-select-mode td:nth-child(1) {
    display: table-cell;
    max-width: 2.5rem;
    min-width: 2.5rem;
    width: 2.5rem;
}

#certificateRequestsTable th,
#certificateRequestsTable td {
    padding: 0.75rem 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 200px;
    min-width: 80px;
    white-space: normal;
    line-height: 1.4;
    vertical-align: top;
}

/* Specific column width constraints for certificate requests table */
#certificateRequestsTable th:nth-child(2),
#certificateRequestsTable td:nth-child(2) {
    /* Name */
    max-width: 150px;
    min-width: 120px;
}

#certificateRequestsTable th:nth-child(3),
#certificateRequestsTable td:nth-child(3) {
    /* Email */
    max-width: 200px;
    min-width: 150px;
}

#certificateRequestsTable th:nth-child(4),
#certificateRequestsTable td:nth-child(4) {
    /* Event Name */
    max-width: 200px;
    min-width: 150px;
}

#certificateRequestsTable th:nth-child(5),
#certificateRequestsTable td:nth-child(5) {
    /* Category */
    max-width: 120px;
    min-width: 90px;
}

#certificateRequestsTable th:nth-child(6),
#certificateRequestsTable td:nth-child(6) {
    /* Message */
    max-width: 250px;
    min-width: 180px;
}

#certificateRequestsTable th:nth-child(7),
#certificateRequestsTable td:nth-child(7) {
    /* Proof */
    max-width: 100px;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
}

#certificateRequestsTable th:nth-child(8),
#certificateRequestsTable td:nth-child(8) {
    /* Status */
    max-width: 120px;
    min-width: 100px;
}
/* Uniform status badge size in certificate requests (Pending, Approved, Rejected) */
#certificateRequestsTable td:nth-child(8) .status-badge {
    display: inline-block;
    min-width: 6.5rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    white-space: nowrap;
    font-size: 0.8rem;
    box-sizing: border-box;
}

#certificateRequestsTable th:nth-child(9),
#certificateRequestsTable td:nth-child(9) {
    /* Requested Date */
    min-width: 165px;
    max-width: 200px;
    white-space: nowrap;
}

#certificateRequestsTable th:nth-child(10),
#certificateRequestsTable td:nth-child(10) {
    /* Actions */
    min-width: 90px;
    max-width: 110px;
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

/* Sent Certificates Table */
#certificatesTable {
    table-layout: auto;
    width: 100%;
    min-width: 800px; /* Minimum width to prevent too much compression */
}

#certificatesTable th,
#certificatesTable td {
    padding: 0.75rem 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 200px;
    min-width: 80px;
    white-space: normal;
    line-height: 1.4;
    vertical-align: top;
}

/* Specific column width constraints for sent certificates table */
#certificatesTable th:nth-child(1),
#certificatesTable td:nth-child(1) {
    /* Attendee Name */
    max-width: 150px;
    min-width: 120px;
}

#certificatesTable th:nth-child(2),
#certificatesTable td:nth-child(2) {
    /* Email */
    max-width: 200px;
    min-width: 150px;
}

#certificatesTable th:nth-child(3),
#certificatesTable td:nth-child(3) {
    /* Event */
    max-width: 200px;
    min-width: 150px;
}

#certificatesTable th:nth-child(4),
#certificatesTable td:nth-child(4) {
    /* Role */
    max-width: 120px;
    min-width: 90px;
}

#certificatesTable th:nth-child(5),
#certificatesTable td:nth-child(5) {
    /* Created Date */
    max-width: 150px;
    min-width: 120px;
}

#certificatesTable th:nth-child(6),
#certificatesTable td:nth-child(6) {
    /* Status */
    max-width: 120px;
    min-width: 100px;
}

#certificatesTable th:nth-child(7),
#certificatesTable td:nth-child(7) {
    /* Actions */
    max-width: 100px;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
}

/* Ensure text doesn't overflow in certificate tables */
#certificateRequestsTable td,
#certificatesTable td {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Long text handling - show ellipsis but allow full text on hover */
#certificateRequestsTable td[title],
#certificatesTable td[title] {
    cursor: help;
}

/* Mobile responsiveness for certificate tables */
@media (max-width: 968px) {
    .certificates-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    #certificateRequestsTable,
    #certificatesTable {
        font-size: 0.875rem;
    }
    
    #certificateRequestsTable th,
    #certificateRequestsTable td,
    #certificatesTable th,
    #certificatesTable td {
        padding: 0.5rem 0.375rem;
        font-size: 0.8rem;
    }
    
    /* Reduce column widths on mobile for certificate requests (col 1 = checkbox, hidden until select mode) */
    #certificateRequestsTable.cert-request-select-mode th:nth-child(1),
    #certificateRequestsTable.cert-request-select-mode td:nth-child(1) {
        max-width: 2.5rem;
        min-width: 2.5rem;
    }
    #certificateRequestsTable th:nth-child(2),
    #certificateRequestsTable td:nth-child(2) {
        max-width: 150px;
        min-width: 120px;
    }
    #certificateRequestsTable th:nth-child(3),
    #certificateRequestsTable td:nth-child(3) {
        max-width: 150px;
        min-width: 120px;
    }
    #certificateRequestsTable th:nth-child(6),
    #certificateRequestsTable td:nth-child(6) {
        max-width: 200px;
        min-width: 150px;
    }
    
    /* Reduce column widths on mobile for sent certificates */
    #certificatesTable th:nth-child(1),
    #certificatesTable td:nth-child(1) {
        max-width: 120px;
        min-width: 100px;
    }
    
    #certificatesTable th:nth-child(2),
    #certificatesTable td:nth-child(2) {
        max-width: 150px;
        min-width: 120px;
    }
    
    #certificatesTable th:nth-child(3),
    #certificatesTable td:nth-child(3) {
        max-width: 150px;
        min-width: 120px;
    }
}

@media (max-width: 640px) {
    #certificateRequestsTable,
    #certificatesTable {
        font-size: 0.75rem;
        min-width: 700px; /* Still allow horizontal scroll on very small screens */
    }
    
    #certificateRequestsTable th,
    #certificateRequestsTable td,
    #certificatesTable th,
    #certificatesTable td {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
    }
    
    /* Further reduce widths on very small screens for certificate requests */
    #certificateRequestsTable.cert-request-select-mode th:nth-child(1),
    #certificateRequestsTable.cert-request-select-mode td:nth-child(1) {
        max-width: 2.5rem;
        min-width: 2.5rem;
    }
    #certificateRequestsTable th:nth-child(2),
    #certificateRequestsTable td:nth-child(2) {
        max-width: 120px;
        min-width: 100px;
    }
    #certificateRequestsTable th:nth-child(6),
    #certificateRequestsTable td:nth-child(6) {
        max-width: 150px;
        min-width: 120px;
    }
    
    /* Further reduce widths on very small screens for sent certificates */
    #certificatesTable th:nth-child(1),
    #certificatesTable td:nth-child(1) {
        max-width: 100px;
        min-width: 80px;
    }
    
    #certificatesTable th:nth-child(2),
    #certificatesTable td:nth-child(2) {
        max-width: 120px;
        min-width: 100px;
    }
}

.admin-table tr:hover {
    background: #f8fafc;
}

.table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

/* Filters */
.filters,
.feedback-filters {
    background: white;
    padding: 1.75rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.filter-group label {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.625rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label i {
    color: #1e40af;
    font-size: 0.875rem;
}

.filter-group select,
.filter-group input {
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #ffffff;
    color: #2d3748;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
}

.filter-group select:hover,
.filter-group input:hover {
    border-color: #cbd5e0;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.search-input {
    border-radius: 999px;
    background-color: #fff;
    padding-left: 0.75rem;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}



.search-input:focus {
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Event Count Button Styles */
.link-button.event-count-btn {
    background: transparent;
    border: none;
    color: #1e40af;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.link-button.event-count-btn:hover {
    background: rgba(30, 64, 175, 0.1);
    color: #1e3a8a;
    transform: translateY(-1px);
}

.link-button.event-count-btn i {
    font-size: 0.85rem;
}

.link-button.event-count-btn:active {
    transform: translateY(0);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: #1e40af;
}

/* Analytics Grid */

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.chart-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-height: 400px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chart-card:hover {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.chart-card:has(.chart-wrapper:hover) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.chart-card .chart-title {
    margin: 0 0 1.5rem 0;
    color: #2d3748;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.01em;
}

.chart-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 300px;
}

.chart-wrapper canvas {
    max-width: 100%;
    height: auto !important;
}

/* Department Popularity: allow tooltip to show fully, on top, scrollable */
.chart-card-department-popularity {
    position: relative;
    z-index: 10;
}
.chart-card-department-popularity .chart-wrapper-events {
    overflow: visible;
}
.chart-card-department-popularity .chart-wrapper-events .chart-inner {
    overflow-x: auto;
    overflow-y: visible;
}
.chart-card-department-popularity .chartjs-tooltip {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999 !important;
    pointer-events: auto;
}

/* All analytics chart tooltips: scrollable when list is long, on top */
#analytics .chartjs-tooltip {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999 !important;
    pointer-events: auto;
}

.chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    padding: 2rem;
    text-align: center;
    min-height: 300px;
}

.chart-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.chart-empty-state p {
    margin: 0;
    font-size: 1rem;
    color: #718096;
}

/* Export button enhancements */
#exportReportBtn {
    position: relative;
    transition: all 0.3s ease;
}

#exportReportBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#exportReportBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#exportReportBtn.loading {
    pointer-events: none;
}

#exportReportBtn.loading .btn-text::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Notification Content */
.notification-content {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: visible;
    min-height: 400px;
}

@media (max-width: 768px) {
    .notification-content {
        padding: 1.5rem;
    }
}

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

.history-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    background: #f8fafc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

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

.history-card-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #2d3748;
}

.history-card-header p {
    margin: 0.25rem 0 0 0;
    color: #4a5568;
    font-size: 0.9rem;
}

.history-card-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.history-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
    font-style: italic;
}

.tab-content {
    display: none;
}

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

.notification-form {
    max-width: 700px;
    padding: 0;
}

.notification-form .form-group {
    margin-bottom: 1.5rem;
}

.notification-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.notification-form input,
.notification-form select,
.notification-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.notification-form input:focus,
.notification-form select:focus,
.notification-form textarea:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.notification-form textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.6;
}

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

.template-card {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

.template-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.template-card h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.template-card p {
    color: #718096;
    margin-bottom: 1rem;
}

.template-card .btn {
    opacity: 1;
    visibility: visible;
    display: inline-flex;
}

.template-preview {
    background: white;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 120px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
}

.template-field {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.template-field:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.field-label {
    color: #2d3748;
    font-weight: 600;
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.field-value {
    color: #4a5568;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    font-size: 0.9rem;
    padding-left: 0;
    white-space: normal;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    hyphens: auto;
    text-align: left;
}

.template-preview .field-value {
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: left;
}

/* Responsive styles for Email Templates on smaller screens */
@media (max-width: 768px) {
    .templates-grid-3col {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.5rem !important;
    }
    
    .template-card {
        padding: 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .template-header {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    .template-header h4 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    
    .template-header p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .template-preview {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .template-field {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .field-label {
        display: block !important;
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    .field-value {
        display: block !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        text-align: left !important;
        word-break: normal !important;
    }
    
    .template-preview .field-value {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        display: block !important;
        width: 100% !important;
    }
    
    .template-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding-top: 0.75rem !important;
    }
    
    .template-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .templates-grid-3col {
        gap: 0.75rem !important;
        padding: 0 0.25rem !important;
    }
    
    .template-card {
        padding: 0.75rem !important;
        border-radius: 10px !important;
    }
    
    .template-header h4 {
        font-size: 0.95rem !important;
    }
    
    .template-header p {
        font-size: 0.8rem !important;
    }
    
    .template-preview {
        padding: 0.75rem !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    .template-field {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    .field-label {
        font-size: 0.75rem !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    .field-value {
        font-size: 0.8rem !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    .template-preview .field-value {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    /* Notification tabs responsive */
    .notification-tabs {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0 0.5rem !important;
    }
    
    .notification-tabs .tab-btn {
        flex: 1 1 auto !important;
        min-width: calc(50% - 0.25rem) !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }
    
    .notification-tabs .tab-btn i {
        font-size: 0.9rem !important;
    }
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Certificate Management Styles */
.certificate-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.certificate-content {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Certificate settings tab — full-width layout */
#certificate-settings.cert-settings-tab {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.cert-settings-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cert-settings-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f5f3ff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cert-settings-header-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #4f46e5, #6366f1);
    color: #fff;
    border-radius: 14px;
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.cert-settings-header-text h2 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}

.cert-settings-lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #64748b;
    max-width: 72ch;
}

.cert-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    align-items: start;
}

@media (min-width: 1100px) {
    .cert-settings-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
        gap: 1.75rem;
    }
}

.cert-settings-card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 16px;
    padding: 1.5rem 1.65rem 1.65rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cert-settings-card:hover {
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    border-color: #dce3ec;
}

.cert-settings-card--accent {
    border-top: 3px solid #6366f1;
}

.cert-settings-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}

.cert-settings-card-title i {
    color: #6366f1;
    font-size: 1.1rem;
    opacity: 0.95;
}

.cert-settings-field {
    margin-bottom: 0;
}

.cert-settings-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
    display: block;
}

.cert-settings-hint {
    display: block;
    margin-top: 0.4rem;
    line-height: 1.45;
}

.cert-settings-auto-row {
    margin-bottom: 1.35rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cert-settings-subheading {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 1rem;
}

.cert-settings-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 1rem 1.1rem;
}

.cert-settings-input,
.cert-settings-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.cert-settings-input:hover,
.cert-settings-select:hover {
    border-color: #94a3b8;
}

.cert-settings-input:focus,
.cert-settings-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.cert-settings-input:disabled,
.cert-settings-select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: #f1f5f9;
}

.cert-settings-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #334155;
}

.cert-settings-checkbox input {
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #4f46e5;
    flex-shrink: 0;
}

.cert-settings-checkbox-note {
    font-weight: 400;
    color: #64748b;
    font-size: 0.85rem;
}

.cert-settings-rgb-note {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #64748b;
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
    background: linear-gradient(90deg, #f0f9ff 0%, #f5f3ff 100%);
    border-radius: 12px;
    border: 1px solid #e0e7ff;
}

.cert-settings-rgb-note strong {
    display: block;
    font-size: 0.88rem;
    color: #1e293b;
    margin-bottom: 0.45rem;
}

.cert-settings-rgb-note p {
    margin: 0;
}

.cert-settings-rgb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 520px) {
    .cert-settings-rgb-grid {
        grid-template-columns: 1fr;
    }
}

.cert-settings-overlay-row {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid #f1f5f9;
}

.cert-settings-overlay-row code {
    font-size: 0.8rem;
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.cert-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.cert-settings-actions .btn {
    min-height: 2.65rem;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.cert-settings-btn-ghost {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #475569 !important;
}

.cert-settings-btn-ghost:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

@media (max-width: 640px) {
    .cert-settings-header {
        flex-direction: column;
        align-items: stretch;
    }

    .cert-settings-header-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .cert-settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cert-settings-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Certificate Request sub-tabs (by concern) */
.cert-request-subtab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cert-request-subtab-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}
.cert-request-subtab-btn.active {
    background: #1e40af;
    color: #fff;
    border-color: #1e40af;
}

/* Certificate Request status filter (Pending, Approved, Rejected) */
.cert-request-status-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cert-request-status-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}
.cert-request-status-btn.active {
    background: #1e40af;
    color: #fff;
    border-color: #1e40af;
}

/* Archive Manager Styles */
.archive-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
    border-bottom: 2px solid #e2e8f0;
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f1f5f9;
}

.archive-tabs::-webkit-scrollbar {
    height: 6px;
}

.archive-tabs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.archive-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.archive-tabs::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.archive-tabs .tab-btn {
    flex: 0 0 auto;
    min-width: fit-content;
    padding: 0.875rem 1.25rem;
    white-space: nowrap;
}

.archive-content {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.archive-content .tab-content {
    padding-top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Archive Manager Table Container - All Tables */
#archive-manager .events-table-container,
#archive-manager .feedback-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    margin-top: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: white;
    box-sizing: border-box;
    position: relative;
}

/* Ensure archived faculty table container allows overflow for dropdowns */
#archive-manager #archived-faculty .events-table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

#archive-manager #archived-faculty .events-table-container .admin-table {
    overflow: visible !important;
}

#archive-manager #archived-faculty .events-table-container .admin-table tbody {
    overflow: visible !important;
}

#archive-manager #archived-faculty .events-table-container .admin-table tr {
    overflow: visible !important;
}

/* Scrollbar styling for archive tables */
#archive-manager .events-table-container::-webkit-scrollbar,
#archive-manager .feedback-table-container::-webkit-scrollbar {
    height: 8px;
}

#archive-manager .events-table-container::-webkit-scrollbar-track,
#archive-manager .feedback-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#archive-manager .events-table-container::-webkit-scrollbar-thumb,
#archive-manager .feedback-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#archive-manager .events-table-container::-webkit-scrollbar-thumb:hover,
#archive-manager .feedback-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#archive-manager .events-table-container table,
#archive-manager .feedback-table-container table {
    width: 100%;
    min-width: 1000px;
    table-layout: auto;
    border-collapse: collapse;
}

#archive-manager .events-table-container th,
#archive-manager .events-table-container td,
#archive-manager .feedback-table-container th,
#archive-manager .feedback-table-container td {
    padding: 0.75rem 1rem;
    box-sizing: border-box;
}

/* Archived Events Table - 6 columns */
#archive-manager #archivedEventsTable th:nth-child(1),
#archive-manager #archivedEventsTable td:nth-child(1) {
    min-width: 180px; /* Event Title */
    max-width: 250px;
    white-space: normal;
    word-wrap: break-word;
}

#archive-manager #archivedEventsTable th:nth-child(2),
#archive-manager #archivedEventsTable td:nth-child(2) {
    min-width: 120px; /* Event Type */
    max-width: 150px;
    white-space: nowrap;
}

#archive-manager #archivedEventsTable th:nth-child(3),
#archive-manager #archivedEventsTable td:nth-child(3) {
    min-width: 150px; /* Reason of Archiving */
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}

#archive-manager #archivedEventsTable th:nth-child(4),
#archive-manager #archivedEventsTable td:nth-child(4) {
    min-width: 120px; /* Archived By */
    max-width: 150px;
    white-space: nowrap;
}

#archive-manager #archivedEventsTable th:nth-child(5),
#archive-manager #archivedEventsTable td:nth-child(5) {
    min-width: 140px; /* Archived At */
    max-width: 180px;
    white-space: nowrap;
}

#archive-manager #archivedEventsTable th:nth-child(6),
#archive-manager #archivedEventsTable td:nth-child(6) {
    min-width: 120px; /* Actions */
    max-width: 150px;
    white-space: nowrap;
}

/* Archived Attendees Table - 7 columns */
#archive-manager #archivedAttendeesTable th:nth-child(1),
#archive-manager #archivedAttendeesTable td:nth-child(1) {
    min-width: 150px; /* Name */
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}

#archive-manager #archivedAttendeesTable th:nth-child(2),
#archive-manager #archivedAttendeesTable td:nth-child(2) {
    min-width: 180px; /* Email */
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#archive-manager #archivedAttendeesTable th:nth-child(3),
#archive-manager #archivedAttendeesTable td:nth-child(3) {
    min-width: 100px; /* Category */
    max-width: 120px;
    white-space: nowrap;
}

#archive-manager #archivedAttendeesTable th:nth-child(4),
#archive-manager #archivedAttendeesTable td:nth-child(4) {
    min-width: 150px; /* Reason of Archiving */
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}

#archive-manager #archivedAttendeesTable th:nth-child(5),
#archive-manager #archivedAttendeesTable td:nth-child(5) {
    min-width: 120px; /* Archived By */
    max-width: 150px;
    white-space: nowrap;
}

#archive-manager #archivedAttendeesTable th:nth-child(6),
#archive-manager #archivedAttendeesTable td:nth-child(6) {
    min-width: 140px; /* Archived At */
    max-width: 180px;
    white-space: nowrap;
}

#archive-manager #archivedAttendeesTable th:nth-child(7),
#archive-manager #archivedAttendeesTable td:nth-child(7) {
    min-width: 120px; /* Actions */
    max-width: 150px;
    white-space: nowrap;
}

/* Archived Feedback Table - 6 columns */
#archive-manager #archivedFeedbackTable th:nth-child(1),
#archive-manager #archivedFeedbackTable td:nth-child(1) {
    min-width: 150px; /* Name */
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}

#archive-manager #archivedFeedbackTable th:nth-child(2),
#archive-manager #archivedFeedbackTable td:nth-child(2) {
    min-width: 180px; /* Email */
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#archive-manager #archivedFeedbackTable th:nth-child(3),
#archive-manager #archivedFeedbackTable td:nth-child(3) {
    min-width: 150px; /* Reason of Archiving */
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}

#archive-manager #archivedFeedbackTable th:nth-child(4),
#archive-manager #archivedFeedbackTable td:nth-child(4) {
    min-width: 120px; /* Archived By */
    max-width: 150px;
    white-space: nowrap;
}

#archive-manager #archivedFeedbackTable th:nth-child(5),
#archive-manager #archivedFeedbackTable td:nth-child(5) {
    min-width: 140px; /* Archived At */
    max-width: 180px;
    white-space: nowrap;
}

#archive-manager #archivedFeedbackTable th:nth-child(6),
#archive-manager #archivedFeedbackTable td:nth-child(6) {
    min-width: 120px; /* Actions */
    max-width: 150px;
    white-space: nowrap;
}

/* Archive Manager Responsive Styles */
@media (max-width: 768px) {
    .archive-tabs {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .archive-tabs .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        flex: 0 0 auto;
        min-width: fit-content;
    }
    
    .archive-tabs .tab-btn i {
        font-size: 0.9rem;
    }
    
    #archive-manager .events-table-container,
    #archive-manager .feedback-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
        border-radius: 0;
        box-shadow: none;
    }
    
    #archive-manager .events-table-container table,
    #archive-manager .feedback-table-container table {
        min-width: 900px !important;
        font-size: 0.85rem;
    }
    
    #archive-manager .events-table-container th,
    #archive-manager .events-table-container td,
    #archive-manager .feedback-table-container th,
    #archive-manager .feedback-table-container td {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Reset max-widths on mobile for better scrolling */
    #archive-manager #archivedEventsTable th,
    #archive-manager #archivedEventsTable td,
    #archive-manager #archivedAttendeesTable th,
    #archive-manager #archivedAttendeesTable td,
    #archive-manager #archivedFeedbackTable th,
    #archive-manager #archivedFeedbackTable td {
        max-width: none !important;
    }
    
    /* Archived Attendees Table - Mobile Responsive */
    #archive-manager #archivedAttendeesTable {
        min-width: 1100px !important;
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(1),
    #archive-manager #archivedAttendeesTable td:nth-child(1) {
        min-width: 120px !important; /* Name */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(2),
    #archive-manager #archivedAttendeesTable td:nth-child(2) {
        min-width: 150px !important; /* Email */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(3),
    #archive-manager #archivedAttendeesTable td:nth-child(3) {
        min-width: 80px !important; /* Category */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(4),
    #archive-manager #archivedAttendeesTable td:nth-child(4) {
        min-width: 120px !important; /* Reason of Archiving */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(5),
    #archive-manager #archivedAttendeesTable td:nth-child(5) {
        min-width: 100px !important; /* Archived By */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(6),
    #archive-manager #archivedAttendeesTable td:nth-child(6) {
        min-width: 120px !important; /* Archived At */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(7),
    #archive-manager #archivedAttendeesTable td:nth-child(7) {
        min-width: 100px !important; /* Actions */
    }
    
    /* Archived Feedback Table - Mobile Responsive */
    #archive-manager #archivedFeedbackTable {
        min-width: 950px !important;
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(1),
    #archive-manager #archivedFeedbackTable td:nth-child(1) {
        min-width: 120px !important; /* Name */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(2),
    #archive-manager #archivedFeedbackTable td:nth-child(2) {
        min-width: 150px !important; /* Email */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(3),
    #archive-manager #archivedFeedbackTable td:nth-child(3) {
        min-width: 120px !important; /* Reason of Archiving */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(4),
    #archive-manager #archivedFeedbackTable td:nth-child(4) {
        min-width: 100px !important; /* Archived By */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(5),
    #archive-manager #archivedFeedbackTable td:nth-child(5) {
        min-width: 120px !important; /* Archived At */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(6),
    #archive-manager #archivedFeedbackTable td:nth-child(6) {
        min-width: 100px !important; /* Actions */
    }
}

@media (max-width: 480px) {
    .archive-tabs {
        gap: 0.375rem;
        margin-bottom: 1rem;
    }
    
    .archive-tabs .tab-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .archive-tabs .tab-btn i {
        font-size: 0.85rem;
    }
    
    #archive-manager .events-table-container,
    #archive-manager .feedback-table-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        width: calc(100% + 1.5rem);
        max-width: calc(100% + 1.5rem);
    }
    
    #archive-manager .events-table-container table,
    #archive-manager .feedback-table-container table {
        min-width: 800px !important;
        font-size: 0.75rem;
    }
    
    #archive-manager .events-table-container th,
    #archive-manager .events-table-container td,
    #archive-manager .feedback-table-container th,
    #archive-manager .feedback-table-container td {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Archived Attendees Table - Small Mobile Responsive */
    #archive-manager #archivedAttendeesTable {
        min-width: 1000px !important;
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(1),
    #archive-manager #archivedAttendeesTable td:nth-child(1) {
        min-width: 100px !important; /* Name */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(2),
    #archive-manager #archivedAttendeesTable td:nth-child(2) {
        min-width: 130px !important; /* Email */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(3),
    #archive-manager #archivedAttendeesTable td:nth-child(3) {
        min-width: 70px !important; /* Category */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(4),
    #archive-manager #archivedAttendeesTable td:nth-child(4) {
        min-width: 100px !important; /* Reason of Archiving */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(5),
    #archive-manager #archivedAttendeesTable td:nth-child(5) {
        min-width: 90px !important; /* Archived By */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(6),
    #archive-manager #archivedAttendeesTable td:nth-child(6) {
        min-width: 110px !important; /* Archived At */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(7),
    #archive-manager #archivedAttendeesTable td:nth-child(7) {
        min-width: 90px !important; /* Actions */
    }
    
    /* Archived Feedback Table - Small Mobile Responsive */
    #archive-manager #archivedFeedbackTable {
        min-width: 850px !important;
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(1),
    #archive-manager #archivedFeedbackTable td:nth-child(1) {
        min-width: 100px !important; /* Name */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(2),
    #archive-manager #archivedFeedbackTable td:nth-child(2) {
        min-width: 130px !important; /* Email */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(3),
    #archive-manager #archivedFeedbackTable td:nth-child(3) {
        min-width: 100px !important; /* Reason of Archiving */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(4),
    #archive-manager #archivedFeedbackTable td:nth-child(4) {
        min-width: 90px !important; /* Archived By */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(5),
    #archive-manager #archivedFeedbackTable td:nth-child(5) {
        min-width: 110px !important; /* Archived At */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(6),
    #archive-manager #archivedFeedbackTable td:nth-child(6) {
        min-width: 90px !important; /* Actions */
    }
}

@media (max-width: 360px) {
    .archive-tabs .tab-btn {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }
    
    #archive-manager .events-table-container table,
    #archive-manager .feedback-table-container table {
        min-width: 700px !important;
        font-size: 0.7rem;
    }
    
    #archive-manager .events-table-container th,
    #archive-manager .events-table-container td,
    #archive-manager .feedback-table-container th,
    #archive-manager .feedback-table-container td {
        padding: 0.35rem 0.4rem;
        font-size: 0.7rem;
    }
    
    /* Archived Attendees Table - Extra Small Mobile */
    #archive-manager #archivedAttendeesTable {
        min-width: 900px !important;
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(1),
    #archive-manager #archivedAttendeesTable td:nth-child(1) {
        min-width: 90px !important; /* Name */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(2),
    #archive-manager #archivedAttendeesTable td:nth-child(2) {
        min-width: 120px !important; /* Email */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(3),
    #archive-manager #archivedAttendeesTable td:nth-child(3) {
        min-width: 60px !important; /* Category */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(4),
    #archive-manager #archivedAttendeesTable td:nth-child(4) {
        min-width: 90px !important; /* Reason of Archiving */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(5),
    #archive-manager #archivedAttendeesTable td:nth-child(5) {
        min-width: 80px !important; /* Archived By */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(6),
    #archive-manager #archivedAttendeesTable td:nth-child(6) {
        min-width: 100px !important; /* Archived At */
    }
    
    #archive-manager #archivedAttendeesTable th:nth-child(7),
    #archive-manager #archivedAttendeesTable td:nth-child(7) {
        min-width: 80px !important; /* Actions */
    }
    
    /* Archived Feedback Table - Extra Small Mobile */
    #archive-manager #archivedFeedbackTable {
        min-width: 750px !important;
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(1),
    #archive-manager #archivedFeedbackTable td:nth-child(1) {
        min-width: 90px !important; /* Name */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(2),
    #archive-manager #archivedFeedbackTable td:nth-child(2) {
        min-width: 120px !important; /* Email */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(3),
    #archive-manager #archivedFeedbackTable td:nth-child(3) {
        min-width: 90px !important; /* Reason of Archiving */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(4),
    #archive-manager #archivedFeedbackTable td:nth-child(4) {
        min-width: 80px !important; /* Archived By */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(5),
    #archive-manager #archivedFeedbackTable td:nth-child(5) {
        min-width: 100px !important; /* Archived At */
    }
    
    #archive-manager #archivedFeedbackTable th:nth-child(6),
    #archive-manager #archivedFeedbackTable td:nth-child(6) {
        min-width: 80px !important; /* Actions */
    }
}

/* Signatories Grid */
.signatories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.signatory-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.signatory-card:hover {
    border-color: #1e40af;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
    transform: translateY(-2px);
}

.signatory-card.inactive {
    opacity: 0.6;
    border-color: #cbd5e0;
}

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

.signatory-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signatory-status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.signatory-status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.signatory-signature-preview {
    text-align: center;
    margin: 1rem 0;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signatory-signature-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
}

.signatory-info {
    margin-top: 1rem;
}

.signatory-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.signatory-title {
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 1rem;
}

.signatory-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.signatory-actions .btn {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .signatories-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .signatory-card {
        padding: 1rem;
    }
    
    .signatory-actions {
        flex-direction: column;
    }
    
    .signatory-actions .btn {
        width: 100%;
    }
}

/* Signatures List Styles */
.signature-list-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.signature-list-item:hover {
    border-color: #4299e1;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.15);
    transform: translateY(-2px);
}

#signaturesListContainer {
    margin-top: 1rem;
}

#signaturesListContainer > div[style*="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    #signaturesListContainer > div[style*="grid"] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .signature-list-item {
        padding: 1rem;
    }
}

.template-upload {
    margin-bottom: 2rem;
}

.upload-area {
    border: 2px dashed #667eea;
    border-radius: 15px;
    padding: 3rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #1e3a8a;
    background: #f0f4ff;
}

.upload-area i {
    font-size: 2rem;
    color: #8c9adb;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    text-align: center;
}

.upload-area h3 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.upload-area p {
    color: #718096;
    margin-bottom: 1.5rem;
}

.template-list h3 {
    color: #2d3748;
    margin-bottom: 1rem;
}

.template-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.template-item {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.template-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.template-preview {
    width: 60px;
    height: 60px;
    background: #1e40af;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.template-preview i {
    font-size: 1.5rem;
    color: white;
}

.template-info {
    flex: 1;
}

.template-info h4 {
    color: #2d3748;
    margin: 0 0 0.25rem 0;
}

.template-info p {
    color: #718096;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.template-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.template-status.active {
    background: #d4edda;
    color: #155724;
}

.template-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.upload-hint {
    font-size: 0.875rem;
    color: #718096;
    margin-top: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: #5181cf;
    transition: width 0.3s ease;
    width: 0%;
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Preview Styles */
.preview-container {
    text-align: center;
}

.preview-container h3 {
    color: #2d3748;
    margin-bottom: 2rem;
}

.preview-area {
    max-width: 600px;
    margin: 0 auto;
}

.preview-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
}

.preview-info {
    color: #718096;
    font-weight: 500;
}

.certificate-preview {
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.preview-placeholder {
    text-align: center;
    color: #718096;
}

.preview-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #a0aec0;
}

/* Bulk Download Styles */
.bulk-download h3 {
    color: #2d3748;
    margin-bottom: 2rem;
}

.download-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 400px;
}

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

.option-group label {
    font-weight: 500;
    color: #2d3748;
}

.option-group select {
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.option-group select:focus {
    outline: none;
    border-color: #1e40af;
}

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

.settings-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.settings-card h3 {
    margin-bottom: 1.5rem;
    color: #2d3748;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ============================================================
   BACKGROUND SETTINGS CARD
   ============================================================ */

/* Background Type Tabs */
.bg-type-tabs {
    display: flex;
    gap: 0.5rem;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 0.35rem;
    margin-bottom: 0.25rem;
}

.bg-type-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bg-type-tab.active {
    background: white;
    color: #1e40af;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.bg-type-tab:hover:not(.active) {
    background: rgba(255,255,255,0.6);
    color: #334155;
}

/* Color Presets */
.bg-color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bg-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    padding: 0;
}

.bg-color-swatch:hover,
.bg-color-swatch.selected {
    border-color: #1e40af;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(30,64,175,0.25);
}

/* Gradient Presets */
.bg-gradient-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bg-gradient-swatch {
    width: 60px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.bg-gradient-swatch:hover,
.bg-gradient-swatch.selected {
    border-color: #1e40af;
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(30,64,175,0.25);
}

/* Custom Gradient Row */
.bg-custom-gradient-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.bg-custom-gradient-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bg-custom-gradient-row input[type="color"] {
    width: 48px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    padding: 2px;
}

/* Image Upload Area */
.bg-image-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.25s ease;
}

.bg-image-upload-area:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.bg-image-upload-area i {
    font-size: 2rem;
    color: #93c5fd;
    display: block;
    margin-bottom: 0.75rem;
}

.bg-image-upload-area p {
    color: #334155;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
}

.bg-image-upload-area small {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Image Preview */
.bg-image-preview-wrap {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    max-width: 100%;
}

.bg-image-preview-wrap img {
    display: block;
    max-width: 100%;
    max-height: 160px;
    object-fit: cover;
    width: 100%;
}

.bg-image-remove-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(15,23,42,0.75);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.bg-image-remove-btn:hover {
    background: #ef4444;
}

/* Live Preview Strip */
.bg-live-preview {
    position: relative;
    width: 100%;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.bg-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background 0.3s ease;
    z-index: 1;
}

.bg-preview-ui-mock {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 2;
}

.mock-sidebar {
    width: 55px;
    height: 100%;
    background: rgba(30,41,59,0.85);
    flex-shrink: 0;
}

.mock-content {
    flex: 1;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mock-card {
    flex: 1;
    background: rgba(255,255,255,0.75);
    border-radius: 5px;
    backdrop-filter: blur(2px);
}


/* Fully wide settings card for background */
.bg-settings-card {
    grid-column: 1 / -1;
}

/* ============================================================
   BRANDING SETTINGS CARD
   ============================================================ */

.branding-settings-card {
    grid-column: 1 / -1;
}

.branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}

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

.branding-item-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.2s;
}

.branding-item-card:hover {
    border-color: #bfdbfe;
}

.branding-item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.branding-item-header > i {
    font-size: 1.6rem;
    color: #3b82f6;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.branding-item-header h4 {
    margin: 0 0 0.2rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.branding-item-header p {
    margin: 0;
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.4;
}

.branding-current-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.branding-img-preview {
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-preview-box {
    height: 90px;
    padding: 0.75rem;
}

.logo-preview-box img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.bg-preview-box {
    height: 130px;
}

.bg-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branding-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: all 0.22s ease;
}

.branding-upload-area:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.branding-upload-area i {
    font-size: 1.75rem;
    color: #93c5fd;
    display: block;
    margin-bottom: 0.5rem;
}

.branding-upload-area p {
    color: #334155;
    font-weight: 500;
    font-size: 0.9rem;
    margin: 0 0 0.2rem 0;
}

.branding-upload-area small {
    color: #94a3b8;
    font-size: 0.78rem;
}

.branding-new-preview {
    animation: fadeIn 0.3s ease;
}

.branding-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.branding-actions .btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

/* Admin Management Styles */
.admin-management-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.admin-management-tabs .tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: #718096;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-management-tabs .tab-btn.active,
.admin-management-tabs .tab-btn:hover {
    color: #1e40af;
    border-bottom-color: #1e40af;
}

.tab-content {
    display: none;
}

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

/* Enhanced Event Details Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 1rem;
}

/* Receipt View Modal - Higher z-index to appear in front of other modals */
#receiptViewModal {
    z-index: 3000 !important;
}

.modal[style*="display: flex"],
.modal[style*="display: block"] {
    display: flex !important;
}

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

.modal-content {
    background-color: #ffffff;
    margin: 3% auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-content .modal-header {
    flex-shrink: 0;
}

.modal-content .modal-footer {
    flex-shrink: 0;
}

/* Event Details Modal - Large Modal */
.modal-content.large-modal,
#eventDetailsModal .modal-content {
    max-width: 1400px;
    width: 95%;
    max-height: 92vh;
}

/* Attendance Status Summary Modal - Large Modal */
#attendanceStatusModal .modal-content {
    max-width: 1400px;
    width: 95%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

/* Attendance Status Modal Header - Export Button */
#attendanceStatusModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

#attendanceStatusModal .modal-header h2 {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#attendanceStatusModal .modal-header h2 span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#attendanceStatusModal .modal-header > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

#attendanceStatusModal .modal-header .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#attendanceStatusModal .modal-header .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Attendance Status Modal Body */
#attendanceStatusModal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

#attendanceStatusModal .filters {
    width: 100%;
}

#attendanceStatusModal .filter-group {
    width: 100%;
}

#attendanceStatusModal .filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2d3748;
}

#attendanceStatusModal .filter-group select {
    width: 100%;
    max-width: 100%;
}

#attendanceStatusModal .admin-table-container {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#attendanceStatusModal .admin-table-container::-webkit-scrollbar {
    height: 8px;
}

#attendanceStatusModal .admin-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#attendanceStatusModal .admin-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#attendanceStatusModal .admin-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#attendanceStatusModal .admin-table-container table {
    margin: 0;
    width: 100%;
    min-width: 1000px;
}

/* Desktop Responsive (1025px and above) */
@media (min-width: 1025px) {
    #attendanceStatusModal .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
    }
    
    #attendanceStatusModal .modal-header {
        padding: 2rem 2.5rem;
    }
    
    #attendanceStatusModal .modal-header h2 {
        font-size: 1.75rem;
    }
    
    #attendanceStatusModal .modal-body {
        padding: 2rem 2.5rem;
        max-height: calc(90vh - 140px);
    }
    
    #attendanceStatusModal .filter-group select {
        min-width: 300px;
    }
}

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #attendanceStatusModal .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
    }
    
    #attendanceStatusModal .modal-header {
        padding: 1.5rem 2rem;
    }
    
    #attendanceStatusModal .modal-header h2 {
        font-size: 1.5rem;
    }
    
    #attendanceStatusModal .modal-body {
        padding: 1.5rem 2rem;
        max-height: calc(90vh - 120px);
    }
    
    #attendanceStatusModal .modal-header .btn span {
        display: inline;
    }
}

/* Mobile Responsive (below 768px) */
@media (max-width: 767px) {
    #attendanceStatusModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 95vh !important;
        margin: 1% auto !important;
    }
    
    #attendanceStatusModal .modal-header {
        padding: 1rem 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    #attendanceStatusModal .modal-header h2 {
        font-size: 1.25rem;
        width: 100%;
        flex-direction: row;
        align-items: center;
    }
    
    #attendanceStatusModal .modal-header h2 i {
        font-size: 1.1rem;
    }
    
    #attendanceStatusModal .modal-header h2 span {
        font-size: 1.1rem;
        white-space: normal;
        word-break: break-word;
    }
    
    #attendanceStatusModal .modal-header > div {
        width: 100%;
        justify-content: space-between;
    }
    
    #attendanceStatusModal .modal-header .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        flex: 1;
        justify-content: center;
    }
    
    #attendanceStatusModal .modal-header .btn span {
        display: inline;
    }
    
    #attendanceStatusModal .modal-close {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    
    #attendanceStatusModal .modal-body {
        padding: 1rem 1.25rem;
        max-height: calc(95vh - 180px);
    }
    
    #attendanceStatusModal .filters {
        margin-bottom: 1rem;
    }
    
    #attendanceStatusModal .filter-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    #attendanceStatusModal .filter-group select {
        font-size: 0.9rem;
        padding: 0.625rem;
        min-width: 100% !important;
    }
    
    #attendanceStatusModal .admin-table-container {
        margin-top: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #attendanceStatusModal .admin-table {
        min-width: 1000px !important;
        width: 100%;
        font-size: 0.85rem;
        table-layout: auto;
    }
    
    #attendanceStatusModal .admin-table th,
    #attendanceStatusModal .admin-table td {
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
        min-width: 120px;
    }
    
    #attendanceStatusModal .admin-table th:nth-child(1),
    #attendanceStatusModal .admin-table td:nth-child(1) {
        min-width: 150px; /* Name */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(2),
    #attendanceStatusModal .admin-table td:nth-child(2) {
        min-width: 180px; /* Email */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(3),
    #attendanceStatusModal .admin-table td:nth-child(3) {
        min-width: 200px; /* Event */
        white-space: normal;
    }
    
    #attendanceStatusModal .admin-table th:nth-child(4),
    #attendanceStatusModal .admin-table td:nth-child(4) {
        min-width: 180px; /* Check-in Time */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(5),
    #attendanceStatusModal .admin-table td:nth-child(5) {
        min-width: 120px; /* Department */
    }
    
    #attendanceStatusModal .empty-state {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    #attendanceStatusModal .empty-state i {
        font-size: 2.5rem !important;
    }
    
    #attendanceStatusModal .empty-state p {
        font-size: 0.95rem;
        margin-top: 1rem;
    }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
    #attendanceStatusModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    #attendanceStatusModal .modal-header {
        padding: 1rem;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 10;
        border-bottom: 2px solid #f1f5f9;
    }
    
    #attendanceStatusModal .modal-header h2 {
        font-size: 1.1rem;
    }
    
    #attendanceStatusModal .modal-header h2 span {
        font-size: 1rem;
    }
    
    #attendanceStatusModal .modal-header .btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    #attendanceStatusModal .modal-header .btn span {
        display: none;
    }
    
    #attendanceStatusModal .modal-header .btn i {
        margin: 0;
    }
    
    #attendanceStatusModal .modal-close {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    #attendanceStatusModal .modal-body {
        padding: 1rem;
        max-height: calc(100vh - 160px);
    }
    
    #attendanceStatusModal .filter-group label {
        font-size: 0.85rem;
    }
    
    #attendanceStatusModal .filter-group select {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    
    #attendanceStatusModal .admin-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-x: auto !important;
        overflow-y: visible;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #attendanceStatusModal .admin-table {
        min-width: 1000px !important;
        width: 100%;
        font-size: 0.75rem;
        table-layout: auto;
    }
    
    #attendanceStatusModal .admin-table th,
    #attendanceStatusModal .admin-table td {
        padding: 0.4rem 0.5rem;
        white-space: nowrap;
        min-width: 100px;
    }
    
    #attendanceStatusModal .admin-table th:nth-child(1),
    #attendanceStatusModal .admin-table td:nth-child(1) {
        min-width: 130px; /* Name */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(2),
    #attendanceStatusModal .admin-table td:nth-child(2) {
        min-width: 150px; /* Email */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(3),
    #attendanceStatusModal .admin-table td:nth-child(3) {
        min-width: 180px; /* Event */
        white-space: normal;
    }
    
    #attendanceStatusModal .admin-table th:nth-child(4),
    #attendanceStatusModal .admin-table td:nth-child(4) {
        min-width: 150px; /* Check-in Time */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(5),
    #attendanceStatusModal .admin-table td:nth-child(5) {
        min-width: 100px; /* Department */
    }
    
    #attendanceStatusModal .empty-state {
        padding: 1.5rem 0.5rem;
    }
    
    #attendanceStatusModal .empty-state i {
        font-size: 2rem !important;
    }
    
    #attendanceStatusModal .empty-state p {
        font-size: 0.85rem;
    }
}

/* Extra Small Mobile (below 360px) */
@media (max-width: 360px) {
    #attendanceStatusModal .modal-header {
        padding: 0.75rem;
    }
    
    #attendanceStatusModal .modal-header h2 {
        font-size: 1rem;
    }
    
    #attendanceStatusModal .modal-header h2 span {
        font-size: 0.9rem;
    }
    
    #attendanceStatusModal .modal-header .btn {
        padding: 0.4rem;
        font-size: 0.7rem;
    }
    
    #attendanceStatusModal .modal-body {
        padding: 0.75rem;
        max-height: calc(100vh - 140px);
    }
    
    #attendanceStatusModal .admin-table-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        overflow-x: auto !important;
        overflow-y: visible;
        width: calc(100% + 1.5rem);
        max-width: calc(100% + 1.5rem);
    }
    
    #attendanceStatusModal .admin-table {
        min-width: 900px !important;
        width: 100%;
        font-size: 0.7rem;
        table-layout: auto;
    }
    
    #attendanceStatusModal .admin-table th,
    #attendanceStatusModal .admin-table td {
        padding: 0.35rem 0.4rem;
        white-space: nowrap;
        min-width: 90px;
    }
    
    #attendanceStatusModal .admin-table th:nth-child(1),
    #attendanceStatusModal .admin-table td:nth-child(1) {
        min-width: 110px; /* Name */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(2),
    #attendanceStatusModal .admin-table td:nth-child(2) {
        min-width: 130px; /* Email */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(3),
    #attendanceStatusModal .admin-table td:nth-child(3) {
        min-width: 160px; /* Event */
        white-space: normal;
    }
    
    #attendanceStatusModal .admin-table th:nth-child(4),
    #attendanceStatusModal .admin-table td:nth-child(4) {
        min-width: 130px; /* Check-in Time */
    }
    
    #attendanceStatusModal .admin-table th:nth-child(5),
    #attendanceStatusModal .admin-table td:nth-child(5) {
        min-width: 90px; /* Department */
    }
}

/* Landscape Orientation for Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    #attendanceStatusModal .modal-content {
        max-height: 98vh !important;
    }
    
    #attendanceStatusModal .modal-body {
        max-height: calc(98vh - 140px);
    }
}

/* Desktop size - increase event details modal width */
@media (min-width: 1025px) {
    .modal-content.large-modal,
    #eventDetailsModal .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
    }
    
    #attendanceStatusModal .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
    }
}

/* Ensure modal content children use flexbox properly for scrolling */
.modal-content > .modal-header,
.modal-content > .modal-footer {
    flex-shrink: 0;
}

.modal-content form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-content form > .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Event Details Modal - Large Modal */
.modal-content.large-modal,
.large-modal .modal-content {
    max-width: 1400px;
    width: 95%;
    max-height: 92vh;
}

/* Desktop size - increase event details modal width */
@media (min-width: 1025px) {
    .modal-content.large-modal,
    .large-modal .modal-content,
    #eventDetailsModal .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
    }
}

.modal-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    padding: 2rem 2.5rem 1.5rem;
    border-bottom: 2px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.close {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.close:hover {
    color: #2d3748;
    background: #f1f5f9;
    transform: rotate(90deg);
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Delete Confirmation Modal - Ensure all content is visible */
#deleteConfirmModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#deleteConfirmModal .modal-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#deleteConfirmModal .modal-header h2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #2d3748 !important;
}

#deleteConfirmModal .modal-close {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #94a3b8 !important;
}

#deleteConfirmModal .modal-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 2rem 2.5rem !important;
}

#deleteConfirmModal .modal-body p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #2d3748 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

#deleteConfirmModal .modal-footer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
}

#deleteConfirmModal .modal-footer .btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

#deleteConfirmModal .modal-footer .btn-secondary {
    background-color: #64748b !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-secondary:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-danger:hover {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-success:hover {
    background-color: #059669 !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-warning {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

#deleteConfirmModal .modal-footer .btn-warning:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

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

/* Event Details Modal Body */
#eventDetailsBody {
    padding: 2rem 2.5rem;
    overflow-y: auto;
    flex: 1;
}

.event-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-details-grid > div {
    background: white;
    padding: 1.75rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-details-grid > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.event-details-grid h3 {
    color: #1a202c;
    margin: 0 0 1.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    padding-bottom: 1rem;
    border-bottom: 2px solid #667eea;
}

.event-details-grid p {
    color: #4a5568;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.5rem 0;
}

.event-details-grid p:last-child {
    margin-bottom: 0;
}

.event-details-grid strong {
    color: #2d3748;
    font-weight: 600;
    display: inline-block;
    min-width: 140px;
    margin-right: 0.5rem;
}

/* Event Status Badges */
.event-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.event-status-badge i {
    font-size: 0.875rem;
}

.status-upcoming {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-upcoming:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(251, 191, 36, 0.3);
}

.status-ongoing {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    color: #1e40af;
    border: 1px solid #60a5fa;
}

.status-ongoing:hover {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(96, 165, 250, 0.3);
}

.status-completed {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
    color: #065f46;
    border: 1px solid #34d399;
}

.status-completed:hover {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 211, 153, 0.3);
}

.status-cancelled {
    background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.status-cancelled:hover {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(248, 113, 113, 0.3);
}

/* Attendance Status Badges */
.status-pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-pending:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(251, 191, 36, 0.3);
}

.status-present {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
    color: #065f46;
    border: 1px solid #34d399;
}

.status-present:hover {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 211, 153, 0.3);
}

.status-absent {
    background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.status-absent:hover {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(248, 113, 113, 0.3);
}

.status-late {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    color: #78350f;
    border: 1px solid #f59e0b;
}

.status-late:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* Certificate Request Status Badges */
.status-processing {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    color: #1e40af;
    border: 1px solid #60a5fa;
}

.status-processing:hover {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(96, 165, 250, 0.3);
}

.status-approved {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
    color: #065f46;
    border: 1px solid #34d399;
}

.status-approved:hover {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 211, 153, 0.3);
}

.status-rejected {
    background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
    color: #991b1b;
    border: 1px solid #f87171;
}

.status-rejected:hover {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(248, 113, 113, 0.3);
}

#eventDetailsBody > h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

.attendees-table-container {
    margin-top: 1.5rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.attendees-table-container .admin-table {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.attendees-table-container .admin-table th {
    background: #1e40af;
    color: white;
    font-weight: 600;
    padding: 1.25rem 1rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attendees-table-container .admin-table td {
    padding: 1rem;
    font-size: 0.95rem;
    color: #4a5568;
}

.attendees-table-container .admin-table tr:hover {
    background: #f8fafc;
}

.faculty-info {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.faculty-info h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.faculty-info p {
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.events-section {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.events-section h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

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

.event-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-item h4 {
    color: #2d3748;
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
}

.event-item p {
    color: #718096;
    margin: 0;
    font-size: 0.8rem;
}

.event-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.event-status.attended {
    background: #d4edda;
    color: #155724;
}

.event-status.organized {
    background: #cce5ff;
    color: #004085;
}

.status-badge.status-main {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-event_head {
    background: #fff3cd;
    color: #856404;
}

.status-badge.status-admin {
    background: #d1ecf1;
    color: #0c5460;
}

/* Clickable Stat Cards */
.stat-card.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2);
    user-select: none;
    -webkit-user-select: none;
}

.stat-card.clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #1e40af;
    opacity: 1;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.stat-card.clickable:hover .stat-arrow {
    opacity: 1;
    transform: translateX(5px);
    color: #1e3a8a;
}

/* Attendees Management Styles */
.attendees-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.attendees-tabs .tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: #718096;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.attendees-tabs .tab-btn.active,
.attendees-tabs .tab-btn:hover {
    color: #1e40af;
    border-bottom-color: #1e40af;
}

/* Notification Center Enhancements */
.templates-grid-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .templates-grid-3col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.template-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.template-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.template-header h4 {
    color: #2d3748;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.template-header p {
    color: #718096;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.template-preview {
    background: #f8fafc;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.25rem;
    flex: 1;
    min-height: 140px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Certificate Management Styles */
.certificate-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipient-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    margin: 0;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.checkbox-option:hover {
    background-color: #f1f5f9;
}

.checkbox-option input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
    appearance: none;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    pointer-events: auto;
    z-index: 1;
}

.checkbox-option input[type="checkbox"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.checkbox-option input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2);
}

.radio-option:hover {
    background-color: #f1f5f9;
}

.radio-option:active {
    background-color: #e2e8f0;
}

.radio-option input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='4' fill='%23fff'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.radio-option input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.radio-option input[type="radio"]:hover {
    border-color: #2563eb;
}

/* Certificate Table */
.certificates-table-container {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

/* Loading States */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Form Enhancements */
.form-group input:invalid,
.form-group select:invalid,
.form-group textarea:invalid {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.form-group input:valid,
.form-group select:valid,
.form-group textarea:valid {
    border-color: #38a169;
    box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #38a169;
    min-width: 300px;
    max-width: 400px;
    animation: slideInRight 0.3s ease;
}

.toast.error {
    border-left-color: #e53e3e;
}

.toast.warning {
    border-left-color: #d69e2e;
}

.toast.info {
    border-left-color: #3182ce;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Form Styles */
/* Event Modal Specific Styles */
.event-modal-content {
    max-width: 1400px;
    width: 95%;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: #ffffff;
}

.event-modal-content .modal-header {
    flex-shrink: 0;
}

.event-modal-content .modal-footer {
    flex-shrink: 0;
}

.event-modal-content .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Specific fix for createCertificateModal */
#createCertificateModal .event-modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95vh !important;
    overflow: hidden !important;
}

/* Specific fix for sendCertificateModal - Enable scrolling */
#sendCertificateModal .event-modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95vh !important;
    overflow: hidden !important;
}

#sendCertificateModal .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(95vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2rem 2.5rem !important;
    padding-bottom: 4rem !important;
}

#sendCertificateModal .event-modal-content .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(95vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2rem 2.5rem !important;
    padding-bottom: 4rem !important;
}

#sendCertificateModal .modal-content.event-modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95vh !important;
    overflow: hidden !important;
}

#sendCertificateModal .modal-body form,
#sendCertificateModal .modal-body .certificate-form {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Scrollbar styling for sendCertificateModal */
#sendCertificateModal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#sendCertificateModal .modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#sendCertificateModal .modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#sendCertificateModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#createCertificateModal .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(95vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    padding: 2rem 2.5rem !important;
    padding-bottom: 4rem !important;
}

#createCertificateModal .event-modal-content .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(95vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2rem 2.5rem !important;
    padding-bottom: 4rem !important;
}

#createCertificateModal .modal-body form,
#createCertificateModal .modal-body .certificate-form {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Scrollbar styling for createCertificateModal */
#createCertificateModal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#createCertificateModal .modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#createCertificateModal .modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#createCertificateModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#createCertificateModal .modal-content.event-modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95vh !important;
    overflow: hidden !important;
    height: auto !important;
}

/* Laptop/Desktop Responsive (1025px and above) */
@media (min-width: 1025px) {
    .event-modal-content {
        max-width: 1200px !important;
        width: 90% !important;
        max-height: 90vh !important;
        margin: 2% auto !important;
    }
    
    .modal-header {
        padding: 2rem 2.5rem !important;
    }
    
    .modal-header h2 {
        font-size: 1.75rem !important;
    }
    
    .modal-body {
        padding: 2rem 2.5rem !important;
        max-height: calc(90vh - 200px) !important;
    }
    
    .form-section {
        margin-bottom: 2.5rem !important;
        padding: 2rem !important;
        background: #f8fafc !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    .section-title {
        font-size: 1.1rem !important;
        color: #1e40af !important;
        margin-bottom: 1.5rem !important;
    }
    
    .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    
    .modal-footer {
        padding: 1.5rem 2.5rem !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
    
    .modal-footer .btn {
        width: auto !important;
        min-width: 180px !important;
        padding: 0.875rem 2rem !important;
    }
}

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .event-modal-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: 92vh !important;
        margin: 2% auto !important;
    }
    
    .modal-header {
        padding: 1.5rem 2rem !important;
    }
    
    .modal-header h2 {
        font-size: 1.5rem !important;
    }
    
    .modal-body {
        padding: 1.5rem 2rem !important;
        max-height: calc(92vh - 180px) !important;
    }
    
    .form-section {
        margin-bottom: 2rem !important;
        padding: 1.5rem !important;
        background: #f8fafc !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.25rem !important;
    }
    
    .modal-footer {
        padding: 1.5rem 2rem !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
    
    .modal-footer .btn {
        width: auto !important;
        min-width: 150px !important;
    }
}

/* Laptop/Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .event-modal-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: 92vh !important;
        margin: 2% auto !important;
    }
    
    .modal-header {
        padding: 1.5rem 2rem !important;
    }
    
    .modal-header h2 {
        font-size: 1.5rem !important;
    }
    
    .modal-body {
        padding: 1.5rem 2rem !important;
        max-height: calc(92vh - 180px) !important;
    }
    
    .form-section {
        margin-bottom: 2rem !important;
        padding: 1.5rem !important;
    }
    
    .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.25rem !important;
    }
    
    .modal-footer {
        padding: 1.5rem 2rem !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
    
    .modal-footer .btn {
        width: auto !important;
        min-width: 150px !important;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2.5rem;
    border-bottom: 2px solid #f1f5f9;
    background: #ffffff;
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0;
}

.modal-close:hover {
    color: #2d3748;
    background: #f1f5f9;
    transform: rotate(90deg);
}

.modal-body {
    padding: 2rem 2.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2.5rem;
    border-top: 2px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
}

/* Email Template Modal Styles */
.variables-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.variable-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.variable-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.variable-item code {
    background: #1e40af;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.variable-item span {
    color: #4a5568;
    font-size: 0.9rem;
    flex: 1;
}

.email-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.preview-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.preview-header strong {
    color: #2d3748;
    font-weight: 600;
    min-width: 80px;
    font-size: 0.95rem;
}

.preview-header span {
    color: #4a5568;
    font-size: 0.95rem;
    flex: 1;
    word-wrap: break-word;
}

.preview-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-body strong {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.95rem;
}

.preview-text {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
}

.preview-text::-webkit-scrollbar {
    width: 6px;
}

.preview-text::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.preview-text::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.preview-text::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.event-form,
.admin-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Form Sections */
.form-section {
    margin-bottom: 2.5rem;
}

.form-section:last-of-type {
    margin-bottom: 0;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.required {
    color: #e53e3e;
    font-weight: 700;
}

.helper-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.helper-text i {
    font-size: 0.75rem;
}

.error-message {
    display: none;
    color: #e53e3e;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.error-message:not(:empty) {
    display: block;
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: #e53e3e;
    background-color: #fef2f2;
}

.form-group input.error:focus,
.form-group select.error:focus,
.form-group textarea.error:focus {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: inherit;
    background: #ffffff;
    color: #2d3748;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a0aec0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-group input:invalid:not(:placeholder-shown),
.form-group select:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

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

.form-grid .form-group {
    margin-bottom: 0;
}

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

/* Radio Button Group */
.radio-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #ffffff;
    flex: 1;
    min-width: 140px;
    position: relative;
}

.radio-label:hover {
    border-color: #1e40af;
    background: #f8fafc;
}

.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.radio-label input[type="radio"]:checked + .radio-custom {
    border-color: #1e40af;
    background: #1e40af;
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
}

.radio-label input[type="radio"]:checked ~ .radio-text {
    color: #1e40af;
    font-weight: 600;
}

.radio-label input[type="radio"]:checked + .radio-custom + .radio-text {
    color: #1e40af;
    font-weight: 600;
}

.radio-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4a5568;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.radio-text i {
    font-size: 1rem;
}

/* File Upload Styles */
.file-upload-group {
    margin-bottom: 1.5rem;
}

.file-upload-wrapper {
    position: relative;
}

.file-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 120px;
    color: #334155;
    font-weight: 500;
}

.file-upload-label:hover {
    border-color: #1e40af;
    background: #f1f5f9;
}

.file-upload-label i {
    font-size: 2rem;
    color: #475569 !important;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
    display: block;
}

.file-upload-label:hover i {
    color: #1e40af;
}

.file-upload-text {
    font-weight: 600;
    color: #64748b !important;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    display: block;
}

.file-upload-hint {
    font-size: 0.85rem;
    color: #64748b !important;
    display: block;
}

.file-preview {
    margin-top: 1rem;
    display: none;
}

.file-preview.active {
    display: block;
}

.file-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    object-fit: cover;
}

.file-preview-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #4a5568;
}

.file-preview-remove {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.file-preview-remove:hover {
    background: rgba(229, 62, 62, 0.1);
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-upcoming,
.status-badge.status-upcoming {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #92400e !important;
    border: 1px solid #fbbf24 !important;
}

.status-ongoing,
.status-badge.status-ongoing {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%) !important;
    color: #1e40af !important;
    border: 1px solid #60a5fa !important;
}
.status-completed {
    background: #d1ecf1;
    color: #0c5460;
}

.status-cancelled {
    background: #f8d7da;
    color: #721c24;
    font-weight: 600;
}

/* Button Styles - Mobile Touch Optimization */
.btn,
button,
a.btn,
input[type="button"],
input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: #1e40af;
    color: white;
    border: 1px solid #1e40af;
}

.btn-primary:hover {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(30, 64, 175, 0.2);
}

.btn-warning {
    background: #ffc107;
    color: #856404;
    border: 1px solid #ffc107;
}

.btn-warning:hover {
    background: #ffb300;
    border-color: #ffb300;
    color: #856404;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.btn-danger {
    background: #dc3545;
    color: white;
    border: 1px solid #dc3545;
}

.btn-danger:hover {
    background: #c82333;
    border-color: #bd2130;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.btn-success {
    background: #10b981;
    color: white;
    border: 1px solid #10b981;
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-info {
    background: #0ea5e9;
    color: white;
    border: 1px solid #0ea5e9;
}

.btn-info:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.test-email-config-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-info:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0.5rem;
    opacity: 1 !important;
    visibility: visible !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2);
    user-select: none;
    -webkit-user-select: none;
}

/* Event Actions Menu (Three-Dots Menu) */
.event-actions-menu-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Ensure table cells don't clip the dropdown */
.admin-table td {
    overflow: visible !important;
}

/* Specifically for the actions column */
.admin-table td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Ensure table container doesn't clip dropdown - but keep horizontal scroll */
.events-table-container {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.events-table-container .admin-table {
    overflow: visible !important;
}

.events-table-container .admin-table tbody {
    overflow: visible !important;
}

.events-table-container .admin-table tr {
    overflow: visible !important;
}

/* Attendee Events Modal - prevent horizontal scrolling */
/* Admin Events Modal - Base Styles */
#adminEventsModal .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    max-height: 95vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

#adminEventsModal .modal-content * {
    box-sizing: border-box;
}

/* Override inline styles - Prevent overflow */
#adminEventsModal .modal-content {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

#adminEventsModal .modal-content[style*="overflow-y"] {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

#adminEventsModal .modal-content[style*="max-width"] {
    max-width: 95% !important;
    width: 95% !important;
}

#adminEventsModal .modal-header {
    flex-shrink: 0;
}

#adminEventsModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden !important;
    min-height: 0;
    padding: 1.5rem !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#adminEventsModal .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

#adminEventsModal .events-table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-sizing: border-box;
}

#adminEventsModal #adminEventsTable {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 1700px !important;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
}

#adminEventsModal #adminEventsTable th,
#adminEventsModal #adminEventsTable td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 0.75rem 0.75rem !important;
    box-sizing: border-box;
    max-width: none;
    overflow: visible;
    vertical-align: top;
    border: 1px solid #e2e8f0;
}

/* Column width adjustments - Prevent overflow */
#adminEventsModal #adminEventsTable th:nth-child(1),
#adminEventsModal #adminEventsTable td:nth-child(1) {
    min-width: 180px !important;
    max-width: 220px; /* Event Title */
    white-space: normal;
    word-wrap: break-word;
}

#adminEventsModal #adminEventsTable th:nth-child(2),
#adminEventsModal #adminEventsTable td:nth-child(2) {
    min-width: 220px !important;
    max-width: 250px !important; /* Start Date & Time */
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 1rem !important;
}

#adminEventsModal #adminEventsTable th:nth-child(3),
#adminEventsModal #adminEventsTable td:nth-child(3) {
    min-width: 220px !important;
    max-width: 250px !important; /* End Date & Time */
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 1rem !important;
}

#adminEventsModal #adminEventsTable th:nth-child(4),
#adminEventsModal #adminEventsTable td:nth-child(4) {
    min-width: 140px !important;
    max-width: 170px; /* Venue */
    white-space: normal;
    word-wrap: break-word;
}

#adminEventsModal #adminEventsTable th:nth-child(5),
#adminEventsModal #adminEventsTable td:nth-child(5) {
    min-width: 120px !important;
    max-width: 150px; /* Speaker */
    white-space: normal;
    word-wrap: break-word;
}

#adminEventsModal #adminEventsTable th:nth-child(6),
#adminEventsModal #adminEventsTable td:nth-child(6) {
    min-width: 100px !important;
    max-width: 120px; /* Mode */
    white-space: nowrap;
}

#adminEventsModal #adminEventsTable th:nth-child(7),
#adminEventsModal #adminEventsTable td:nth-child(7) {
    min-width: 120px !important;
    max-width: 150px; /* Type */
    white-space: normal;
    word-wrap: break-word;
}

#adminEventsModal #adminEventsTable th:nth-child(8),
#adminEventsModal #adminEventsTable td:nth-child(8) {
    min-width: 240px !important;
    max-width: 270px !important; /* Created Date */
    white-space: nowrap !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
}

#adminEventsModal #adminEventsTable th:nth-child(9),
#adminEventsModal #adminEventsTable td:nth-child(9) {
    min-width: 170px !important;
    max-width: 200px !important; /* Attendance Status */
    white-space: nowrap !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

#adminEventsModal #adminEventsTable th:nth-child(10),
#adminEventsModal #adminEventsTable td:nth-child(10) {
    min-width: 240px !important;
    max-width: 270px !important; /* Checked in Time */
    white-space: nowrap !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
}

#adminEventsModal #adminEventsTable th:nth-child(11),
#adminEventsModal #adminEventsTable td:nth-child(11) {
    min-width: 100px;
    max-width: 120px; /* Status */
    white-space: nowrap;
}

/* Scrollbar styling */
#adminEventsModal .events-table-container::-webkit-scrollbar {
    height: 8px;
}

#adminEventsModal .events-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#adminEventsModal .events-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#adminEventsModal .events-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Attendee Events Modal - Base Styles */
#attendeeEventsModal .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    max-height: 95vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Override inline styles - Prevent overflow */
#attendeeEventsModal .modal-content[style*="overflow-y"] {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

#attendeeEventsModal .modal-header {
    flex-shrink: 0;
}

#attendeeEventsModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 1.5rem !important;
}

#attendeeEventsModal .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.attended-events-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}
.attended-events-filter-wrap label {
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary, #4a5568);
    white-space: nowrap;
}
.attendance-status-filter {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 140px;
}

#attendeeEventsModal .events-table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-sizing: border-box;
}

#attendeeEventsModal #attendeeEventsTable {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 1700px !important;
    border-collapse: separate;
    border-spacing: 0;
}

#attendeeEventsModal #attendeeEventsTable th,
#attendeeEventsModal #attendeeEventsTable td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 0.75rem 0.75rem !important;
    box-sizing: border-box;
    vertical-align: top;
    border: 1px solid #e2e8f0;
}

/* Column width adjustments - Increased widths to prevent overlap */
#attendeeEventsModal #attendeeEventsTable th:nth-child(1),
#attendeeEventsModal #attendeeEventsTable td:nth-child(1) {
    min-width: 180px !important; /* Event Title */
    max-width: 200px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(2),
#attendeeEventsModal #attendeeEventsTable td:nth-child(2) {
    min-width: 200px !important; /* Event Description */
    max-width: 250px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(3),
#attendeeEventsModal #attendeeEventsTable td:nth-child(3) {
    min-width: 120px !important; /* Event Type */
    max-width: 140px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(4),
#attendeeEventsModal #attendeeEventsTable td:nth-child(4) {
    min-width: 220px !important; /* Start Date & Time */
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 1rem !important;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(5),
#attendeeEventsModal #attendeeEventsTable td:nth-child(5) {
    min-width: 220px !important; /* End Date & Time */
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 1rem !important;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(6),
#attendeeEventsModal #attendeeEventsTable td:nth-child(6) {
    min-width: 100px !important; /* Mode */
    max-width: 120px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(7),
#attendeeEventsModal #attendeeEventsTable td:nth-child(7) {
    min-width: 150px !important; /* Organizer/Creator */
    max-width: 180px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(8),
#attendeeEventsModal #attendeeEventsTable td:nth-child(8) {
    min-width: 120px !important; /* Speaker */
    max-width: 150px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(9),
#attendeeEventsModal #attendeeEventsTable td:nth-child(9) {
    min-width: 120px !important; /* Event Status */
    max-width: 140px;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(10),
#attendeeEventsModal #attendeeEventsTable td:nth-child(10) {
    min-width: 170px !important; /* Attendance Status */
    max-width: 200px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(11),
#attendeeEventsModal #attendeeEventsTable td:nth-child(11) {
    min-width: 240px !important; /* Checked In Time */
    max-width: 270px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
}

#attendeeEventsModal #attendeeEventsTable th:nth-child(12),
#attendeeEventsModal #attendeeEventsTable td:nth-child(12) {
    min-width: 120px !important; /* Department */
    max-width: 150px;
}

/* Scrollbar styling */
#attendeeEventsModal .events-table-container::-webkit-scrollbar {
    height: 8px;
}

#attendeeEventsModal .events-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#attendeeEventsModal .events-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#attendeeEventsModal .events-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #attendeeEventsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 92vh !important;
    }
    
    #attendeeEventsModal .modal-header {
        padding: 1.5rem 2rem !important;
    }
    
    #attendeeEventsModal .modal-body {
        padding: 1.5rem 2rem !important;
    }
    
    #attendeeEventsModal #attendeeEventsTable {
        min-width: 1100px;
        font-size: 0.9rem;
    }
    
    #attendeeEventsModal #attendeeEventsTable th,
    #attendeeEventsModal #attendeeEventsTable td {
        padding: 0.625rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Mobile Responsive (below 768px) */
@media (max-width: 767px) {
    #attendeeEventsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 95vh !important;
        margin: 1% auto !important;
    }
    
    #attendeeEventsModal .modal-header {
        padding: 1rem 1.25rem !important;
    }
    
    #attendeeEventsModal .modal-header h2 {
        font-size: 1.25rem !important;
    }
    
    #attendeeEventsModal .modal-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    
    #attendeeEventsModal .modal-body {
        padding: 1rem 1.25rem !important;
        max-height: calc(95vh - 120px) !important;
    }
    
    #attendeeEventsModal .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #attendeeEventsModal .modal-actions .btn {
        width: 100% !important;
        justify-content: center;
    }
    
    #attendeeEventsModal .events-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #attendeeEventsModal #attendeeEventsTable {
        min-width: 1000px !important;
        font-size: 0.85rem;
    }
    
    #attendeeEventsModal #attendeeEventsTable th,
    #attendeeEventsModal #attendeeEventsTable td {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
    #attendeeEventsModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    #attendeeEventsModal .modal-header {
        padding: 0.875rem 1rem !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
    }
    
    #attendeeEventsModal .modal-header h2 {
        font-size: 1.1rem !important;
    }
    
    #attendeeEventsModal .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
    
    #attendeeEventsModal .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 100px) !important;
    }
    
    #attendeeEventsModal .modal-actions .btn {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    #attendeeEventsModal .events-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #attendeeEventsModal #attendeeEventsTable {
        min-width: 900px !important;
        font-size: 0.75rem;
    }
    
    #attendeeEventsModal #attendeeEventsTable th,
    #attendeeEventsModal #attendeeEventsTable td {
        padding: 0.4rem 0.35rem;
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile (below 360px) */
@media (max-width: 360px) {
    #attendeeEventsModal .modal-header {
        padding: 0.75rem !important;
    }
    
    #attendeeEventsModal .modal-header h2 {
        font-size: 1rem !important;
    }
    
    #attendeeEventsModal .modal-body {
        padding: 0.75rem !important;
    }
    
    #attendeeEventsModal #attendeeEventsTable {
        min-width: 800px !important;
        font-size: 0.7rem;
    }
    
    #attendeeEventsModal #attendeeEventsTable th,
    #attendeeEventsModal #attendeeEventsTable td {
        padding: 0.35rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Admin Events Modal Responsive Styles */
/* Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #adminEventsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 92vh !important;
    }
    
    #adminEventsModal .modal-header {
        padding: 1.5rem 2rem !important;
    }
    
    #adminEventsModal .modal-body {
        padding: 1.5rem 2rem !important;
    }
    
    #adminEventsModal #adminEventsTable {
        min-width: 900px;
        font-size: 0.9rem;
    }
    
    #adminEventsModal #adminEventsTable th,
    #adminEventsModal #adminEventsTable td {
        padding: 0.625rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Mobile Responsive (below 768px) */
@media (max-width: 767px) {
    #adminEventsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 95vh !important;
        margin: 1% auto !important;
    }
    
    #adminEventsModal .modal-header {
        padding: 1rem 1.25rem !important;
    }
    
    #adminEventsModal .modal-header h2 {
        font-size: 1.25rem !important;
    }
    
    #adminEventsModal .modal-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    
    #adminEventsModal .modal-body {
        padding: 1rem 1.25rem !important;
        max-height: calc(95vh - 120px) !important;
    }
    
    #adminEventsModal .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #adminEventsModal .modal-actions .btn {
        width: 100% !important;
        justify-content: center;
    }
    
    #adminEventsModal .modal-body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #adminEventsModal .events-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
        overflow-x: auto !important;
    }
    
    #adminEventsModal #adminEventsTable {
        min-width: 900px !important;
        font-size: 0.85rem;
    }
    
    #adminEventsModal #adminEventsTable th,
    #adminEventsModal #adminEventsTable td {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }
    
    /* Reset max-widths on mobile for scrolling */
    #adminEventsModal #adminEventsTable th,
    #adminEventsModal #adminEventsTable td {
        max-width: none !important;
    }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
    #adminEventsModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    #adminEventsModal .modal-header {
        padding: 0.875rem 1rem !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
    }
    
    #adminEventsModal .modal-header h2 {
        font-size: 1.1rem !important;
    }
    
    #adminEventsModal .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
    
    #adminEventsModal .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 100px) !important;
    }
    
    #adminEventsModal .modal-actions .btn {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    #adminEventsModal .events-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #adminEventsModal #adminEventsTable {
        min-width: 800px !important;
        font-size: 0.75rem;
    }
    
    #adminEventsModal #adminEventsTable th,
    #adminEventsModal #adminEventsTable td {
        padding: 0.4rem 0.35rem;
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile (below 360px) */
@media (max-width: 360px) {
    #adminEventsModal .modal-header {
        padding: 0.75rem !important;
    }
    
    #adminEventsModal .modal-header h2 {
        font-size: 1rem !important;
    }
    
    #adminEventsModal .modal-body {
        padding: 0.75rem !important;
    }
    
    #adminEventsModal #adminEventsTable {
        min-width: 700px !important;
        font-size: 0.7rem;
    }
    
    #adminEventsModal #adminEventsTable th,
    #adminEventsModal #adminEventsTable td {
        padding: 0.35rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Faculty Events Modal - Base Styles */
#facultyEventsModal .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    max-height: 95vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Override inline styles - Prevent overflow */
#facultyEventsModal .modal-content[style*="overflow-y"] {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

#facultyEventsModal .modal-content[style*="max-width"] {
    max-width: 95% !important;
    width: 95% !important;
}

#facultyEventsModal .modal-header {
    flex-shrink: 0;
}

#facultyEventsModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden !important;
    min-height: 0;
    padding: 1.5rem !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#facultyEventsModal .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

#facultyEventsModal .events-table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-sizing: border-box;
}

#facultyEventsModal #facultyEventsTable {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 1700px !important;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
}

#facultyEventsModal #facultyEventsTable th,
#facultyEventsModal #facultyEventsTable td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 0.75rem 0.75rem !important;
    box-sizing: border-box;
    max-width: none;
    overflow: visible;
    vertical-align: top;
    border: 1px solid #e2e8f0;
}

/* Column width adjustments - Increased to prevent overlap */
#facultyEventsModal #facultyEventsTable th:nth-child(1),
#facultyEventsModal #facultyEventsTable td:nth-child(1) {
    min-width: 180px !important; /* Event Title */
    max-width: 220px;
}

#facultyEventsModal #facultyEventsTable th:nth-child(2),
#facultyEventsModal #facultyEventsTable td:nth-child(2) {
    min-width: 220px !important; /* Start Date & Time */
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 1rem !important;
}

#facultyEventsModal #facultyEventsTable th:nth-child(3),
#facultyEventsModal #facultyEventsTable td:nth-child(3) {
    min-width: 220px !important; /* End Date & Time */
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-right: 1rem !important;
}

#facultyEventsModal #facultyEventsTable th:nth-child(4),
#facultyEventsModal #facultyEventsTable td:nth-child(4) {
    min-width: 140px !important; /* Venue */
    max-width: 170px;
}

#facultyEventsModal #facultyEventsTable th:nth-child(5),
#facultyEventsModal #facultyEventsTable td:nth-child(5) {
    min-width: 120px !important; /* Speaker */
    max-width: 150px;
}

#facultyEventsModal #facultyEventsTable th:nth-child(6),
#facultyEventsModal #facultyEventsTable td:nth-child(6) {
    min-width: 100px !important; /* Mode */
    max-width: 120px;
    white-space: nowrap;
}

#facultyEventsModal #facultyEventsTable th:nth-child(7),
#facultyEventsModal #facultyEventsTable td:nth-child(7) {
    min-width: 120px !important; /* Type */
    max-width: 150px;
}

#facultyEventsModal #facultyEventsTable th:nth-child(8),
#facultyEventsModal #facultyEventsTable td:nth-child(8) {
    min-width: 240px !important; /* Created Date */
    max-width: 270px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
}

#facultyEventsModal #facultyEventsTable th:nth-child(9),
#facultyEventsModal #facultyEventsTable td:nth-child(9) {
    min-width: 170px !important; /* Attendance Status */
    max-width: 200px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

#facultyEventsModal #facultyEventsTable th:nth-child(10),
#facultyEventsModal #facultyEventsTable td:nth-child(10) {
    min-width: 240px !important; /* Checked in Time */
    max-width: 270px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
}

#facultyEventsModal #facultyEventsTable th:nth-child(11),
#facultyEventsModal #facultyEventsTable td:nth-child(11) {
    min-width: 120px !important; /* Status */
    max-width: 140px;
    white-space: nowrap;
}

/* Scrollbar styling */
#facultyEventsModal .events-table-container::-webkit-scrollbar {
    height: 8px;
}

#facultyEventsModal .events-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#facultyEventsModal .events-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

#facultyEventsModal .events-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Faculty Events Modal Responsive Styles */
/* Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #facultyEventsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 92vh !important;
    }
    
    #facultyEventsModal .modal-header {
        padding: 1.5rem 2rem !important;
    }
    
    #facultyEventsModal .modal-body {
        padding: 1.5rem 2rem !important;
    }
    
    #facultyEventsModal #facultyEventsTable {
        min-width: 900px;
        font-size: 0.9rem;
    }
    
    #facultyEventsModal #facultyEventsTable th,
    #facultyEventsModal #facultyEventsTable td {
        padding: 0.625rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Mobile Responsive (below 768px) */
@media (max-width: 767px) {
    #facultyEventsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        max-height: 95vh !important;
        margin: 1% auto !important;
    }
    
    #facultyEventsModal .modal-header {
        padding: 1rem 1.25rem !important;
    }
    
    #facultyEventsModal .modal-header h2 {
        font-size: 1.25rem !important;
    }
    
    #facultyEventsModal .modal-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    
    #facultyEventsModal .modal-body {
        padding: 1rem 1.25rem !important;
        max-height: calc(95vh - 120px) !important;
    }
    
    #facultyEventsModal .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #facultyEventsModal .modal-actions .btn {
        width: 100% !important;
        justify-content: center;
    }
    
    #facultyEventsModal .events-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #facultyEventsModal #facultyEventsTable {
        min-width: 900px !important;
        font-size: 0.85rem;
    }
    
    #facultyEventsModal #facultyEventsTable th,
    #facultyEventsModal #facultyEventsTable td {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
    #facultyEventsModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    #facultyEventsModal .modal-header {
        padding: 0.875rem 1rem !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
    }
    
    #facultyEventsModal .modal-header h2 {
        font-size: 1.1rem !important;
    }
    
    #facultyEventsModal .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
    
    #facultyEventsModal .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 100px) !important;
    }
    
    #facultyEventsModal .modal-actions .btn {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    #facultyEventsModal .events-table-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: calc(100% + 2rem);
        max-width: calc(100% + 2rem);
    }
    
    #facultyEventsModal #facultyEventsTable {
        min-width: 800px !important;
        font-size: 0.75rem;
    }
    
    #facultyEventsModal #facultyEventsTable th,
    #facultyEventsModal #facultyEventsTable td {
        padding: 0.4rem 0.35rem;
        font-size: 0.75rem;
    }
}

/* Extra Small Mobile (below 360px) */
@media (max-width: 360px) {
    #facultyEventsModal .modal-header {
        padding: 0.75rem !important;
    }
    
    #facultyEventsModal .modal-header h2 {
        font-size: 1rem !important;
    }
    
    #facultyEventsModal .modal-body {
        padding: 0.75rem !important;
    }
    
    #facultyEventsModal #facultyEventsTable {
        min-width: 700px !important;
        font-size: 0.7rem;
    }
    
    #facultyEventsModal #facultyEventsTable th,
    #facultyEventsModal #facultyEventsTable td {
        padding: 0.35rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Certificate tables - ensure dropdown menus are visible */
.certificates-table-container {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.certificates-table-container .admin-table {
    overflow: visible !important;
}

.certificates-table-container .admin-table tbody {
    overflow: visible !important;
}

.certificates-table-container .admin-table tr {
    overflow: visible !important;
}

/* Specifically for the actions column in certificate tables */
.certificates-table-container .admin-table td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Attendees table - ensure dropdown menus are visible */
.table-responsive-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.table-responsive-wrapper .admin-table {
    overflow: visible !important;
}

.table-responsive-wrapper .admin-table tbody {
    overflow: visible !important;
}

.table-responsive-wrapper .admin-table tr {
    overflow: visible !important;
}

/* Specifically for the actions column in attendees table */
.table-responsive-wrapper .admin-table td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Feedback table - ensure dropdown menus are visible */
.feedback-table-container {
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}

.feedback-table-container .admin-table {
    overflow: visible !important;
}

.feedback-table-container .admin-table tbody {
    overflow: visible !important;
}

.feedback-table-container .admin-table tr {
    overflow: visible !important;
}

/* Specifically for the actions column in feedback tables */
.feedback-table-container .admin-table td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Specifically for the actions column in archived faculty table */
#archive-manager .events-table-container .admin-table td:has(.event-actions-menu-wrapper),
.events-table-container .admin-table td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Ensure archived faculty actions are clickable */
#archivedFacultyTable td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

#archivedEventsTable .event-actions-menu-wrapper,
#archivedAttendeesTable .event-actions-menu-wrapper,
#archivedFeedbackTable .event-actions-menu-wrapper,
#archivedFacultyTable .event-actions-menu-wrapper,
#archivedAdminsTable .event-actions-menu-wrapper {
    position: relative;
    z-index: 100;
}

#archivedEventsTable .event-menu-dropdown,
#archivedAttendeesTable .event-menu-dropdown,
#archivedFeedbackTable .event-menu-dropdown,
#archivedFacultyTable .event-menu-dropdown,
#archivedAdminsTable .event-menu-dropdown {
    z-index: 99999 !important;
    pointer-events: auto !important;
}

#archivedEventsTable .event-menu-dropdown.active,
#archivedAttendeesTable .event-menu-dropdown.active,
#archivedFeedbackTable .event-menu-dropdown.active,
#archivedFacultyTable .event-menu-dropdown.active,
#archivedAdminsTable .event-menu-dropdown.active {
    pointer-events: auto !important;
}

#archivedAdminsTable td:has(.event-actions-menu-wrapper) {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

/* Responsive layout for Faculty & CIT Student details modals */
#viewFacultyModal .modal-content.large-modal,
#citStudentDetailsModal .modal-content.large-modal,
#citStudentDetailsModal .modal-content {
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    margin: 1.5rem auto;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

#viewFacultyModal .faculty-details,
#citStudentDetailsModal .faculty-details {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    #viewFacultyModal .modal-content.large-modal,
    #citStudentDetailsModal .modal-content.large-modal,
    #citStudentDetailsModal .modal-content {
        max-width: 100%;
        margin: 1rem;
        border-radius: 12px;
        padding: 1rem;
    }

    #viewFacultyModal .faculty-details,
    #citStudentDetailsModal .faculty-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    #viewFacultyModal .faculty-info p,
    #citStudentDetailsModal .faculty-info p {
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
}

.event-menu-trigger {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #4a5568;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.1);
    user-select: none;
    -webkit-user-select: none;
}

.event-menu-trigger:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}

.event-menu-trigger:active {
    transform: scale(0.95);
}

.event-menu-trigger i {
    font-size: 1rem;
    color: inherit;
}

.event-menu-dropdown {
    position: fixed;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 99999 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: visible;
    display: block;
    top: 0;
    left: 0;
}

.event-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.event-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: #2d3748;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(30, 64, 175, 0.1);
    user-select: none;
    -webkit-user-select: none;
}

.event-menu-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.event-menu-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.event-menu-item:hover {
    background: #f8fafc;
    color: #1e40af;
}

.event-menu-item i {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    color: inherit;
    flex-shrink: 0;
}

.event-menu-item span {
    flex: 1;
}

.event-menu-item-warning {
    color: #856404;
}

.event-menu-item-warning:hover {
    background: #fff3cd;
    color: #856404;
}

.event-menu-item-warning i {
    color: #ffc107;
}

.event-menu-item-danger {
    color: #721c24;
}

.event-menu-item-danger:hover {
    background: #f8d7da;
    color: #721c24;
}

.event-menu-item-danger i {
    color: #dc3545;
}

.event-menu-item-success {
    color: #155724;
}

.event-menu-item-success:hover {
    background: #d4edda;
    color: #155724;
}

.event-menu-item-success i {
    color: #28a745;
}

/* Export Button Visibility */
.btn[onclick*="export"],
.btn[onclick*="Export"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.btn-icon {
    padding: 0.5rem;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.feedback-item {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #1e40af;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feedback-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

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

.feedback-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.feedback-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.feedback-name {
    font-weight: 600;
    color: #2d3748;
}

.feedback-event {
    color: #1e40af;
    font-size: 0.9rem;
}

.feedback-date {
    color: #718096;
    font-size: 0.8rem;
}

.email-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.email-status.email-sent {
    background-color: #d1fae5;
    color: #065f46;
}

.email-status.email-not-sent {
    background-color: #fee2e2;
    color: #991b1b;
}

.feedback-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.feedback-new {
    background: #e6fffa;
    color: #00b894;
}

.feedback-reviewed {
    background: #d1ecf1;
    color: #0c5460;
}

.feedback-message {
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #e2e8f0;
}

.feedback-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.feedback-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 1rem;
}

.feedback-event {
    color: #1e40af;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feedback-event i {
    font-size: 0.85rem;
}

.feedback-date {
    color: #718096;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feedback-date i {
    font-size: 0.8rem;
}

/* Feedback Modal Styles */
.feedback-modal-content {
    max-width: 700px;
    width: 95%;
    max-height: 90vh;
}

.feedback-details-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Send Feedback Emails Modal Styles */
#sendFeedbackEmailsModal .event-modal-content {
    max-width: 900px;
}

.feedback-email-step {
    animation: fadeIn 0.3s ease;
}

/* ========== Create Event Modal - Stepper (Modern) ========== */
.create-event-modal-stepper .event-modal-stepper-content {
    max-width: 720px;
    width: 95%;
    max-height: 92vh;
    max-height: min(92vh, 92dvh); /* responsive height on mobile (dvh = dynamic viewport) */
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.create-event-modal-stepper .event-form.event-form-stepper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.create-event-modal-stepper .stepper-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.create-event-modal-stepper .stepper-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.stepper-indicator {
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    flex-shrink: 0;
}

.stepper-steps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: min-content;
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.stepper-step .stepper-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.stepper-step.active .stepper-num,
.stepper-step.completed .stepper-num {
    background: #2563eb;
    color: #fff;
}

.stepper-step.completed .stepper-num {
    background: #10b981;
}

.stepper-step.active {
    color: #1e293b;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.stepper-step .stepper-label {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .stepper-step .stepper-label { display: none; }
    .stepper-steps { gap: 0.5rem; }
}

.create-event-modal-stepper .stepper-body {
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.stepper-panel {
    display: none;
    animation: fadeIn 0.25s ease;
}

.stepper-panel.active {
    display: block;
}

.stepper-panel-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.stepper-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stepper-panel-title i {
    color: #2563eb;
}

.create-event-modal-stepper .form-group {
    margin-bottom: 1.25rem;
}

.create-event-modal-stepper .form-group:last-child {
    margin-bottom: 0;
}

.create-event-modal-stepper .form-group label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.create-event-modal-stepper input[type="text"],
.create-event-modal-stepper input[type="email"],
.create-event-modal-stepper input[type="number"],
.create-event-modal-stepper input[type="date"],
.create-event-modal-stepper input[type="time"],
.create-event-modal-stepper input[type="url"],
.create-event-modal-stepper select,
.create-event-modal-stepper textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.create-event-modal-stepper input:focus,
.create-event-modal-stepper select:focus,
.create-event-modal-stepper textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.create-event-modal-stepper .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

/* Ensure registration deadline layout stays consistent */
.create-event-modal-stepper #eventRegDeadlineSingleGroupStepper,
.create-event-modal-stepper #eventRegDeadlineMultiGroupStepper {
    grid-template-columns: 1fr 1fr !important;
    margin-top: 0.75rem;
}

@media (max-width: 768px) {
    .create-event-modal-stepper #eventRegDeadlineSingleGroupStepper,
    .create-event-modal-stepper #eventRegDeadlineMultiGroupStepper {
        grid-template-columns: 1fr !important;
    }
}

.create-event-modal-stepper .form-row.session-time-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: flex-start;
}

.create-event-modal-stepper .form-row.session-time-row .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.create-event-modal-stepper .form-row.session-time-row .form-group label {
    margin-bottom: 0.5rem;
}

.create-event-modal-stepper .form-row.session-time-row input[type="time"] {
    min-height: 2.75rem;
    box-sizing: border-box;
}

.create-event-modal-stepper .form-group-inline .input-with-action {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.create-event-modal-stepper .input-with-action select {
    flex: 1;
    min-width: 0;
}

.create-event-modal-stepper .btn-add-category {
    white-space: nowrap;
}

.radio-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Event Format (Single Day / Multi-Day) responsive: stack on tablet and mobile */
@media (max-width: 768px) {
    #createEventModal .radio-group-row,
    .create-event-modal-stepper .radio-group.radio-group-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    #createEventModal .radio-group-row .radio-label,
    .create-event-modal-stepper .radio-group.radio-group-row .radio-label {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}
@media (max-width: 600px) {
    #createEventModal .radio-group-row .radio-label,
    .create-event-modal-stepper .radio-group.radio-group-row .radio-label {
        min-height: 42px;
        padding: 0.6rem 0.85rem;
    }
}

.create-event-modal-stepper .helper-text {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.35rem;
}

.create-event-modal-stepper .mb-3 { margin-bottom: 1rem; }

/* Section inside stepper card (e.g. Location & Tickets inside Sessions card) */
.stepper-card-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.stepper-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.stepper-section-title i {
    color: #1e40af;
}

/* Session cards */
.session-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

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

.session-card-title {
    font-weight: 600;
    color: #1e293b;
}

.session-card .form-group { margin-bottom: 1rem; }
.session-card .form-group:last-child { margin-bottom: 0; }

/* Venue show/hide is controlled in JS (online mode hides venue; do not use !important here). */

.session-speakers-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.session-speaker-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}
.session-speaker-checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.add-session-btn, .add-speaker-stepper-btn {
    margin-top: 0.5rem;
}

/* Speaker cards (stepper) */
.speaker-card-stepper {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.speaker-card-stepper .form-group { margin-bottom: 1rem; }
.speaker-card-stepper .form-group:last-child { margin-bottom: 0; }

.file-upload-compact .file-upload-label {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #334155;
    font-weight: 500;
}

/* Stepper speaker image: make file input cover the label so click opens dialog */
.file-upload-wrapper .file-upload-label {
    position: relative;
    cursor: pointer;
}
.file-upload-wrapper .file-upload-label .file-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

/* Create Event modal: force visible text on file upload (override styles.css white text) */
.create-event-modal-stepper .file-upload-label,
.create-event-modal-stepper .file-upload-wrapper .file-upload-label {
    color: #334155 !important;
    background: #f8fafc !important;
    border: 2px dashed #cbd5e0 !important;
    font-weight: 500 !important;
}
.create-event-modal-stepper .file-upload-compact .file-upload-label {
    color: #334155 !important;
    background: #f8fafc !important;
    border: 2px dashed #cbd5e0 !important;
    font-weight: 500 !important;
}
.create-event-modal-stepper .file-upload-label i,
.create-event-modal-stepper .file-upload-wrapper .file-upload-label i,
.create-event-modal-stepper .file-upload-compact .file-upload-label i {
    color: #475569 !important;
}
.create-event-modal-stepper .file-upload-label:hover,
.create-event-modal-stepper .file-upload-wrapper .file-upload-label:hover,
.create-event-modal-stepper .file-upload-compact .file-upload-label:hover {
    background: #f1f5f9 !important;
    border-color: #1e40af !important;
}
.create-event-modal-stepper .file-upload-label:hover i,
.create-event-modal-stepper .file-upload-compact .file-upload-label:hover i {
    color: #1e40af !important;
}

.file-preview-small {
    min-height: 60px;
    margin-top: 0.5rem;
}

/* Multi-day schedule rows - Date, Start, End: three equal columns for alignment */
.multi-day-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.multi-day-row .form-group {
    min-width: 0;
    margin-bottom: 0;
}

.multi-day-row label { margin-bottom: 0.25rem; }

.multi-day-row .form-group input[type="date"],
.multi-day-row .form-group input[type="time"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Sticky footer */
.create-event-modal-stepper .stepper-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.stepper-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.create-event-modal-stepper .btn-ghost {
    background: transparent;
    color: #64748b;
    border: none;
}

.create-event-modal-stepper .btn-ghost:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* Add Category mini modal */
.mini-modal .mini-modal-content {
    max-width: 400px;
    border-radius: 12px;
}

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

.custom-category-list-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.custom-category-item-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background-color: #edf2f7;
    font-size: 0.8rem;
}
.custom-category-item-stepper .custom-category-name-stepper {
    font-weight: 500;
    color: #2d3748;
}
.custom-category-item-stepper .custom-category-action-btn {
    border: none;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.custom-category-item-stepper .custom-category-action-btn:hover {
    color: #1a202c;
}

/* Radio buttons and checkboxes in modals */
#sendFeedbackEmailsModal input[type="radio"],
#createEventModal input[type="radio"],
#sendFeedbackEmailsModal input[type="checkbox"],
#createEventModal input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease;
    position: relative;
}

/* Create Event modal: smaller checkboxes */
#createEventModal input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

/* Checkbox checked state - Show checkmark */
#sendFeedbackEmailsModal input[type="checkbox"]:checked,
#createEventModal input[type="checkbox"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

#createEventModal input[type="checkbox"]:checked {
    background-size: 9px 9px;
}

#createEventModal .checkbox-option {
    font-size: 0.9rem;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
}

/* Radio button checked state */
#sendFeedbackEmailsModal input[type="radio"],
#createEventModal input[type="radio"] {
    border-radius: 50%;
}

#sendFeedbackEmailsModal input[type="radio"]:checked,
#createEventModal input[type="radio"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle fill='white' cx='4' cy='4' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
}

#sendFeedbackEmailsModal input[type="checkbox"]:focus,
#createEventModal input[type="checkbox"]:focus,
#sendFeedbackEmailsModal input[type="radio"]:focus,
#createEventModal input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#sendFeedbackEmailsModal label,
#createEventModal label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    word-wrap: break-word;
}

#createEventModal .speaker-entry.speaker-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8fafc;
}

#createEventModal .speaker-entry-remove .remove-speaker-btn {
    font-size: 0.875rem;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.step-title i {
    color: #1e40af;
    font-size: 1.1rem;
}

.step-description {
    color: #718096;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

#eventSelect {
    background-color: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

#eventSelect:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

#eventSelect option {
    padding: 0.5rem;
}

#eventSelect option:hover {
    background-color: #f1f5f9;
}

#eventsSummary {
    animation: slideDown 0.3s ease;
}

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

#attendeesPreviewList {
    background: #f8fafc;
}

.attendee-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

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

.attendee-preview-item:hover {
    background-color: #f1f5f9;
}

.attendee-preview-item.hidden {
    display: none;
}

.attendee-preview-info {
    flex: 1;
}

.attendee-preview-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.attendee-preview-email {
    font-size: 0.85rem;
    color: #718096;
}

.attendee-preview-event {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.attendee-preview-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 1rem;
}

.attendee-preview-badge.present {
    background: #d1fae5;
    color: #065f46;
}

.attendee-preview-badge.late {
    background: #fef3c7;
    color: #92400e;
}

.send-results-success {
    background: #d1fae5;
    border-left: 4px solid #10b981;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.send-results-success h4 {
    color: #065f46;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-results-success p {
    color: #047857;
    margin: 0;
    font-size: 0.95rem;
}

.send-results-error {
    background: #fee2e2;
    border-left: 4px solid #ef4444;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.send-results-error h4 {
    color: #991b1b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-results-error ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: #dc2626;
    font-size: 0.9rem;
}

.send-results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.send-results-stat {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.send-results-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.25rem;
}

.send-results-stat-label {
    font-size: 0.85rem;
    color: #718096;
}

/* Responsive Styles for Feedback Email Modal and Event Management Modal */
@media (max-width: 1024px) {
    #sendFeedbackEmailsModal .event-modal-content,
    #createEventModal .event-modal-content {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 92vh !important;
    }
    
    #sendFeedbackEmailsModal .modal-header,
    #createEventModal .modal-header {
        padding: 1.5rem 2rem !important;
    }
    
    #sendFeedbackEmailsModal .modal-body,
    #createEventModal .modal-body {
        padding: 1.5rem 2rem !important;
    }
    
    #sendFeedbackEmailsModal .modal-footer,
    #createEventModal .modal-footer {
        padding: 1.5rem 2rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    #sendFeedbackEmailsModal .modal-footer .btn,
    #createEventModal .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    #sendFeedbackEmailsModal .event-modal-content,
    #createEventModal .event-modal-content {
        width: 98% !important;
        max-width: 98% !important;
        max-height: 95vh !important;
        margin: 1% auto !important;
    }

    #sendFeedbackEmailsModal .modal-header,
    #createEventModal .modal-header {
        padding: 1rem 1.25rem !important;
    }
    
    #sendFeedbackEmailsModal .modal-header h2,
    #createEventModal .modal-header h2 {
        font-size: 1.25rem !important;
    }

    #sendFeedbackEmailsModal .modal-body,
    #createEventModal .modal-body {
        padding: 1rem 1.25rem !important;
    }

    /* Create Event modal: mas maliit na bilog (Event Format, Target Audience) sa tablet/cp */
    #createEventModal .radio-custom {
        width: 18px !important;
        height: 18px !important;
    }
    #createEventModal .radio-label input[type="radio"]:checked + .radio-custom::after {
        width: 6px;
        height: 6px;
    }
    #createEventModal .radio-label .radio-text {
        font-size: 0.9rem;
    }
    #createEventModal .radio-label {
        padding: 0.65rem 1rem !important;
        min-height: 42px;
    }

    /* Create Event modal: compact UI sa tablet/cp */
    #createEventModal .stepper-panel-card {
        padding: 1rem 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    #createEventModal .stepper-panel-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    #createEventModal .stepper-panel-title i {
        font-size: 0.95rem !important;
    }
    #createEventModal .helper-text.mb-3,
    #createEventModal .stepper-body .helper-text {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }
    #createEventModal .form-group {
        margin-bottom: 1rem !important;
    }
    #createEventModal .form-group label {
        font-size: 0.875rem !important;
    }
    #createEventModal .stepper-body {
        padding: 1rem 1.25rem !important;
    }
    #createEventModal .radio-group-row {
        gap: 0.65rem !important;
    }

    .step-title {
        font-size: 1.1rem;
        flex-wrap: wrap;
    }
    
    .step-title i {
        font-size: 1rem;
    }

    .step-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Radio buttons and checkboxes - Mobile */
    #sendFeedbackEmailsModal input[type="radio"],
    #createEventModal input[type="radio"],
    #sendFeedbackEmailsModal input[type="checkbox"],
    #createEventModal input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    
    /* Checkbox checked state - Mobile */
    #sendFeedbackEmailsModal input[type="checkbox"]:checked,
    #createEventModal input[type="checkbox"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M3 9l4 4 8-8'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 16px 16px !important;
    }
    
    /* Radio checked state - Mobile */
    #sendFeedbackEmailsModal input[type="radio"]:checked,
    #createEventModal input[type="radio"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle fill='white' cx='5' cy='5' r='4'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 10px 10px !important;
    }
    
    #sendFeedbackEmailsModal label,
    #createEventModal label {
        font-size: 0.9rem;
        gap: 0.75rem;
        padding: 0.5rem 0;
    }
    
    #sendFeedbackEmailsModal label span,
    #createEventModal label span {
        flex: 1;
        word-wrap: break-word;
    }

    #eventSelect {
        font-size: 0.9rem;
        padding: 0.625rem !important;
        width: 100% !important;
    }
    
    #eventSelect option {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    #attendeesSearch {
        width: 100% !important;
        margin-top: 0.5rem;
        font-size: 0.9rem !important;
    }
    
    #attendeesPreviewContainer > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    #attendeesPreviewContainer input {
        width: 100% !important;
    }

    .attendee-preview-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem !important;
    }

    .attendee-preview-badge {
        margin-left: 0;
    }
    
    /* Event Management Modal - Mobile */
    #createEventModal .form-section {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    #createEventModal .section-title {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    #createEventModal .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #createEventModal .form-group {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    #createEventModal .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #createEventModal input,
    #createEventModal select,
    #createEventModal textarea {
        font-size: 0.9rem !important;
        padding: 0.625rem !important;
    }
    
    #createEventModal textarea {
        min-height: 100px !important;
    }

    .send-results-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .send-results-stat {
        padding: 0.75rem !important;
    }
    
    .send-results-stat-value {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    #sendFeedbackEmailsModal .event-modal-content,
    #createEventModal .event-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    #sendFeedbackEmailsModal .modal-header,
    #createEventModal .modal-header {
        padding: 0.875rem 1rem !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
    }
    
    #sendFeedbackEmailsModal .modal-header h2,
    #createEventModal .modal-header h2 {
        font-size: 1.1rem !important;
    }
    
    #sendFeedbackEmailsModal .modal-close,
    #createEventModal .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }

    #sendFeedbackEmailsModal .modal-body,
    #createEventModal .modal-body {
        padding: 1rem !important;
    }
    
    /* Target Audience: mas maliit na bilog sa cp */
    #createEventModal .radio-custom {
        width: 16px !important;
        height: 16px !important;
    }
    #createEventModal .radio-label input[type="radio"]:checked + .radio-custom::after {
        width: 6px;
        height: 6px;
    }
    #createEventModal .radio-label .radio-text {
        font-size: 0.85rem;
    }
    #createEventModal .radio-label {
        padding: 0.6rem 0.85rem !important;
    }
    #createEventModal input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
    #createEventModal input[type="checkbox"]:checked {
        background-size: 12px 12px !important;
    }
    #createEventModal .checkbox-option {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.85rem;
    }
    
    /* Create Event modal: mas compact sa cp */
    #createEventModal .stepper-panel-card {
        padding: 0.875rem 1rem !important;
        margin-bottom: 0.65rem !important;
    }
    #createEventModal .stepper-panel-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.6rem !important;
    }
    #createEventModal .helper-text.mb-3,
    #createEventModal .stepper-body .helper-text {
        font-size: 0.75rem !important;
        margin-bottom: 0.6rem !important;
    }
    #createEventModal .form-group {
        margin-bottom: 0.85rem !important;
    }
    #createEventModal .stepper-body {
        padding: 0.75rem 1rem !important;
    }
    #createEventModal .radio-group-row {
        gap: 0.5rem !important;
    }
    #createEventModal .radio-label {
        min-height: 38px !important;
    }
    #createEventModal .stepper-indicator {
        padding: 0.65rem 1rem !important;
    }
    #createEventModal .stepper-step .stepper-num {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }
    #createEventModal .stepper-step {
        padding: 0.4rem 0.5rem !important;
    }
    #createEventModal .stepper-footer {
        padding: 0.75rem 1rem !important;
    }
    #createEventModal .stepper-footer .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .step-title {
        font-size: 1rem !important;
    }
    
    .step-title i {
        font-size: 0.9rem !important;
    }

    .step-description {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Radio buttons and checkboxes - Small Mobile */
    #sendFeedbackEmailsModal input[type="radio"],
    #createEventModal input[type="radio"],
    #sendFeedbackEmailsModal input[type="checkbox"],
    #createEventModal input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    /* Create Event modal: keep compact checkbox/radio sa cp */
    #createEventModal input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
    
    /* Checkbox checked state - Small Mobile */
    #sendFeedbackEmailsModal input[type="checkbox"]:checked,
    #createEventModal input[type="checkbox"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 14px 14px !important;
    }
    
    /* Radio checked state - Small Mobile */
    #sendFeedbackEmailsModal input[type="radio"]:checked,
    #createEventModal input[type="radio"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle fill='white' cx='4' cy='4' r='3'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 8px 8px !important;
    }
    
    #sendFeedbackEmailsModal label,
    #createEventModal label {
        font-size: 0.85rem !important;
        gap: 0.5rem !important;
        padding: 0.375rem 0 !important;
    }

    #eventSelect {
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }
    
    #eventSelect option {
        padding: 0.4rem !important;
        font-size: 0.8rem !important;
    }
    
    #attendeesSearch {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    #attendeesPreviewList {
        max-height: 300px !important;
        padding: 0.75rem !important;
    }
    
    .attendee-preview-item {
        padding: 0.625rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Event Management Modal - Small Mobile */
    #createEventModal .form-section {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #createEventModal .section-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #createEventModal .form-group {
        margin-bottom: 0.75rem !important;
    }
    
    #createEventModal .form-group label {
        font-size: 0.85rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    #createEventModal input,
    #createEventModal select,
    #createEventModal textarea {
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }
    
    #createEventModal textarea {
        min-height: 80px !important;
    }
    
    #sendFeedbackEmailsModal .modal-footer,
    #createEventModal .modal-footer {
        padding: 0.875rem 1rem !important;
        flex-direction: column !important;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #e2e8f0;
    }
    
    #sendFeedbackEmailsModal .modal-footer .btn,
    #createEventModal .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .send-results-stats {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .send-results-stat {
        padding: 0.625rem !important;
    }
    
    .send-results-stat-value {
        font-size: 1.1rem !important;
    }
    
    .send-results-stat-label {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 360px) {
    #sendFeedbackEmailsModal .modal-header,
    #createEventModal .modal-header {
        padding: 0.75rem !important;
    }
    
    #sendFeedbackEmailsModal .modal-header h2,
    #createEventModal .modal-header h2 {
        font-size: 1rem !important;
    }

    #sendFeedbackEmailsModal .modal-body,
    #createEventModal .modal-body {
        padding: 0.75rem !important;
    }
    
    .step-title {
        font-size: 0.95rem !important;
    }
    
    .step-description {
        font-size: 0.8rem !important;
    }
    
    /* Radio buttons and checkboxes - Extra Small */
    #sendFeedbackEmailsModal input[type="radio"],
    #createEventModal input[type="radio"],
    #sendFeedbackEmailsModal input[type="checkbox"],
    #createEventModal input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    
    /* Checkbox checked state - Extra Small */
    #sendFeedbackEmailsModal input[type="checkbox"]:checked,
    #createEventModal input[type="checkbox"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2 7l3 3 7-7'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 12px 12px !important;
    }
    
    /* Radio checked state - Extra Small */
    #sendFeedbackEmailsModal input[type="radio"]:checked,
    #createEventModal input[type="radio"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Ccircle fill='white' cx='3.5' cy='3.5' r='3'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 7px 7px !important;
    }
    
    #sendFeedbackEmailsModal label,
    #createEventModal label {
        font-size: 0.8rem !important;
    }
    
    #eventSelect {
        font-size: 0.8rem !important;
    }
    
    #createEventModal .form-section {
        padding: 0.625rem !important;
    }
    
    #createEventModal .section-title {
        font-size: 0.9rem !important;
    }
    
    #createEventModal input,
    #createEventModal select,
    #createEventModal textarea {
        font-size: 0.8rem !important;
        padding: 0.45rem !important;
    }
}

@media (max-width: 480px) {
    #sendFeedbackEmailsModal .modal-body {
        padding: 1.5rem !important;
    }

    .step-title {
        font-size: 1rem;
    }

    #eventSelect {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

.feedback-detail-section {
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.detail-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-section-title i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

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

.detail-item label {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
}

.feedback-message-full {
    color: #2d3748;
    line-height: 1.8;
    font-size: 0.95rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ============================================
   PROFILE MODULE STYLES
   ============================================ */

.profile-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.profile-card:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

.profile-card-header {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    padding: 1.5rem 2rem;
    color: #ffffff;
}

.profile-card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-card-header h2 i {
    font-size: 1.1rem;
    opacity: 0.9;
}

.profile-card-body {
    padding: 2rem;
}

/* Profile Picture Section */
.profile-picture-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
}

.profile-picture-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.profile-picture-container {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.profile-picture-container:hover {
    border-color: #1e40af;
    box-shadow: 0 6px 30px rgba(30, 64, 175, 0.3);
    transform: scale(1.02);
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-picture-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.profile-picture-container:hover .profile-picture-overlay {
    opacity: 1;
}

.profile-picture-upload-btn {
    background: #ffffff;
    color: #1e40af;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 1.25rem;
}

.profile-picture-upload-btn:hover {
    background: #1e40af;
    color: #ffffff;
    transform: scale(1.1);
}

.profile-picture-info {
    text-align: center;
    max-width: 300px;
}

.profile-picture-hint {
    color: #4a5568;
    font-size: 0.9rem;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.profile-picture-hint i {
    color: #1e40af;
}

.profile-picture-requirements {
    color: #718096;
    font-size: 0.85rem;
    margin: 0;
}

/* Profile Form */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.form-group-full {
    grid-column: 1 / -1;
}

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

.form-group label {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-group .required {
    color: #e53e3e;
    font-weight: 600;
}

.form-control {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: inherit;
    background: #ffffff;
}

.form-control:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-control:disabled,
.form-control[readonly] {
    background: #f7fafc;
    cursor: not-allowed;
    color: #718096;
}

.form-help {
    color: #718096;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 2px solid #e2e8f0;
    margin-top: 1rem;
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-control {
    padding-right: 3rem;
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.password-toggle-btn:hover {
    color: #1e40af;
}

/* Profile Subsections */
.profile-subsection {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.profile-subsection:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.subsection-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.subsection-title i {
    color: #1e40af;
    font-size: 1rem;
}

/* Toggle Switch */
.toggle-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.toggle-info {
    flex: 1;
}

.toggle-label {
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
}

.toggle-description {
    color: #718096;
    font-size: 0.85rem;
    margin: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin: 0;
    cursor: pointer;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #1e40af;
}

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

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}

/* Two-Factor Setup */
.two-factor-setup {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.setup-info {
    color: #4a5568;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setup-info i {
    color: #1e40af;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 2px dashed #e2e8f0;
}

.qr-code-container canvas {
    max-width: 200px;
    height: auto;
}

/* Activity Log */
.activity-log {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.activity-item:hover {
    background: #f1f5f9;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
}

.activity-details {
    color: #718096;
    margin: 0;
    font-size: 0.85rem;
}

/* Preferences Grid */
.preferences-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.preference-label {
    font-weight: 500;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.preference-label i {
    color: #1e40af;
    width: 20px;
}

/* Profile Preview Modal */
.profile-preview-modal {
    max-width: 600px;
    width: 95%;
}

.profile-preview-content {
    padding: 2rem;
}

/* Profile Preview - Ensure name is visible with white color */
.profile-preview .preview-header h2 {
    color: white !important;
}

/* Responsive Profile Styles */
@media (max-width: 768px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-picture-section {
        padding: 1.5rem 0;
    }
    
    .profile-card-body {
        padding: 1.5rem;
    }
    
    .form-actions {
        flex-direction: column-reverse;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    .toggle-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Reply Modal Styles */
.reply-modal-content {
    max-width: 750px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reply-modal-content form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.reply-modal-content .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    max-height: calc(90vh - 180px); /* Account for header and footer */
}

.reply-modal-content .modal-header {
    flex-shrink: 0;
}

.reply-modal-content .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0;
    padding: 1.25rem 2.5rem;
    background: #f8fafc;
    margin-top: auto;
}

/* Custom scrollbar for reply modal */
.reply-modal-content .modal-body::-webkit-scrollbar {
    width: 8px;
}

.reply-modal-content .modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.reply-modal-content .modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.reply-modal-content .modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.reply-form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.reply-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.reply-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reply-section-title i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.original-feedback-display {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.original-feedback-display strong {
    color: #2d3748;
    display: block;
    margin-bottom: 0.5rem;
}

.form-help {
    display: block;
    margin-top: 0.5rem;
    color: #718096;
    font-size: 0.85rem;
    font-style: italic;
}

.required {
    color: #e53e3e;
    font-weight: 600;
}

#replyFeedbackForm .form-group {
    margin-bottom: 1.25rem;
}

#replyFeedbackForm .form-group:last-child {
    margin-bottom: 0;
}

#replyFeedbackForm textarea {
    resize: vertical;
    min-height: 150px;
}

#replyFeedbackForm input[readonly],
#replyFeedbackForm input[readonly]:focus {
    background-color: #f7fafc;
    cursor: not-allowed;
    border-color: #cbd5e0;
}

#replySubmitBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#replySubmitBtn.loading {
    position: relative;
    color: transparent;
}

#replySubmitBtn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Recent Events */
.recent-events {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recent-event {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f1f5f9;
    border-radius: 8px;
    transition: all 0.2s ease;
    gap: 1rem;
    border: none;
}

.recent-event:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.recent-event-info {
    flex: 1;
    min-width: 0;
}

.recent-event-info h4 {
    color: #1e293b;
    margin: 0 0 0.375rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    word-wrap: break-word;
}

.recent-event-info p {
    color: #64748b;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 400;
}

.recent-event-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.recent-event-actions .btn-small {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    transition: all 0.2s ease;
}

.recent-event-actions .btn-small.btn-primary {
    background: #1e40af;
    color: #ffffff;
}

.recent-event-actions .btn-small.btn-primary:hover {
    background: #1e3a8a;
    transform: scale(1.05);
}

.recent-event-actions .btn-small.btn-secondary {
    background: #64748b;
    color: #ffffff;
}

.recent-event-actions .btn-small.btn-secondary:hover {
    background: #475569;
    transform: scale(1.05);
}

.recent-event-actions .btn-small i {
    font-size: 0.9rem;
}

/* Event Count Links */
.event-count-link {
    color: #1e40af;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.event-count-link:hover {
    color: #2563eb;
    background-color: rgba(30, 64, 175, 0.1);
    text-decoration: underline;
}

.event-count-zero {
    color: #a0aec0;
    font-weight: 400;
}

/* ============================================
   RESPONSIVE DESIGN - COMPREHENSIVE
   ============================================ */

/* Large Tablets and Small Desktops (1024px and below) */
@media (max-width: 1024px) {
    .admin-sidebar {
        width: 280px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .admin-sidebar.collapsed {
        width: 70px;
    }

    .admin-sidebar:not(.collapsed) .logo-text,
    .admin-sidebar:not(.collapsed) .link-text {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        width: auto !important;
    }
    
    .admin-sidebar.collapsed .logo-text,
    .admin-sidebar.collapsed .link-text {
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
    }

    .admin-sidebar .submenu-arrow {
        opacity: 1;
        visibility: visible;
    }

    .admin-main {
        margin-left: 280px;
        width: calc(100% - 280px);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .admin-main.sidebar-collapsed {
        margin-left: 70px;
        width: calc(100% - 70px);
    }

    .sidebar-toggle {
        display: block;
    }

    /* Ensure proper spacing on tablets */
    .nav-menu {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .nav-item:not(.logout-item) {
        margin: 0;
        padding: 0;
    }

    .nav-link {
        height: 48px;
    }
}

/* Tablet responsive styles for login */
@media (max-width: 968px) and (min-width: 481px) {
    .login-card {
        padding: 3rem 2.5rem;
        max-width: 420px;
    }
    
    .decoration-circle {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .admin-login-container {
        padding: 1.5rem;
    }
    
    .login-card {
        padding: 2.5rem 2rem;
        max-width: 100%;
        margin: 0;
    }
    
    .login-header h1 {
        font-size: 2rem;
    }
    
    .logo-wrapper {
        width: 75px;
        height: 75px;
    }
    
    .logo-wrapper i {
        font-size: 2.25rem;
    }
    
    .admin-sidebar {
        width: 280px !important; /* Default to expanded on mobile to show nav links */
        transform: translateX(0);
        position: fixed;
        z-index: 1000;
    }
    
    /* Ensure nav links are always visible on mobile */
    .admin-sidebar .nav-link,
    .admin-sidebar .sidebar-nav .nav-link,
    .admin-sidebar .nav-menu .nav-link,
    .admin-sidebar .nav-item .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    
    .admin-sidebar .nav-link .link-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .admin-sidebar.collapsed {
        width: 70px;
    }

    /* Always show nav links on mobile - override collapsed styles */
    .admin-sidebar .logo-text,
    .admin-sidebar .link-text {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }
    
    /* Ensure nav links are always visible and clickable on mobile */
    .admin-sidebar .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
        user-select: none;
        -webkit-user-select: none;
        justify-content: flex-start !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        margin-right: 1rem !important;
        width: calc(100% - 1rem) !important;
        transform: none !important;
    }
    
    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .admin-sidebar .nav-link .link-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
    
    .admin-sidebar .nav-link i {
        width: 22px;
        min-width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        text-align: center;
        vertical-align: middle;
    }

    .admin-main {
        margin-left: 70px;
        width: calc(100% - 70px);
        padding: 1rem;
        min-height: 100vh;
        background: #f8fafc;
    }

    .admin-main.sidebar-collapsed {
        margin-left: 70px;
        width: calc(100% - 70px);
    }
    
    .sidebar-toggle-btn {
        right: -12px;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 0.7rem;
    }

    /* Hide old mobile nav toggle - using hamburger-menu-btn instead */
    .mobile-nav-toggle.hamburger-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .mobile-nav-toggle.active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .sidebar-toggle {
        display: flex !important;
    }
    
    /* On mobile, show toggle only when sidebar is open */
    .admin-sidebar:not(.mobile-open) .sidebar-toggle {
        display: none !important;
    }
    
    /* When sidebar is open on mobile, show the toggle */
    .admin-sidebar.mobile-open .sidebar-toggle {
        display: flex !important;
    }

    /* Hide old mobile overlay - using sidebar-overlay instead */
    .mobile-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide old mobile nav toggle - using hamburger-menu-btn instead */
    .mobile-nav-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Mobile-specific spacing */
    .nav-menu {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .nav-item:not(.logout-item) {
        margin: 0;
        padding: 0;
    }

    .nav-link {
        height: 48px;
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 0.875rem;
    }

    .submenu-link {
        height: 40px;
        padding-left: 2.5rem;
        padding-right: 1rem;
        gap: 0.875rem;
    }

    .section-header {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }

    .header-actions {
        width: 100%;
        justify-content: start;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-charts {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .chart-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .chart-container:first-child {
        grid-column: 1 !important;
        order: 1 !important;
    }
    
    .chart-container:last-child {
        grid-column: 1 !important;
        order: 2 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .quick-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .quick-actions .btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    .analytics-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    

    .chart-card {
        min-height: 350px;
        padding: 1.5rem;
    }

    .chart-card .chart-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .chart-wrapper {
        min-height: 250px;
    }

    .chart-empty-state {
        min-height: 250px;
    }

    .chart-empty-state i {
        font-size: 2.5rem;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .filters,
    .feedback-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: auto;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .templates-grid {
        grid-template-columns: 1fr;
    }
    
    /* User Menu Responsive */
    .header-content {
        padding: 1rem 1.5rem;
    }
    
    .user-profile-area {
        padding: 0.5rem 0.75rem;
    }
    
    .user-info {
        display: none;
    }
    
    .user-menu-dropdown {
        right: 0;
        left: auto;
        min-width: 240px;
    }
    
    .user-menu-header {
        padding: 1rem 1.25rem;
    }
    
    .user-avatar-large {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Table Responsive - Horizontal Scroll */
    .table-responsive-wrapper {
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .admin-table {
        font-size: 0.8rem;
        min-width: auto !important;
        width: 100% !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.5rem;
    }

    .admin-table .description-cell {
        max-width: 120px;
        min-width: 100px;
        font-size: 0.75rem;
    }

    .admin-table .description-cell:hover {
        max-width: 200px;
    }

    .admin-table th i {
        display: none;
    }
    
    /* Action buttons stack on mobile */
    .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .faculty-details {
        grid-template-columns: 1fr;
    }

    .large-modal .modal-content {
        max-width: 95%;
        width: 95%;
    }
}

@media (max-width: 1024px) {
    .admin-table {
        min-width: 1000px;
    }

    .admin-table .description-cell {
        max-width: 200px;
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 2rem 1.5rem;
        max-width: 100%;
        margin: 1rem;
    }
    
    .login-header h1 {
        font-size: 1.75rem;
    }

    .admin-table {
        min-width: 900px;
        font-size: 0.75rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.4rem;
    }

    .admin-table .description-cell {
        max-width: 100px;
        min-width: 80px;
        font-size: 0.7rem;
    }

    .admin-table th i {
        display: none;
    }
    
    /* User Menu Responsive */
    .header-content {
        padding: 0.75rem 1rem;
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .header-calendar-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }
    
    .header-calendar-btn i {
        font-size: 1.15rem;
    }
    
    .user-profile-area {
        padding: 0.4rem 0.6rem;
    }
    
    .user-info {
        display: none;
    }
    
    .user-menu-dropdown {
        min-width: 220px;
        right: 0;
    }
    
    .user-menu-header {
        padding: 1rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .user-avatar-large {
        width: 48px;
        height: 48px;
    }
    
    .user-menu-info {
        align-items: center;
        text-align: center;
    }
    
    /* Event Modal Responsive */
    /* Create Event Modal - Mobile Responsive */
    .event-modal-content {
        width: 98% !important;
        max-width: 98% !important;
        max-height: 98vh !important;
        margin: 1% auto !important;
        border-radius: 16px !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
    
    .modal-header {
        padding: 1rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .modal-header h2 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
    }
    
    .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.25rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
        max-height: calc(98vh - 140px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .form-section {
        margin-bottom: 1.5rem !important;
        padding: 1rem !important;
        background: #f8fafc !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    .section-title {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin-bottom: 1rem !important;
        color: #1e40af !important;
    }
    
    .section-title i {
        font-size: 0.9rem !important;
        margin-right: 0.5rem !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-group label {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }
    
    .radio-group {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .radio-label {
        min-width: 100% !important;
        padding: 0.875rem 1rem !important;
        width: 100% !important;
    }
    
    .file-upload-label {
        min-height: 120px !important;
        padding: 1.5rem 1rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .file-upload-label i {
        font-size: 2rem !important;
    }
    
    .file-upload-text {
        font-size: 0.9rem !important;
    }
    
    .file-upload-hint {
        font-size: 0.8rem !important;
    }
    
    .modal-footer {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        border-top: 1px solid #e2e8f0 !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #ffffff !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
        justify-content: center !important;
    }
    
    .helper-text {
        font-size: 0.75rem !important;
        margin-top: 0.375rem !important;
    }
    
    .logo-wrapper {
        width: 70px;
        height: 70px;
    }
    
    .logo-wrapper i {
        font-size: 2rem;
    }
    
    .decoration-circle {
        display: none;
    }
    
    .login-form input {
        padding: 0.9rem 0.9rem 0.9rem 2.75rem;
        font-size: 0.95rem;
    }
    
    .login-submit-btn {
        padding: 1rem;
        font-size: 1rem;
    }

    .admin-main {
        padding: 0.5rem;
    }

    .section-header h1 {
        font-size: 1.5rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .chart-container,
    .settings-card {
        padding: 1rem;
    }
    
    /* Mobile Responsive Tabs */
    .attendees-tabs,
    .events-tabs,
    .admin-tabs,
    .notification-tabs {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .attendees-tabs::-webkit-scrollbar,
    .events-tabs::-webkit-scrollbar,
    .admin-tabs::-webkit-scrollbar,
    .notification-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
        min-width: fit-content;
        white-space: nowrap;
    }
    
    .tab-btn i {
        font-size: 0.9rem;
    }
    
    /* Mobile Responsive Filters */
    .filters,
    .feedback-filters {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem;
    }
    
    .filter-group {
        min-width: 100%;
    }
    
    .filter-group label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    .filter-group select,
    .filter-group input {
        padding: 0.75rem;
        font-size: 0.9rem;
        height: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
    
    .search-input {
        padding-left: 2.5rem;
        height: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
    
    .filter-group .search-input-wrapper::after {
        left: 0.875rem;
    }
}

/* Search and Filter Bar */
.search-filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
}

.search-box input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

.search-box input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group select {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    min-width: 150px;
    transition: all 0.2s ease;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

.filter-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Export buttons - always visible */
.export-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    opacity: 1 !important;
    visibility: visible !important;
}

.export-btn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.export-btn i {
    font-size: 12px;
}

.actions-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    gap: 0.5rem;
}

.faculty-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 12px;
    color: #64748b;
}

.stat-item i {
    font-size: 10px;
}

/* Attendee Events Page Styles */
.events-table-container {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.loading-indicator {
    padding: 3rem;
    text-align: center;
}

.loading-indicator i {
    font-size: 2rem;
    color: #1e40af;
    animation: spin 1s linear infinite;
}

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

.error-message {
    padding: 1.5rem;
    background: #fee;
    border-left: 4px solid #c33;
    border-radius: 8px;
    color: #c33;
    margin: 2rem 0;
}

.error-message i {
    margin-right: 0.5rem;
}

.section-subtitle {
    color: #718096;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.event-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0;
}

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

.detail-item label {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive styles for attendee events page */
@media (max-width: 968px) {
    .events-table-container {
        padding: 1rem;
    }
    
    .event-details-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #eventsTable {
        font-size: 0.85rem;
    }
    
    #eventsTable th,
    #eventsTable td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .actions-container {
        flex-direction: column;
        width: 100%;
    }
    
    .actions-container .btn {
        width: 100%;
    }
    
    #eventsTable {
        min-width: 1400px;
    }
}

/* Mobile responsive for search bar */
@media (max-width: 768px) {
    .search-filter-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .search-box {
        min-width: 100%;
    }

    .filter-group {
        justify-content: space-between;
    }

    .filter-group select {
        min-width: 120px;
    }

    .header-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Enhanced Table Responsive Containers */
.events-table-container,
.attendees-table-container,
.admin-table-container,
.faculty-table-container,
.certificates-table-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin-top: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: white;
    padding: 0;
}

.events-table-container::-webkit-scrollbar,
.attendees-table-container::-webkit-scrollbar,
.admin-table-container::-webkit-scrollbar,
.faculty-table-container::-webkit-scrollbar,
.certificates-table-container::-webkit-scrollbar {
    height: 10px;
}

.events-table-container::-webkit-scrollbar-track,
.attendees-table-container::-webkit-scrollbar-track,
.admin-table-container::-webkit-scrollbar-track,
.faculty-table-container::-webkit-scrollbar-track,
.certificates-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
    margin: 0 10px;
}

.events-table-container::-webkit-scrollbar-thumb,
.attendees-table-container::-webkit-scrollbar-thumb,
.admin-table-container::-webkit-scrollbar-thumb,
.faculty-table-container::-webkit-scrollbar-thumb,
.certificates-table-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.events-table-container::-webkit-scrollbar-thumb:hover,
.attendees-table-container::-webkit-scrollbar-thumb:hover,
.admin-table-container::-webkit-scrollbar-thumb:hover,
.faculty-table-container::-webkit-scrollbar-thumb:hover,
.certificates-table-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Medium Tablets (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .admin-section {
        padding: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.25rem;
        min-height: 95px;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        font-size: 1.25rem;
    }
    
    .stat-content h3 {
        font-size: 1.75rem;
    }
    
    .stat-content p {
        font-size: 0.85rem;
    }
    
    .dashboard-charts {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .chart-container {
        padding: 1.5rem;
    }
    
    .recent-event {
        flex-wrap: wrap;
    }
    
    .recent-event-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
    
    .filters {
        gap: 1.5rem;
    }
    
    .filter-group {
        min-width: 180px;
    }
    
    .section-header {
        flex-wrap: wrap;
    }
    
.header-actions {
    margin-top: 1rem;
}

    /* Send Certificate Modal Responsive - Tablet */
    #createCertificateModal .modal-content,
    #sendCertificateModal .modal-content {
        width: 90% !important;
        max-width: 700px !important;
        margin: 3% auto !important;
        max-height: 92vh !important;
    }
    
    #createCertificateModal .modal-body,
    #sendCertificateModal .modal-body {
        padding: 1.75rem !important;
        padding-bottom: 4rem !important;
        max-height: calc(92vh - 180px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex: 1 !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .certificate-form .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.25rem !important;
    }
    
    .recipient-options {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .radio-option,
    .checkbox-option {
        padding: 0.625rem !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    
    .radio-option input[type="radio"],
    .checkbox-option input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }

/* In certificate modals, ensure Choices dropdown sits above radio inputs */
#createCertificateModal .radio-option input[type="radio"],
#sendCertificateModal .radio-option input[type="radio"] {
    z-index: 1 !important;
}

#createCertificateModal .choices__list--dropdown,
#sendCertificateModal .choices__list--dropdown {
    z-index: 9999 !important;
}

/* Hide any radio inputs rendered inside Choices dropdown lists in certificate modals */
#createCertificateModal .choices__list--dropdown input[type="radio"],
#sendCertificateModal .choices__list--dropdown input[type="radio"] {
    display: none !important;
}
    
    .certificate-form select,
    .certificate-form input[type="text"],
    .certificate-form input[type="email"],
    .certificate-form input[type="date"],
    .certificate-form textarea {
        font-size: 15px !important;
        padding: 0.75rem !important;
        min-height: 44px !important;
    }
    
    .form-actions {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .form-actions .btn {
        width: auto !important;
        min-width: 150px !important;
        min-height: 44px !important;
    }
}

/* Ensure Choices.js dropdowns in certificate modals fully cover elements below */
#createCertificateModal .choices,
#sendCertificateModal .choices {
    position: relative;
    z-index: 5;
}

#createCertificateModal .choices__inner,
#sendCertificateModal .choices__inner {
    background-color: #ffffff;
}

#createCertificateModal .choices__list--dropdown,
#sendCertificateModal .choices__list--dropdown {
    z-index: 9999;
    background-color: #ffffff;
}

/* (Removed z-index hack on recipient sections so they remain visible
   when dropdown is closed; Choices dropdown already has high z-index) */

/* Small Tablets and Large Phones (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .admin-section {
        padding: 1.25rem;
    }
    
    .section-header h1 {
        font-size: 1.75rem;
    }
    
    .stat-card {
        padding: 1.25rem;
    }
    
    .stat-card h3 {
        font-size: 1.75rem;
    }
    
    .filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .filter-group {
        flex: 1;
        min-width: calc(50% - 0.5rem);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Better button spacing */
    .btn {
        min-height: 44px; /* Better touch target */
        padding: 0.75rem 1.25rem;
    }
    
    .action-buttons {
        gap: 0.5rem;
    }
    
    .action-buttons .btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Send Certificate Modal Responsive */
    #createCertificateModal .modal-content,
    #sendCertificateModal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 2% auto !important;
        max-height: 95vh !important;
    }
    
    #createCertificateModal .modal-body,
    #sendCertificateModal .modal-body {
        padding: 1.5rem !important;
        padding-bottom: 4rem !important;
        max-height: calc(95vh - 150px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex: 1 !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .certificate-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .recipient-options {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .radio-option,
    .checkbox-option {
        padding: 0.75rem !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2) !important;
    }
    
    .radio-option input[type="radio"],
    .checkbox-option input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10 !important;
        position: relative !important;
    }
    
    .certificate-form select,
    .certificate-form input[type="text"],
    .certificate-form input[type="email"],
    .certificate-form input[type="date"],
    .certificate-form textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        min-height: 44px !important;
    }
    
    .certificate-form select[multiple] {
        min-height: 150px !important;
    }
    
    .form-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .form-actions .btn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* Small Phones (320px - 480px) */
@media (max-width: 480px) {
    /* Enhanced touch targets */
    .btn,
    .nav-link,
    .tab-btn,
    .user-menu-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Create Event Modal - Small Mobile */
    .event-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100vh !important;
    }
    
    .modal-header {
        padding: 1rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #ffffff !important;
    }
    
    /* Send Certificate Modal - Small Mobile */
    #createCertificateModal .modal-content,
    #sendCertificateModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100vh !important;
    }
    
    #createCertificateModal .modal-body,
    #sendCertificateModal .modal-body {
        padding: 1rem !important;
        padding-bottom: 4rem !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex: 1 !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .certificate-form .form-group {
        margin-bottom: 1rem !important;
    }
    
    .certificate-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .recipient-options {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .radio-option,
    .checkbox-option {
        padding: 0.875rem !important;
        min-height: 48px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(30, 64, 175, 0.2) !important;
        user-select: none !important;
    }
    
    .radio-option input[type="radio"],
    .checkbox-option input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10 !important;
        position: relative !important;
        margin-right: 0.5rem !important;
    }
    
    .certificate-form select,
    .certificate-form input[type="text"],
    .certificate-form input[type="email"],
    .certificate-form input[type="date"],
    .certificate-form textarea {
        font-size: 16px !important;
        padding: 0.875rem !important;
        min-height: 48px !important;
        width: 100% !important;
    }
    
    .certificate-form select[multiple] {
        min-height: 120px !important;
        font-size: 14px !important;
    }
    
    .form-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: 1.5rem !important;
    }
    
    .form-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    .modal-header h2 {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 1rem 0.75rem !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    .form-section {
        margin-bottom: 1.25rem !important;
        padding: 0.875rem !important;
    }
    
    .section-title {
        font-size: 0.875rem !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.7rem !important;
        font-size: 0.875rem !important;
    }
    
    .file-upload-label {
        min-height: 100px !important;
        padding: 1rem 0.75rem !important;
    }
    
    .modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        padding: 0.875rem !important;
    }
    
    /* Better spacing */
    .admin-section {
        padding: 1rem 0.75rem;
    }
    
    /* Certificate Management Mobile Responsive */
    .certificate-tabs {
        flex-direction: column !important;
        gap: 0.5rem !important;
        border-bottom: none !important;
        margin-bottom: 1rem !important;
    }
    
    .certificate-tabs .tab-btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .certificate-tabs .tab-btn.active {
        background: #1e40af !important;
        color: white !important;
    }
    
    .certificate-content {
        padding: 1rem !important;
        border-radius: 10px !important;
    }
    
    /* Template Type Selector - Mobile */
    .template-type-selector {
        padding: 0.75rem !important;
    }
    
    .template-type-options {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .template-type-options label {
        width: 100% !important;
        padding: 0.75rem !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
    }
    
    /* Upload Area - Mobile */
    .upload-area {
        padding: 1.5rem 1rem !important;
    }
    
    .upload-area i {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .upload-area h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .upload-area p {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
    
    .upload-area .btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* HTML Template Textarea - Mobile */
    #htmlTemplateContent {
        min-height: 250px !important;
        font-size: 0.8rem !important;
        padding: 0.75rem !important;
    }
    
    /* Placeholder List - Mobile */
    .upload-area > div:last-of-type {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .upload-area > div:last-of-type ul {
        margin-left: 1rem !important;
        padding-left: 0.5rem !important;
    }
    
    .upload-area > div:last-of-type li {
        margin-bottom: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Buttons Container - Mobile */
    .html-template-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .html-template-buttons .btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Template List - Mobile */
    .template-list h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .template-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1rem !important;
    }
    
    .template-preview {
        width: 50px !important;
        height: 50px !important;
        margin-right: 0 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .template-info {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    .template-info h4 {
        font-size: 1rem !important;
    }
    
    .template-info p {
        font-size: 0.85rem !important;
    }
    
    .template-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        padding-top: 0.75rem !important;
    }
    
    .template-actions .btn {
        flex: 1 !important;
        min-width: auto !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Certificate Requests Table - Mobile */
    .certificates-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .certificates-table-container table {
        min-width: auto !important;
        width: 100% !important;
        font-size: 0.85rem !important;
    }
    
    .certificates-table-container th,
    .certificates-table-container td {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Modal - Mobile */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
        max-height: 90vh !important;
    }
    
    .event-modal-content {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .modal-header h2 {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 1rem 0.75rem !important;
        max-height: calc(90vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: 0.75rem !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* HTML Preview Modal - Mobile */
    #htmlTemplatePreviewModal .modal-content {
        max-width: 98% !important;
        max-height: 95vh !important;
    }
    
    #htmlTemplatePreviewContent {
        min-height: 300px !important;
        padding: 0.5rem !important;
    }
    
    /* Template Upload Form - Mobile */
    #templateUploadForm .form-group {
        margin-bottom: 1rem !important;
    }
    
    #templateUploadForm label {
        font-size: 0.9rem !important;
    }
    
    #templateUploadForm input,
    #templateUploadForm textarea {
        font-size: 0.9rem !important;
        padding: 0.75rem !important;
    }
    
    /* Template List Header - Mobile */
    .template-list > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .template-list > div:first-child h3 {
        margin-bottom: 0 !important;
    }
    
    .template-list > div:first-child .btn {
        width: 100% !important;
    }
    
    /* Template Preview Modal - Mobile & Tablet */
    /* Template Preview Modal - Mobile & Tablet */
    .template-preview-modal {
        max-width: 98% !important;
        max-height: 98vh !important;
        width: 98% !important;
        height: 98vh !important;
        margin: 1vh auto !important;
    }
    
    .template-preview-modal .modal-header {
        padding: 0.75rem !important;
        position: relative !important;
    }
    
    .template-preview-modal .modal-header h2 {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        padding-right: 2.5rem !important;
        word-break: break-word !important;
    }
    
    .template-preview-modal .modal-close {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        z-index: 10 !important;
    }
    
    .template-preview-modal .modal-body {
        padding: 0 !important;
        height: calc(98vh - 100px) !important;
        min-height: calc(98vh - 100px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .template-preview-modal .modal-body iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    
    .template-preview-modal .modal-body img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    .template-preview-modal .modal-footer {
        padding: 0.75rem !important;
    }
    
    .template-preview-modal .modal-footer .btn {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Tablet specific adjustments */
    @media (min-width: 768px) and (max-width: 1024px) {
        .template-preview-modal {
            max-width: 96% !important;
            width: 96% !important;
        }
        
        .template-preview-modal .modal-header h2 {
            font-size: 1rem !important;
        }
    }
    
    .section-header {
        padding: 1rem 0;
    }
    
    .section-header h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    /* Compact filters */
    .filters {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .filter-group {
        min-width: 100%;
    }
    
    /* Better table containers */
    .events-table-container,
    .attendees-table-container,
    .admin-table-container,
    .faculty-table-container,
    .certificates-table-container {
        margin: 1rem -0.75rem;
        border-radius: 0;
        box-shadow: none;
    }
    
    .admin-table {
        font-size: 0.7rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.5rem 0.4rem;
    }
    
    /* Event menu dropdown - adjust position on mobile */
    .event-menu-dropdown {
        right: 0;
        left: auto;
        min-width: 160px;
    }
    
    .event-menu-item {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Compact cards */
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card h3 {
        font-size: 1.5rem;
    }
    
    .stat-card p {
        font-size: 0.85rem;
    }
    
    /* Modal improvements */
    .modal-content {
        width: 98%;
        margin: 1% auto;
        max-height: 98vh;
        border-radius: 12px;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
    
    .modal-header h2 {
        font-size: 1.25rem;
    }
    
    /* Form improvements */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    textarea.form-control {
        min-height: 120px;
    }
    
    /* Better feedback items */
    .feedback-item {
        padding: 1rem;
    }
    
    .feedback-actions {
        flex-direction: column;
    }
    
    .feedback-actions .btn {
        width: 100%;
    }
}

/* Extra Small Phones (below 360px) */
@media (max-width: 360px) {
    .admin-section {
        padding: 0.75rem 0.5rem;
    }
    
    .section-header h1 {
        font-size: 1.25rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    .stat-card h3 {
        font-size: 1.25rem;
    }
    
    .admin-table {
        font-size: 0.65rem;
        min-width: auto !important;
        width: 100% !important;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.4rem 0.3rem;
    }
    
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .modal-content {
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
}

/* Landscape Orientation for Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .admin-sidebar {
        width: 70%;
        max-width: 280px;
    }
    
    .modal-content {
        max-height: 95vh;
    }
    
    .modal-body {
        max-height: calc(95vh - 150px);
    }
}

/* Print Styles */
@media print {
    .admin-sidebar,
    .mobile-nav-toggle,
    .mobile-overlay,
    .header-actions,
    .action-buttons,
    .filters {
        display: none !important;
    }
    
    .admin-main {
        margin-left: 0;
        width: 100%;
    }
    
    .admin-table {
        min-width: auto;
        font-size: 0.8rem;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .admin-table th,
    .admin-table td {
        border-width: 0.5px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Can be implemented later if needed */
}

/* Checkbox Label Styles */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2563eb;
    flex-shrink: 0;
    min-width: 18px;
    min-height: 18px;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.checkbox-label input[type="checkbox"]:hover {
    border-color: #2563eb;
}

.checkbox-label input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.checkbox-label span {
    font-size: 0.9rem;
    color: #4a5568;
}

.form-help {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #718096;
    line-height: 1.4;
}

/* Recipient Search Input */
.recipient-search-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}

.recipient-search-input {
    width: 100%;
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #ffffff;
    color: #2d3748;
    box-sizing: border-box;
}

.recipient-search-input:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.recipient-search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.875rem;
    pointer-events: none;
}

.recipient-count-display {
    font-size: 0.85rem;
    color: #718096;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Multi-select with search (standard design) */
.multi-select-search-wrapper {
    position: relative;
    margin-bottom: 0;
}

.multi-select-search-wrapper .multi-select-search-input {
    width: 100%;
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #ffffff;
    color: #2d3748;
    box-sizing: border-box;
}

.multi-select-search-wrapper .multi-select-search-input:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.multi-select-search-wrapper .multi-select-search-icon {
    position: absolute;
    right: 1rem;
    top: 1.25rem;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.875rem;
    pointer-events: none;
}

/* Notification Center Styles */

/* Notification Inbox */
.notification-inbox {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.inbox-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.inbox-filters {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.filter-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.notification-list {
    max-height: 600px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s;
    cursor: pointer;
}

.notification-item:hover {
    background: #f8fafc;
}

.notification-item.unread {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

.notification-item.read {
    opacity: 0.8;
}

.notification-item-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon i {
    font-size: 1.125rem;
}

.notification-details {
    flex: 1;
    min-width: 0;
}

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

.notification-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    flex: 1;
}

.notification-time {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

.notification-message {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0;
    line-height: 1.5;
}

.notification-event {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6366f1;
    margin-top: 0.25rem;
}

.notification-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

.btn-icon {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: #f1f5f9;
    color: #3b82f6;
}

.btn-icon-danger:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Notification History */
.history-card-title {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.notification-type-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-type-badge.type-info {
    background: #dbeafe;
    color: #3b82f6;
}

.notification-type-badge.type-success {
    background: #d1fae5;
    color: #10b981;
}

.notification-type-badge.type-warning {
    background: #fef3c7;
    color: #f59e0b;
}

.notification-type-badge.type-error {
    background: #fee2e2;
    color: #ef4444;
}

.notification-type-badge.type-announcement {
    background: #ede9fe;
    color: #8b5cf6;
}

.notification-type-badge.type-reminder {
    background: #cffafe;
    color: #06b6d4;
}

.notification-type-badge.type-certificate {
    background: #fce7f3;
    color: #ec4899;
}

.notification-type-badge.type-event {
    background: #e0e7ff;
    color: #6366f1;
}

.history-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.unread-indicator {
    color: #ef4444;
    font-weight: 500;
}

/* Notification Form Enhancements */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.checkbox-option:hover {
    background: #f8fafc;
}

.checkbox-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.required {
    color: #ef4444;
}

/* Notification Detail Modal */
.notification-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

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

.detail-label {
    font-weight: 600;
    color: #475569;
    min-width: 100px;
}

.detail-value {
    flex: 1;
    color: #1e293b;
}

/* Responsive Notification Center */
@media (max-width: 768px) {
    .notification-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .notification-actions {
        margin-left: 0;
        margin-top: 0.75rem;
        justify-content: flex-end;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .history-card-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Mobile Responsive Checkboxes */
    .checkbox-label {
        padding: 0.75rem;
        min-height: 44px;
        gap: 0.75rem;
        align-items: center;
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
    }
    
    .checkbox-label input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.2);
        border: 2px solid #cbd5e0 !important;
        border-radius: 4px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-color: #ffffff !important;
        position: relative !important;
    }
    
    .checkbox-label input[type="checkbox"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 16px 16px !important;
    }
    
    .checkbox-label span {
        font-size: 0.95rem;
        line-height: 1.4;
        flex: 1;
    }
    
    .form-help {
        font-size: 0.875rem;
        margin-top: 0.5rem;
        padding-left: 0;
    }
    
}

/* ============================================
   RESPONSIVE NAVIGATION BAR - TABLETS & MOBILE
   ============================================ */

/* Ensure icons are always perfectly centered in all states */
.nav-link i,
.admin-sidebar.collapsed .nav-link i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Additional centering for collapsed state */
.admin-sidebar.collapsed .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Override the mobile hidden state - show sidebar when mobile-open */
    .admin-sidebar.mobile-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
        background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important;
    }
    
    .admin-sidebar {
        width: 280px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%) !important;
    }
    
    /* When sidebar is open on tablet, ensure ALL navlinks are visible */
    .admin-sidebar.mobile-open .sidebar-nav,
    .admin-sidebar.mobile-open .nav-menu,
    .admin-sidebar.mobile-open .nav-item,
    .admin-sidebar.mobile-open .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .admin-sidebar.mobile-open .nav-link i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .admin-sidebar.mobile-open .link-text,
    .admin-sidebar.mobile-open .logo-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .admin-sidebar.collapsed {
        width: 70px;
    }

    .admin-main {
        margin-left: 280px;
        width: calc(100% - 280px);
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .admin-main.sidebar-collapsed {
        margin-left: 70px;
        width: calc(100% - 70px);
    }

    /* Ensure icons remain centered in collapsed state on tablet */
    .admin-sidebar.collapsed .nav-link {
        justify-content: center;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    .admin-sidebar.collapsed .nav-link i {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ensure link text is visible when sidebar is NOT collapsed */
    .admin-sidebar:not(.collapsed) .link-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .admin-sidebar:not(.collapsed) .logo-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
    
    /* Ensure sidebar header shows logo and text when expanded */
    .admin-sidebar:not(.collapsed) .sidebar-logo {
        justify-content: flex-start !important;
    }
    
    .admin-sidebar:not(.collapsed) .sidebar-logo .logo-img {
        margin-right: 0.75rem !important;
    }
    
    /* When collapsed, center logo */
    .admin-sidebar.collapsed .sidebar-logo {
        justify-content: center !important;
    }
    
    .admin-sidebar.collapsed .sidebar-logo .logo-img {
        margin-right: 0 !important;
    }

    /* Sidebar toggle button adjustments for tablet */
    .sidebar-toggle-btn {
        right: -18px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* REMOVED: Duplicate @media (max-width: 1024px) block - consolidated into main responsive section below */

/* Medium Mobile Devices (414px - 480px) - iPhone 11 Pro Max, etc. */
@media (min-width: 414px) and (max-width: 480px) {
    /* Sidebar slides in/out on mobile */
    .admin-sidebar {
        width: 280px !important;
        transform: translateX(-100%);
    }
    
    .admin-sidebar.mobile-open {
        transform: translateX(0);
        width: 280px !important;
        max-width: 85vw !important;
        pointer-events: auto !important;
        z-index: 10000 !important;
    }
    
    /* Ensure nav links are clickable when sidebar is open */
    .admin-sidebar.mobile-open .nav-link,
    .admin-sidebar.mobile-open a.nav-link {
        z-index: 10001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        touch-action: manipulation !important;
    }
    
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Main content stays full width when sidebar is open (overlay handles the dimming) */
    .admin-main:not(.sidebar-collapsed) {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* FORCE visibility of all navigation elements */
    .admin-sidebar .sidebar-nav,
    .admin-sidebar .nav-menu,
    .admin-sidebar .nav-item,
    .admin-sidebar .nav-link,
    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Nav links - always visible and clickable */
    .admin-sidebar .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        height: 56px !important;
        min-height: 56px !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    
    /* When collapsed - center icons */
    .admin-sidebar.collapsed .nav-link {
        justify-content: center !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* When expanded - show icons and text */
    .admin-sidebar:not(.collapsed) .nav-link {
        justify-content: flex-start !important;
        align-items: center !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: calc(100% - 1rem) !important;
    }
    
    /* Icons - always visible and centered */
    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    
    .admin-sidebar.collapsed .nav-link i {
        margin: 0 auto !important;
        font-size: 1.2rem !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
    }
    
    .admin-sidebar:not(.collapsed) .nav-link i {
        margin: 0 !important;
        margin-right: 0.875rem !important;
        font-size: 1.1rem !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
    }
    
    /* Toggle button - always visible */
    .sidebar-toggle-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1003 !important;
    }
}

/* Small Mobile Devices (below 480px) */
@media (max-width: 480px) {
    /* Icon-only sidebar by default */
    .admin-sidebar {
        width: 70px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    /* Expanded state */
    .admin-sidebar.mobile-open {
        width: 280px !important;
        max-width: 85vw !important;
    }

    .admin-main {
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .admin-sidebar.mobile-open ~ .admin-main {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
    }

    /* FORCE visibility of all navigation elements */
    .admin-sidebar .sidebar-nav,
    .admin-sidebar .nav-menu,
    .admin-sidebar .nav-item,
    .admin-sidebar .nav-link,
    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .admin-sidebar .nav-link {
        height: 56px !important;
        min-height: 56px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    
    .admin-sidebar.collapsed .nav-link {
        justify-content: center !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    .admin-sidebar:not(.collapsed) .nav-link {
        justify-content: flex-start !important;
        align-items: center !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: calc(100% - 1rem) !important;
    }

    .admin-sidebar .nav-link i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 1.2rem !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
    }
    
    .admin-sidebar.collapsed .nav-link i {
        margin: 0 auto !important;
    }
    
    .admin-sidebar:not(.collapsed) .nav-link i {
        margin: 0 !important;
        margin-right: 0.875rem !important;
        font-size: 1.1rem !important;
    }

    .sidebar-header {
        padding: 0.75rem 0.25rem;
    }

    .sidebar-nav {
        padding: 0.75rem 0;
    }

    .nav-menu {
        gap: 0.2rem;
        padding: 0.4rem 0;
    }
    
    .sidebar-toggle-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1003 !important;
    }
}

/* Extra Small Devices (below 360px) */
@media (max-width: 360px) {
    /* Icon-only sidebar on very small screens */
    .admin-sidebar {
        width: 60px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .admin-sidebar.mobile-open {
        width: 260px !important;
        max-width: 90vw !important;
    }
    
    .admin-main {
        margin-left: 60px !important;
        width: calc(100% - 60px) !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .admin-sidebar.mobile-open ~ .admin-main {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
    }

    .admin-sidebar .nav-link {
        height: 48px;
        min-height: 48px;
    }

    .admin-sidebar .nav-link i {
        font-size: 1rem;
        width: 20px;
        min-width: 20px;
        height: 20px;
    }
}

/* Landscape Orientation on Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    /* Icon-only sidebar in landscape */
    .admin-sidebar {
        width: 70px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .admin-sidebar.mobile-open {
        width: 240px !important;
    }

    .admin-sidebar .nav-link {
        height: 48px;
        min-height: 48px;
    }

    .sidebar-header {
        padding: 0.75rem 0;
    }

    .sidebar-nav {
        padding: 0.75rem 0;
    }
    
    .admin-main {
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .admin-sidebar.mobile-open ~ .admin-main {
        margin-left: 240px !important;
        width: calc(100% - 240px) !important;
    }

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   Maintains existing design while ensuring
   full mobile/tablet compatibility
   ============================================ */

/* Tablet and Below (1024px and below) */
@media (max-width: 1024px) {
    /* Top Header Improvements - left aligned */
    .admin-top-header {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .header-content {
        flex-wrap: wrap;
        gap: 1rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .user-info {
        display: none; /* Hide user info text on tablet, show only avatar */
    }
    
    .user-profile-area {
        padding: 0.5rem;
    }
    
    /* Admin sections - left aligned */
    .admin-section {
        padding: 1.5rem 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Section Headers - left aligned */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .section-header h1 {
        font-size: 1.75rem;
    }
    
    /* Header actions - left aligned */
    .header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .header-actions .btn {
        flex: 1;
        min-width: 120px;
    }
    
    /* Filters - left aligned */
    .filters,
    .feedback-filters {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Stats Grid - Small Mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .stat-card {
        padding: 1rem !important;
        min-height: 90px !important;
    }
    
    .stat-icon {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        font-size: 1.1rem !important;
    }
    
    .stat-content h3 {
        font-size: 1.5rem !important;
    }
    
    .stat-content p {
        font-size: 0.8rem !important;
    }
    
    .stat-arrow {
        font-size: 1rem !important;
    }
    
    .dashboard-charts {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .chart-container {
        padding: 1.25rem !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .chart-container:first-child {
        grid-column: 1 !important;
        order: 1 !important;
    }
    
    .chart-container:last-child {
        grid-column: 1 !important;
        order: 2 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .quick-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .quick-actions .btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }
    
    .chart-container h3 {
        font-size: 1rem !important;
    }
    
    .recent-event {
        padding: 0.75rem !important;
    }
    
    .recent-event-info h4 {
        font-size: 0.875rem !important;
    }
    
    .recent-event-info p {
        font-size: 0.75rem !important;
    }
    
    .recent-event-actions {
        margin-top: 0.5rem !important;
    }
    
    .recent-event-actions .btn-small {
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* Dashboard Charts */
    .dashboard-charts {
        grid-template-columns: 1fr !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 1.5rem !important;
    }
    
    .chart-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .chart-container:first-child {
        grid-column: 1 !important;
        order: 1 !important;
    }
    
    .chart-container:last-child {
        grid-column: 1 !important;
        order: 2 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    .quick-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .quick-actions .btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        padding: 0.875rem 1.25rem !important;
    }
    
    .quick-actions .btn i {
        flex-shrink: 0 !important;
    }
    
    /* Filters */
    .filters {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .filter-group {
        flex: 1;
        min-width: calc(50% - 0.5rem);
    }
    
    /* Tabs - left aligned */
    .events-tabs,
    .admin-tabs,
    .notification-tabs {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Tables - Enhanced horizontal scroll, no negative margins */
    .table-responsive-wrapper,
    .events-table-container,
    .attendees-table-container,
    .admin-table-container,
    .faculty-table-container,
    .certificates-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative;
    }
    
    /* Add padding inside scrollable tables */
    .table-responsive-wrapper > table,
    .events-table-container > table,
    .attendees-table-container > table,
    .admin-table-container > table,
    .faculty-table-container > table,
    .certificates-table-container > table {
        margin: 0 1rem;
    }
    
    .admin-table {
        width: 100% !important;
        min-width: 900px !important;
        font-size: 0.9rem;
        table-layout: auto;
        border-collapse: collapse;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.75rem 0.5rem;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 200px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
    }
    
    /* Allow all cells to wrap and show full content */
    .admin-table .description-cell,
    .admin-table .event-desc-cell,
    .admin-table .speaker-desc-cell {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 180px !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    /* Form Improvements - left aligned */
    .form-grid,
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .form-row {
        gap: 1rem;
    }
    
    .form-group,
    .form-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Modal Improvements */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 2% auto;
    }
    
    .event-modal-content {
        max-width: 95%;
    }
    
    /* Cards - left aligned */
    .stat-card {
        padding: 1.5rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .stat-card h3 {
        font-size: 2rem;
    }
    
    /* Prevent horizontal overflow */
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* REMOVED: Duplicate @media (max-width: 768px) block - already covered in earlier responsive sections */

/* Small Mobile Devices (480px and below) */
@media (max-width: 480px) {
    /* Top Header */
    .admin-top-header {
        padding: 0.5rem 0.75rem;
    }
    
    .user-name,
    .user-role {
        display: none;
    }
    
    /* Main Content - consistent left padding */
    .admin-section {
        padding: 1rem 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Section content - consistent left padding */
    .admin-section .section-header,
    .admin-section .filters,
    .admin-section .events-tabs,
    .admin-section .admin-tabs,
    .admin-section .header-actions {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Table containers - consistent padding, no negative margins */
    .admin-section .events-table-container,
    .admin-section .attendees-table-container,
    .admin-section .admin-table-container,
    .admin-section .faculty-table-container,
    .admin-section .certificates-table-container,
    .admin-section .table-responsive-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Section Headers */
    .section-header {
        padding: 0.75rem 0;
        margin-bottom: 1rem;
    }
    
    .section-header h1 {
        font-size: 1.25rem;
    }
    
    /* Stats */
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card h3 {
        font-size: 1.5rem;
    }
    
    .stat-card p {
        font-size: 0.85rem;
    }
    
    /* Tables - Smaller Font */
    .admin-table {
        font-size: 0.75rem;
        min-width: 1000px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.5rem 0.3rem;
        font-size: 0.7rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Forms */
    .form-section {
        padding: 1rem 0.75rem;
    }
    
    .form-control,
    .form-select,
    textarea {
        padding: 0.7rem;
        font-size: 0.95rem;
    }
    
    /* Modals */
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.75rem;
    }
    
    .modal-header h2 {
        font-size: 1.1rem;
    }
    
    /* Tabs */
    .tab-btn {
        font-size: 0.85rem;
        padding: 0.6rem 0.4rem;
    }
    
    /* Event Cards in Grid */
    .events-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Export Buttons - Ensure full text visibility */
    .export-btn {
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    .export-btn i {
        margin-right: 0.5rem !important;
    }
    
    .modal-actions {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    
    .modal-actions .btn {
        width: 100%;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    
    /* Header Actions - Ensure buttons show full text */
    .header-actions {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    
    .header-actions .btn {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        min-width: fit-content !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Extra Small Devices (360px and below) */
@media (max-width: 360px) {
    .admin-section {
        padding: 0.75rem 0.5rem;
    }
    
    .section-header h1 {
        font-size: 1.1rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    .stat-card h3 {
        font-size: 1.25rem;
    }
    
    .admin-table {
        font-size: 0.7rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.4rem 0.25rem;
    }
    
    .btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 768px) {
    /* Event Menu Dropdown */
    .event-menu-dropdown {
        right: 0;
        left: auto;
        min-width: 180px;
        max-width: 90vw;
    }
    
    /* Profile Cards */
    .profile-card {
        padding: 1.25rem 1rem;
    }
    
    .profile-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* Recent Events */
    .recent-events {
        padding: 1rem;
    }
    
    .recent-event-item {
        padding: 1rem 0.75rem;
    }
    
    /* Form Sections */
    .form-section {
        margin-bottom: 1.5rem;
    }
    
    .section-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    /* Chart Wrappers */
    .chart-wrapper {
        min-height: 250px;
    }
    
    /* Activity Feed */
    .activity-item {
        padding: 1rem 0.75rem;
    }
    
    /* Certificate Cards */
    .certificate-card {
        padding: 1.25rem 1rem;
    }
    
    /* Notification Items */
    .notification-item {
        padding: 1rem 0.75rem;
    }
    
    /* Better spacing for stacked elements */
    .admin-section > * + * {
        margin-top: 1.5rem;
    }
}

/* Small Mobile - Additional Optimizations */
@media (max-width: 480px) {
    /* Compact spacing */
    .admin-section > * + * {
        margin-top: 1rem;
    }
    
    /* Smaller icons in buttons */
    .btn i {
        font-size: 0.9rem;
    }
    
    /* Compact form labels */
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    /* Better checkbox/radio spacing */
    .checkbox-label,
    .radio-label {
        padding: 0.75rem;
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    /* Enhanced mobile checkbox styles for small devices */
    .checkbox-label input[type="checkbox"] {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border: 2px solid #cbd5e0 !important;
        border-radius: 4px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-color: #ffffff !important;
    }
    
    .checkbox-label input[type="checkbox"]:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M3 9l4 4 8-8'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 18px 18px !important;
    }
    
    .checkbox-label span {
        font-size: 0.95rem;
    }
    
    /* Compact stat icons */
    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    /* Better modal scrolling */
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Compact tabs */
    .events-tabs .tab-btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.4rem;
    }
}

/* Landscape Orientation on Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 95vh;
    }
    
    .modal-body {
        max-height: calc(95vh - 120px);
        overflow-y: auto;
    }
    
    .admin-section {
        padding: 1rem;
    }
}

/* Print Styles */
@media print {
    .admin-sidebar,
    .mobile-nav-toggle,
    .sidebar-overlay,
    .hamburger-menu-btn,
    .header-actions,
    .action-buttons,
    .filters,
    .btn {
        display: none !important;
    }
    
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .admin-table {
        min-width: auto;
        font-size: 0.8rem;
    }
    
    .admin-section {
        padding: 0;
        page-break-inside: avoid;
    }
}

/* Universal Table Responsive Styles - Mobile First */
@media (max-width: 768px) {
    /* Ensure all table containers allow horizontal scrolling */
    .table-responsive-wrapper,
    .events-table-container,
    .admin-table-container,
    .certificates-table-container,
    .table-container,
    .attendees-table-container,
    .faculty-table-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        position: relative;
    }
    
    /* Add padding inside the scrollable area */
    .table-responsive-wrapper > table,
    .events-table-container > table,
    .admin-table-container > table,
    .certificates-table-container > table,
    .attendees-table-container > table,
    .faculty-table-container > table {
        margin: 0 1rem;
    }
    
    /* All tables should maintain minimum width for readability */
    .admin-table,
    .registered-attendees-table,
    table {
        min-width: 900px !important;
        width: 100% !important;
        font-size: 0.85rem;
        table-layout: auto;
        border-collapse: collapse;
    }
    
    .admin-table th,
    .admin-table td,
    .registered-attendees-table th,
    .registered-attendees-table td {
        padding: 0.75rem 0.5rem;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 200px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
        box-sizing: border-box;
    }
    
    /* All cells should wrap and show full content on mobile */
    .admin-table .description-cell,
    .admin-table .event-desc-cell,
    .admin-table .speaker-desc-cell,
    .admin-table td[style*="max-width"] {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 180px !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    /* Smaller font for mobile */
    .admin-table th {
        font-size: 0.8rem;
    }
    
    .admin-table td {
        font-size: 0.8rem;
    }
    
    /* Show scroll indicator */
    .events-table-container::after,
    .admin-table-container::after,
    .certificates-table-container::after {
        content: '← Swipe to see more →';
        display: block;
        text-align: center;
        padding: 0.5rem;
        color: #718096;
        font-size: 0.75rem;
        background: #f7fafc;
        border-top: 1px solid #e2e8f0;
    }
}

@media (max-width: 480px) {
    .table-responsive-wrapper,
    .events-table-container,
    .admin-table-container,
    .certificates-table-container,
    .table-container,
    .attendees-table-container,
    .faculty-table-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Add padding inside the scrollable area */
    .table-responsive-wrapper > table,
    .events-table-container > table,
    .admin-table-container > table,
    .certificates-table-container > table,
    .attendees-table-container > table,
    .faculty-table-container > table {
        margin: 0 0.75rem;
    }
    
    .admin-table,
    .registered-attendees-table,
    table {
        min-width: 800px !important;
        width: 100% !important;
        font-size: 0.75rem;
        table-layout: auto;
        border-collapse: collapse;
    }
    
    .admin-table th,
    .admin-table td,
    .registered-attendees-table th,
    .registered-attendees-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.7rem;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 150px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
        box-sizing: border-box;
    }
    
    /* All cells should wrap and show full content on small mobile */
    .admin-table .description-cell,
    .admin-table .event-desc-cell,
    .admin-table .speaker-desc-cell,
    .admin-table td[style*="max-width"] {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 130px !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Additional Mobile Fixes - Responsive Tables with Horizontal Scroll */
@media (max-width: 768px) {
    /* Ensure table containers allow horizontal scrolling */
    .table-responsive-wrapper,
    .events-table-container,
    .attendees-table-container,
    .admin-table-container,
    .faculty-table-container,
    .certificates-table-container {
        background: white !important;
        border-radius: 15px;
        padding: 0 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all table cells show full content with wrapping */
    .admin-table th,
    .admin-table td {
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        position: relative;
    }
    
    /* Prevent text from breaking out of table background */
    .admin-table {
        background: white !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        width: 100% !important;
    }
    
    /* Ensure table wrapper allows scrolling */
    .admin-table-wrapper,
    .table-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Style scrollbar for better UX */
    .events-table-container::-webkit-scrollbar,
    .admin-table-container::-webkit-scrollbar,
    .certificates-table-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .events-table-container::-webkit-scrollbar-track,
    .admin-table-container::-webkit-scrollbar-track,
    .certificates-table-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }
    
    .events-table-container::-webkit-scrollbar-thumb,
    .admin-table-container::-webkit-scrollbar-thumb,
    .certificates-table-container::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 10px;
    }
    
    .events-table-container::-webkit-scrollbar-thumb:hover,
    .admin-table-container::-webkit-scrollbar-thumb:hover,
    .certificates-table-container::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile - maintain horizontal scroll */
    .admin-table th,
    .admin-table td {
        font-size: 0.7rem !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    
    .admin-table .description-cell,
    .admin-table .event-desc-cell,
    .admin-table .speaker-desc-cell {
        font-size: 0.7rem !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}
}

/* Event Drafts */
.drafts-badge {
    background: #dc2626;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    margin-left: 0.35rem;
}
.drafts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.draft-item-info {
    flex: 1;
    min-width: 0;
}
.draft-item-title {
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.2rem 0;
}
.draft-item-date {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}
.draft-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.drafts-empty {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}
.drafts-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}
.drafts-empty p {
    margin: 0;
    font-size: 0.95rem;
}