/* Notification Center (Green System Parity Rebuild 2025-09-27)
   Goal: Visual & structural alignment with Upload / Discovery / Profile centers.
   Key Traits: Centered modal shell, green accent border/shadows, gradient heading, pill filters, card list, unified focus ring.
   Accessibility: Role=dialog, aria-modal, focus trap (handled in JS), readable contrast, reduced-motion support.
*/

/* Root / Visibility */
#notification-center-root { position:fixed; inset:0; z-index:14800; font-family:var(--font-display,'Rajdhani',sans-serif); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 380ms; }
#notification-center-root.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; }
#nc-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.70); backdrop-filter:blur(2px); opacity:0; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1); }
#notification-center-root.is-open #nc-backdrop { opacity:1; }

/* Shell */
#nc-shell { position:absolute; left:50%; top:12vh; transform:translateX(-50%) translateY(-10px) scale(.985); width:min(1040px,92vw); max-height:calc(100vh - 24vh); display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--secondary); border-radius:var(--radius-lg); padding:22px 26px 18px; box-shadow:var(--shadow-elevated); box-sizing:border-box; opacity:0; overflow:hidden; transition: opacity 380ms cubic-bezier(0.16,1,0.3,1) 120ms, transform 380ms cubic-bezier(0.16,1,0.3,1) 120ms; position:relative; }
#nc-shell::before { content:""; position:absolute; inset:0; padding:1px; border-radius:var(--radius-lg); background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
#notification-center-root.is-open #nc-shell { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
@media (max-width:880px){ #nc-shell { width:min(1000px,94vw); } }
@media (max-width:760px){ #nc-shell { top:8vh; max-height:calc(100vh - 16vh); padding:20px 20px 18px; } }
@media (max-width:560px){ #nc-shell { top:6vh; width:94vw; max-height:calc(100vh - 14vh); padding:18px 16px 18px; } }
@media (max-width:380px){ #nc-shell { padding:16px 12px 16px; } }

/* Header */
.nc-header { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 0 8px; border-bottom:1px solid var(--border-subtle); background:none; }
.nc-header h2 { margin:0; font-size:1.55rem; letter-spacing:1px; color:var(--primary); text-shadow:var(--primary-glow); flex:1 1 auto; }
@media (max-width:560px){ .nc-header h2 { font-size:1.35rem; } }
.nc-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nc-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-md); background: var(--bg-elevated); border:1px solid var(--border-medium); color: var(--primary); cursor:pointer; position:relative; font-size:16px; transition: background .15s ease, border-color .15s ease, transform .15s ease; opacity:.9; }
.nc-icon-btn .mdi { font-size:20px; line-height:1; }
.nc-icon-btn.nc-refresh { background:var(--primary); border:none; color:var(--text-on-primary); font-weight:700; box-shadow:var(--shadow-glow); }
.nc-icon-btn:hover:not(.nc-refresh), .nc-icon-btn:focus-visible:not(.nc-refresh){ background: var(--bg-hover); border-color: var(--primary); opacity:1; transform: translateY(-1px); color: var(--primary); }
.nc-icon-btn.nc-refresh:hover, .nc-icon-btn.nc-refresh:focus-visible { filter:brightness(1.08); }
.nc-icon-btn:active { transform:scale(.94); }

/* Toolbar */
.nc-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:14px 0 8px; }
.nc-toolbar input[type=search], .nc-toolbar select { background:var(--bg-input); border:1px solid var(--border-medium); color:var(--text-secondary); padding:7px 12px 6px; border-radius:var(--radius-md); font-size:0.7rem; letter-spacing:.6px; }
.nc-toolbar input[type=search]:focus-visible, .nc-toolbar select:focus-visible { outline:none; box-shadow:0 0 0 2px var(--primary-dim); }
@media (max-width:640px){ #nc-search { flex:1 1 160px; } }

/* Filters */
.nc-filters { display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 10px; }
.nc-filter { background:var(--bg-base); border:1px solid var(--border-medium); color:var(--text-secondary); padding:6px 12px; border-radius:var(--radius-pill); font-size:0.65rem; letter-spacing:.8px; cursor:pointer; position:relative; transition:background .25s, border-color .25s, color .25s; font-weight:600; }
.nc-filter.active, .nc-filter[aria-selected=true] { background:var(--bg-elevated); border-color:var(--secondary); color:#fff; box-shadow:var(--shadow-glow); }
.nc-filter:hover:not(.active) { background:var(--bg-hover); }

/* Scroll Area */
.nc-main { flex:1; min-height:0; overflow:auto; padding:4px 6px 84px; scrollbar-width:thin; scrollbar-color:var(--secondary) var(--bg-base); }
/* Scrollbar (green gradient) */
.nc-main::-webkit-scrollbar { width:10px; }
.nc-main::-webkit-scrollbar-track { background:var(--bg-base); }
.nc-main::-webkit-scrollbar-thumb { background:linear-gradient(var(--primary),var(--secondary)); border-radius:12px; box-shadow:0 0 0 2px var(--bg-base) inset; }
.nc-main::-webkit-scrollbar-thumb:hover { filter:brightness(1.1); }
/* Footer (green parity) */
.nc-footer { position:absolute; left:0; right:0; bottom:0; padding:12px 20px 18px; display:flex; justify-content:flex-end; gap:12px; background:linear-gradient(180deg,transparent,var(--bg-surface) 65%); border-top:1px solid var(--border-subtle); backdrop-filter:blur(4px); }
@media (max-width:560px){ .nc-footer { padding:12px 14px 20px; } }

/* Footer buttons inherit .nc-actions .nc-btn styles; add spacing overrides if needed */
.nc-footer .nc-btn { margin-left:6px; }

/* Items (green system) */
.nc-list { display:flex; flex-direction:column; gap:8px; position:relative; }
.nc-item { display:flex; flex-direction:column; gap:3px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:6px 12px 6px; position:relative; transition:background .18s ease, border-color .18s ease, transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s; min-height:46px; margin:0 2px; }
.nc-item::after { content:""; position:absolute; left:12px; right:12px; bottom:-5px; height:0; border-bottom:1px dotted var(--border-subtle); pointer-events:none; }
.nc-list .nc-item:last-child::after { display:none; }
.nc-item:hover, .nc-item:focus-visible { background:var(--bg-elevated); border-color:var(--secondary); box-shadow:var(--shadow-glow); transform:translateY(-1px) scale(1.006); z-index:3; }
.nc-item.unread { background:var(--bg-elevated); border-color:var(--primary); box-shadow:var(--shadow-glow); }
@media (prefers-reduced-motion: reduce){ .nc-item{ transition:none; } .nc-item:hover, .nc-item:focus-visible { transform:none; } }
.nc-item .nc-head { display:flex; align-items:flex-start; gap:9px; }
.nc-item .nc-title-wrap { flex:1; min-width:0; }
.nc-item .nc-title { font-size:.8rem; font-weight:600; letter-spacing:.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-item .nc-subtitle { font-size:.62rem; opacity:.75; margin-top:2px; color:var(--text-secondary); }
.nc-item .nc-body { font-size:.6rem; line-height:1.3; opacity:.82; }
.nc-item .nc-meta { font-size:.55rem; opacity:.7; letter-spacing:.6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nc-context { opacity:.58; }
/* Card action delete */
.nc-actions-bar { display:flex; align-items:center; gap:4px; position:absolute; top:5px; right:6px; }
.nc-card-delete { background:var(--bg-elevated); border:1px solid var(--border-medium); width:26px; height:26px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:13px; transition:background .18s, border-color .18s, transform .16s, color .18s; box-shadow:var(--shadow-elevated); }
.nc-card-delete .mdi { font-size:17px; }
.nc-card-delete:hover, .nc-card-delete:focus-visible { background:var(--bg-hover); border-color:var(--secondary); color:#fff; transform:scale(1.06); }
.nc-card-delete:active { transform:scale(.9); }
/* Avatar fallback & sizing */
.nc-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--border-medium); background:var(--bg-base); }
.nc-avatar-wrap { display:inline-flex; }
.nc-avatar-fallback { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; letter-spacing:.5px; background:var(--bg-elevated); color:var(--primary); border:1px solid var(--border-medium); }
.nc-head { gap:8px !important; }
@media (max-width:560px){
   .nc-header { padding-right:56px; }
   .nc-header .nc-actions { position:absolute; top:16px; right:16px; gap:8px; }
   .nc-header .nc-icon-btn.nc-close { width:40px; height:40px; }
}
/* Bulk action buttons subtle differentiation */
.nc-icon-btn.nc-bulk-read span, .nc-icon-btn.nc-bulk-clear span { font-size:19px; }
.nc-icon-btn.nc-bulk-clear { background: var(--bg-elevated); border:1px solid var(--border-medium); color: var(--primary); }
.nc-icon-btn.nc-bulk-clear:hover, .nc-icon-btn.nc-bulk-clear:focus-visible { background: var(--bg-hover); border-color: var(--primary); opacity: 1; transform: translateY(-1px); }