/**
 * GamiKonnect Notification System Styles
 * Modern, clean, professional notification UI components
 * Consistent with project's blue/aqua theme
 * =====================================================
 */

/* =========================================
   Notification Badge / Bubble
   ========================================= */
/* The notification button in the top nav. The id is on the button element,
   so we must NOT hide it. Only the inner .notification-bubble should be
   conditionally shown via the count. */
#notification-badge {
    position: relative;
}

/* Top-nav notification bell — shared across gamer, shop owner, and admin dashboards */
.nav-icon.notifications-btn,
button.notifications-btn.nav-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #F0EBFF);
    color: var(--text-secondary, #64748B);
    transition: var(--transition, all 0.25s ease);
    cursor: pointer;
    border: none;
}

.nav-icon.notifications-btn:hover,
button.notifications-btn.nav-icon:hover {
    background: color-mix(in srgb, var(--primary, #35A8F0) 10%, transparent);
    color: var(--primary, #35A8F0);
    transform: scale(1.04);
}

.notification-bubble {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    background: var(--danger, #EF4444);
    color: var(--text-light, #FFFFFF);
    border-radius: 10px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card, #FFFFFF);
    line-height: 1;
    animation: notif-bubble-pop 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes notif-bubble-pop {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.notification-icon {
    position: relative;
    cursor: pointer;
    font-size: 24px;
    transition: var(--transition, all 0.3s ease);
}

.notification-icon:hover {
    transform: scale(1.05);
}

/* =========================================
   Toast Notification
   ========================================= */
.notification-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #E2E8FF);
    border-radius: var(--border-radius-sm, 12px);
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(53, 168, 240, 0.16));
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    max-width: 380px;
    z-index: 1050;
    animation: notifSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    backdrop-filter: blur(20px);
}

@keyframes notifSlideIn {
    from {
        transform: translateX(420px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.toast-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary, #F0EBFF);
}

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

.toast-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary, #1A1A2E);
    font-size: 14px;
}

.toast-content p {
    font-size: 13px;
    color: var(--text-muted, #718096);
    margin: 0;
    line-height: 1.4;
}

/* =========================================
   Notification Dropdown (Top Nav)
   ========================================= */
.notifications-dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    right: -10px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-light, #E2E8FF);
    border-radius: var(--border-radius, 16px);
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(53, 168, 240, 0.16));
    width: min(400px, calc(100vw - 24px));
    min-width: 0;
    max-height: 560px;
    overflow: hidden;
    z-index: 1000;
    display: none;
    flex-direction: column;
    transform-origin: top right;
    animation: dropdownFadeIn 0.25s ease-out;
}

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

.nav-dropdown .notifications-dropdown-content {
    display: none;
}

.nav-dropdown.open .notifications-dropdown-content,
.nav-dropdown.show .notifications-dropdown-content {
    display: flex;
}

.notifications-dropdown-content::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 18px;
    width: 16px;
    height: 16px;
    background: var(--bg-card, #ffffff);
    border-left: 1px solid var(--border-light, #E2E8FF);
    border-top: 1px solid var(--border-light, #E2E8FF);
    transform: rotate(45deg);
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light, #E2E8FF);
    background: var(--bg-secondary, #F0EBFF);
}

.dropdown-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #1A1A2E);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-header h5 i {
    color: var(--primary, #35A8F0);
}

.view-all-link {
    color: var(--primary, #35A8F0);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition, all 0.3s ease);
}

.view-all-link:hover {
    color: var(--primary-dark, #1E90FF);
    text-decoration: none;
    gap: 6px;
}

.notifications-list {
    overflow-y: auto;
    max-height: 420px;
    flex: 1;
}

/* Notification item in dropdown */
.notification-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light, #E2E8FF);
    cursor: pointer;
    transition: var(--transition, all 0.3s ease);
    position: relative;
}

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

.notification-item:hover {
    background: var(--bg-secondary, #F0EBFF);
}

.notification-item.unread {
    background: color-mix(in srgb, var(--primary, #35A8F0) 10%, var(--bg-card, #ffffff));
    border-left: 3px solid var(--primary, #35A8F0);
}

.notification-item.unread:hover {
    background: color-mix(in srgb, var(--primary, #35A8F0) 16%, var(--bg-card, #ffffff));
}

.notification-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notification-title {
    font-weight: 600;
    color: var(--text-primary, #1A1A2E);
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Importance indicator dots for dropdown notifications */
.notif-imp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: notif-dot-pulse 2s infinite;
}

.notif-imp-dot.critical {
    background: #dc3545;
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
}

.notif-imp-dot.high {
    background: #fd7e14;
    box-shadow: 0 0 6px rgba(253, 126, 20, 0.4);
}

@keyframes notif-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.notification-message {
    font-size: 13px;
    color: var(--text-muted, #718096);
    margin: 0;
    line-height: 1.4;
}

.notification-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #a0aec0;
    margin-top: 4px;
}

.notification-category {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary, #F0EBFF);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted, #718096);
}

.notification-category i {
    font-size: 10px;
}

.notification-time {
    white-space: nowrap;
}

/* Dropdown empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: #a0aec0;
    text-align: center;
}

.empty-state i {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}


/* =========================================
   NOTIFICATION CENTER PAGE (rebuilt)
   Search, category grouping, bulk select
   ========================================= */

.notif-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    box-sizing: border-box;
    /* Guards against shrinking to fit short content (e.g. the empty state)
       if a parent flex/grid container would otherwise let it shrink-wrap. */
    flex: 1 1 auto;
    align-self: stretch;
}

.notif-wrapper * {
    box-sizing: border-box;
}

.notif-empty {
    width: 100%;
}

/* ---- Header ---- */
.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.notif-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.notif-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #35a8f0, #7fdbff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(53, 168, 240, 0.28);
}

.notif-header-title h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.notif-header-sub {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

/* ---- Buttons ---- */
.notif-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #334155);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.notif-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.notif-btn-primary {
    background: linear-gradient(135deg, #35a8f0, #7fdbff);
    border: none;
    color: #fff;
}

.notif-btn-primary:hover {
    filter: brightness(1.05);
}

.notif-btn-danger {
    color: #dc2626;
    border-color: #fecaca;
}

.notif-btn-danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.notif-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: #64748b;
}

.notif-btn-ghost:hover {
    background: #f1f5f9;
}

.notif-btn-select.active {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #0284c7;
}

/* ---- Search row ---- */
.notif-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.notif-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.notif-search-input:focus-within {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(53, 168, 240, 0.12);
}

.notif-search-input i {
    color: #94a3b8;
    font-size: 0.85rem;
}

.notif-search-input input {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px 0;
    font-size: 0.9rem;
    color: #1e293b;
    background: transparent;
}

.notif-search-input input::placeholder {
    color: #94a3b8;
}

/* ---- Bulk action bar ---- */
.notif-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.notif-bulk-bar.visible {
    display: flex;
}

.notif-bulk-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d4ed8;
}

.notif-bulk-actions {
    display: flex;
    gap: 8px;
}

.notif-bulk-actions .notif-btn {
    padding: 7px 14px;
    font-size: 0.8rem;
}

/* ---- Category pills ---- */
.notif-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.notif-pill:hover {
    text-decoration: none;
    filter: brightness(0.97);
}

.notif-pill.active {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.notif-pill-count {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.72rem;
}

.notif-pill-general { background: #e9ecef; color: #495057; }
.notif-pill-system { background: #d0ebff; color: #1c7ed6; }
.notif-pill-competition { background: #fff3bf; color: #e67700; }
.notif-pill-payment { background: #d3f9d8; color: #2b8a3e; }
.notif-pill-achievement { background: #dbe4ff; color: #364fc7; }
.notif-pill-level_up { background: #e5dbff; color: #6741d9; }
.notif-pill-account { background: #ffe3e3; color: #c92a2a; }
.notif-pill-events { background: #c5f6fa; color: #0b7285; }

/* ---- Read-status row ---- */
.notif-status-row {
    display: flex;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.notif-status-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.notif-status-link:hover {
    color: #475569;
    text-decoration: none;
}

.notif-status-link.active {
    color: #0284c7;
    border-bottom-color: #35a8f0;
}

/* ---- Category groups ---- */
.notif-group {
    margin-bottom: 22px;
}

.notif-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 8px;
    padding-left: 12px;
    border-left: 3px solid #94a3b8;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.notif-group-count {
    font-weight: 600;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: normal;
}

.notif-group-title-general { border-left-color: #495057; }
.notif-group-title-system { border-left-color: #1c7ed6; }
.notif-group-title-competition { border-left-color: #e67700; }
.notif-group-title-payment { border-left-color: #2b8a3e; }
.notif-group-title-achievement { border-left-color: #364fc7; }
.notif-group-title-level_up { border-left-color: #6741d9; }
.notif-group-title-account { border-left-color: #c92a2a; }

/* ---- Rows ---- */
.notif-rows {
    background: var(--bg-card, #fff);
    border-radius: 14px;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}

.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease, opacity 0.2s ease, transform 0.2s ease;
}

.notif-row:last-child {
    border-bottom: none;
}

.notif-row:hover {
    background: #f8fafc;
}

.notif-row--removing {
    opacity: 0;
    transform: translateX(8px);
}

/* Checkbox — hidden unless select mode is active */
.notif-row-check {
    display: none;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-wrapper.select-mode .notif-row-check {
    display: flex;
}

.notif-row-check input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.notif-checkbox-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.notif-row-check input:checked + .notif-checkbox-box {
    background: #35a8f0;
    border-color: #35a8f0;
}

.notif-row-check input:checked + .notif-checkbox-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.65rem;
    color: #fff;
}

/* Unread dot */
.notif-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    margin-top: 6px;
    align-self: flex-start;
}

.notif-row.unread .notif-row-dot {
    background: #35a8f0;
}

/* Body — two-line layout: title + actions on top, message + time below,
   so the mark-as-read control sits clearly in the top-right corner of
   each notification rather than buried at the far end of one dense line. */
.notif-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notif-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.notif-row-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    min-width: 0;
}

.notif-row.unread .notif-row-title {
    font-weight: 700;
}

.notif-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.notif-row-message {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.notif-row-time {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Row actions — top-right corner of each notification */
.notif-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.notif-row-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.notif-row-icon-btn:hover {
    background: #e2e8f0;
}

.notif-row-icon-btn.mark-read-btn {
    background: #e0f2fe;
    color: #0284c7;
}

.notif-row-icon-btn.mark-read-btn:hover {
    background: #bae6fd;
}

.notif-row-icon-btn-danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ---- Empty state ---- */

.notif-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card, #fff);
    border: 2px dashed var(--border-color, #e2e8f0);
    border-radius: 16px;
}

.notif-empty i {
    font-size: 2.5rem;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.notif-empty h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
}

.notif-empty p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

/* ---- Pagination ---- */
.notif-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.notif-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.notif-pagination .page-link:hover {
    background: #f8fafc;
    text-decoration: none;
}

.notif-pagination .page-item.active .page-link {
    background: #35a8f0;
    border-color: #35a8f0;
    color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .notifications-dropdown-content {
        right: -60px;
        width: min(360px, calc(100vw - 20px));
    }

    .notif-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .notif-row-message {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .notif-row-time {
        display: none;
    }

    .notif-search-row {
        flex-wrap: wrap;
    }

    .notif-btn-select span {
        display: none;
    }
}

@media (max-width: 400px) {
    .notifications-dropdown-content {
        right: -80px;
        width: calc(100vw - 16px);
        max-height: 70vh;
    }

    .dropdown-header {
        padding: 12px 14px;
    }

    .notification-item {
        padding: 12px 14px;
    }

    .notification-meta {
        flex-wrap: wrap;
        gap: 4px;
    }

    .notif-row {
        padding: 12px;
        gap: 8px;
    }

    .notif-row-icon-btn {
        width: 26px;
        height: 26px;
    }
}

/* Large screens — cap notification center width */
@media (min-width: 1400px) {
    .notif-wrapper {
        max-width: 1280px;
    }
}

/* ---- Gamer variant — purple brand accent instead of shop-owner blue ---- */
.notif-wrapper-gamer .notif-header-icon {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    box-shadow: 0 6px 16px rgba(108, 92, 231, 0.28);
}

.notif-wrapper-gamer .notif-btn-primary {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.notif-wrapper-gamer .notif-btn-select.active {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #6c5ce7;
}

.notif-wrapper-gamer .notif-search-input:focus-within {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

.notif-wrapper-gamer .notif-status-link.active {
    color: #6c5ce7;
    border-bottom-color: #8b7cf6;
}

.notif-wrapper-gamer .notif-row-dot {
    /* overridden per-row below when unread */
}

.notif-wrapper-gamer .notif-row.unread .notif-row-dot {
    background: #6c5ce7;
}

.notif-wrapper-gamer .notif-row-check input:checked + .notif-checkbox-box {
    background: #6c5ce7;
    border-color: #6c5ce7;
}

.notif-wrapper-gamer .notif-bulk-bar {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.notif-wrapper-gamer .notif-bulk-count {
    color: #5b21b6;
}

.notif-wrapper-gamer .notif-pagination .page-item.active .page-link {
    background: #6c5ce7;
    border-color: #6c5ce7;
}