/* ==========================================================================
   NOTIFICATION MODULE CSS (Prefix: notif-)
   ========================================================================== */
.notif-board { padding: 24px; max-width: 1400px; margin: 0 auto; font-family: 'Inter', sans-serif; color: var(--mist-100); }
.notif-header { margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 16px; }
.notif-title { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; display: block;}

.notif-list { display: flex; flex-direction: column; gap: 12px; }
.notif-grid-header, .notif-row { display: grid !important; gap: 16px; align-items: center; width: 100%; }

/* Strict 7 Column Grid for Device Info */
.notif-grid { grid-template-columns: 50px 2.5fr 2fr 1fr 1fr 1.5fr 60px !important; }

.notif-grid-header { padding: 0 24px 8px 24px; color: #64748b; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.05); }
.notif-row { background: var(--ink-900); border: 1px solid rgba(228, 220, 203, 0.08); border-radius: 10px; padding: 16px 24px; transition: 0.3s; position: relative; overflow: hidden; }
.notif-row:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(83, 69, 52, 0.08); }

.notif-cell { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.notif-primary-text { font-weight: 600; font-size: 1rem; color: var(--mist-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%;}
.notif-secondary-text { font-size: 0.85rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%;}

/* Custom Tag for OS/Versions */
.notif-tag { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; background: rgba(255, 255, 255, 0.05); color: var(--mist-200); border: 1px solid rgba(255, 255, 255, 0.1); width: fit-content; }

/* Dialog Form (Compose) */
.notif-dialog { background: var(--ink-900) !important; border: 1px solid rgba(228, 220, 203, 0.08); border-radius: 12px !important; box-shadow: 0 20px 60px rgba(83, 69, 52, 0.12); }
.notif-dialog-toolbar { background: var(--ink-850) !important; border-bottom: 1px solid rgba(228, 220, 203, 0.08); color: var(--mist-100) !important; }
.notif-input-dark label { color: var(--mist-300) !important; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.notif-input-dark .md-input, .notif-input-dark textarea { color: var(--mist-100) !important; border-bottom-color: rgba(228, 220, 203, 0.14) !important; }
.notif-input-dark .md-input:focus, .notif-input-dark textarea:focus { border-bottom-color: var(--accent) !important; }
.notif-input-dark .md-select-value { color: var(--mist-100) !important; border-bottom-color: rgba(228, 220, 203, 0.14) !important; }

@media screen and (max-width: 900px) {
    .notif-grid-header { display: none !important; }
    .notif-row { grid-template-columns: 1fr !important; padding: 20px; gap: 12px; }
}