body {
    background-color: #fcfcfd; 
    min-height: 100vh;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

* { box-sizing: border-box; }

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    gap: 20px;
    flex-wrap: wrap;
}

.header-welcome { flex: 1; min-width: 250px; }
.header-welcome h1 { margin: 0; font-size: 1.8rem; color: #101828; letter-spacing: -0.5px; }
.header-welcome p { color: #475467; margin: 8px 0 0 0; font-size: 1rem; }

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.actions-top-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-premium {
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-outline { background: #ffffff; color: #344054; border: 1px solid #d0d5dd; }
.btn-outline:hover { background: #f9fafb; border-color: #0f0518; color: #0f0518; }

.btn-solid { background: #0f0518; color: #ffffff; border: 1px solid #0f0518; }
.btn-solid:hover { background: #2b2b2b; }

.btn-icon-premium {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    color: #475467;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 0;
    position: relative;
}
.btn-icon-premium:hover { background: #f9fafb; border-color: #0f0518; color: #0f0518; }

.notification-container { position: relative; display: flex; align-items: center; }

.notify-badge {
    position: absolute; top: -5px; right: -5px;
    background: #d92d20; color: white;
    font-size: 0.7rem; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    border: 2px solid #ffffff;
}

.notify-dropdown {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 10px;
    width: 340px; background: #ffffff; border: 1px solid #eaecf0;
    border-radius: 16px; box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
    z-index: 100; overflow: hidden; flex-direction: column;
}

.notify-dropdown.show { display: flex; }

.notify-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #eaecf0; background: #fcfcfd;
}
.notify-header h3 { margin: 0; font-size: 0.95rem; color: #101828; }
.notify-header button { background: none; border: none; color: #635bff; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0; }
.notify-header button:hover { text-decoration: underline; }

.notify-list { max-height: 380px; overflow-y: auto; }
.notify-item { padding: 16px 20px; border-bottom: 1px solid #eaecf0; display: flex; gap: 12px; align-items: flex-start; transition: background 0.2s; }
.notify-item:hover { background: #fcfcfd; }
.notify-item:last-child { border-bottom: none; }
.notify-item.unread { background: #f4f3ff; }

.notify-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.notify-content { flex-grow: 1; }
.notify-title { font-weight: 600; color: #101828; font-size: 0.9rem; margin-bottom: 4px; }
.notify-text { font-size: 0.85rem; color: #475467; margin: 0 0 10px 0; line-height: 1.4; }
.notify-meta { font-size: 0.75rem; color: #98a2b3; display: flex; justify-content: space-between; align-items: center; }

.notify-action-btn { background: #ffffff; border: 1px solid #d0d5dd; padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; color: #344054; cursor: pointer; text-decoration: none; }
.notify-action-btn:hover { background: #f9fafb; border-color: #0f0518; color: #0f0518; }
.notify-action-btn.primary { background: #0f0518; color: #ffffff; border: none; }
.notify-action-btn.primary:hover { background: #2b2b2b; }

.section-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
}
.section-title { margin: 0; color: #101828; font-size: 1.1rem; font-weight: 600; }

.toggle-stats-btn {
    background: none; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500;
    color: #667085; display: flex; align-items: center; gap: 6px; padding: 0; transition: 0.2s; font-family: 'Outfit';
}
.toggle-stats-btn:hover { color: #101828; }

.filter-premium {
    appearance: none; -webkit-appearance: none; border: 1px solid #d0d5dd;
    background-color: #ffffff; font-family: 'Outfit', sans-serif; font-size: 0.9rem;
    font-weight: 500; color: #344054; padding: 8px 30px 8px 16px; border-radius: 8px;
    cursor: pointer; outline: none; transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23667085%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.filter-premium:hover { border-color: #98a2b3; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.events-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5rem; 
}

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

.stat-card, .event-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #eaecf0;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.02), 0 8px 16px -4px rgba(16, 24, 40, 0.03);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
    border-color: #d0d5dd;
}

.stat-card h3 { font-size: 0.8rem; color: #667085; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px;}
.stat-card .value { font-size: 2rem; font-weight: 700; color: #101828; letter-spacing: -0.5px;}
.stat-card .trend { font-size: 0.85rem; color: #98a2b3; margin-top: 4px; }

.event-header { 
    display: flex; 
    gap: 16px; 
    align-items: center; 
    margin-bottom: 24px; 
    padding-right: 85px; 
}

.date-box {
    background: #f8f9fc; border: 1px solid #eaecf0; border-radius: 12px;
    width: 60px; height: 60px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: #0f0518; flex-shrink: 0;
}
.date-day { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.date-month { font-size: 0.7rem; text-transform: uppercase; font-weight: 600; color: #667085; margin-top: 2px;}

.event-title { margin: 0; font-size: 1.15rem; font-weight: 600; color: #101828; word-break: break-word; line-height: 1.3;}
.event-sub { font-size: 0.9rem; color: #667085; margin-top: 6px; }

.card-actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    margin-top: auto; 
    padding-top: 24px; 
    border-top: 1px solid #eaecf0; 
}

.action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px;
    border-radius: 12px; 
    font-size: 0.95rem; 
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-grow: 1;
    white-space: nowrap;
    height: 48px;
}

.btn-icon { background: #ffffff; border: 1px solid #d0d5dd; color: #344054; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.btn-icon:hover { background: #f9fafb; border-color: #cfd4dc; color: #101828; box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1); transform: translateY(-1px);}

.btn-scan {
    background: #039855; 
    color: #ffffff;
    border: 1px solid #039855;
    flex-grow: 2.5; 
    flex-shrink: 0; 
    min-width: 140px; 
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(3, 152, 85, 0.1);
}
.btn-scan:hover {
    background: #027a48; 
    border-color: #027a48;
    box-shadow: 0 6px 16px -4px rgba(3, 152, 85, 0.3);
    transform: translateY(-1px);
}

.role-badge {
    position: absolute; top: 16px; right: 16px;
    background: #f4f3ff; color: #635bff; border: 1px solid #e9d7fe;
    font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; font-weight: 600;
}

.loader, .empty-state { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; text-align: center; color: #667; margin-top: 20px; width: 100%; min-height: 150px; }
.empty-state { background: #ffffff; border-radius: 16px; border: 1px dashed #eaecf0; padding: 40px; flex-direction: column; }

@media (max-width: 768px) {
    .dashboard-container { padding: 1.5rem; padding-top: 100px; }
    .dashboard-header { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 2rem;}
    
    .header-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .actions-top-row { display: flex; width: 100%; gap: 12px; }
    .actions-top-row > a { flex-grow: 1; }
    .notify-dropdown { right: auto; left: 0; width: calc(100vw - 3rem); max-width: 340px; }

    .card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .btn-scan { grid-column: span 2; width: 100%; }

    .role-badge { position: static; display: inline-block; margin-bottom: 16px; align-self: flex-start; }
    .event-card { padding-top: 24px; }
    .event-header { padding-right: 0; } 
}
        #newUserOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        #newUserOverlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .loading-box {
            background: white;
            padding: 2.5rem;
            border-radius: 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            border: 1px solid #f1f5f9;
            transform: translateY(20px);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        #newUserOverlay.active .loading-box {
            transform: translateY(0);
        }

        .spinner-icon {
            width: 48px;
            height: 48px;
            color: #6C63FF;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem auto;
        }

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


        .smooth-reveal {
    opacity: 0;
    animation: slideDownFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownFadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}


.animate-spin {
  animation: spin 1s linear infinite;
  backface-visibility: hidden;
}