/* Warehouse EXP Date — Notifications module visual owner.
   v21.26 root-first ownership: module-specific selectors live here once. */

/* Migrated from app/app.css; source-order preserved inside this owner. */
.notif-item.danger{border-right: 4px solid var(--danger);}
.notif-item.warning{border-right: 4px solid var(--warning);}
.notification-backdrop.open{opacity:1; visibility:visible; pointer-events:auto;}
.notif-item{display:grid;
            grid-template-columns:auto 1fr;
            gap:11px;
            padding:13px;
            border-radius:17px;
            background:var(--card-bg);
            box-shadow:0 12px 26px -24px rgba(15,23,42,.5);
            border:1px solid var(--border);
            font-size:12px;}
.notif-item.danger,.notif-item.warning{border-right:1px solid var(--border);}
.notif-icon{inline-size:40px; block-size:40px; display:grid; place-items:center; border-radius:13px; font-size:18px;}
.notif-item.danger .notif-icon{background:rgba(220,38,38,.09); color:var(--danger);}
.notif-item.warning .notif-icon{background:rgba(217,119,6,.10); color:var(--warning);}
.notif-main{min-width:0;}
.notif-title{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.notif-title strong{color:var(--primary); font-size:12px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.notif-state{padding:3px 7px; border-radius:999px; font-size:8.5px; font-weight:900; white-space:nowrap;}
.notif-item.danger .notif-state{color:var(--danger); background:rgba(220,38,38,.08);}
.notif-item.warning .notif-state{color:var(--warning); background:rgba(217,119,6,.09);}
.notif-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.notif-meta span{padding:4px 7px; border-radius:999px; background:var(--bg-main); color:var(--text-muted); border:1px solid var(--border); font-size:9px; font-weight:800;}
.notif-empty{text-align:center; padding:42px 20px;}
.notif-empty-icon{inline-size:62px; block-size:62px; margin:0 auto 12px; display:grid; place-items:center; border-radius:20px; background:rgba(5,150,105,.09); color:var(--success); font-size:28px;}
.notif-empty strong{display:block; color:var(--primary); font-size:14px;}
.notif-empty span{display:block; margin-top:5px; color:var(--text-muted); font-size:11px;}
.notification-toolbar{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.notification-filter-chip{border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:999px; padding:7px 11px; font:inherit; font-size:10px; font-weight:800; cursor:pointer; transition:.18s ease;}
.notification-filter-chip:hover{border-color:rgba(194,24,117,.35); color:var(--primary);}
.notification-filter-chip.active{background:linear-gradient(135deg,#c21875,#f04aa7); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(194,24,117,.18);}
.notification-review-all{margin-inline-start:auto;}
.notif-item.reviewed{opacity:.58;}
.notif-item.reviewed .notif-state::after{content:" ✓";}
.notif-actions{display:flex; align-items:center; gap:6px; margin-top:8px;}
.notif-action-btn{border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px; padding:5px 9px; font:inherit; font-size:9px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
.notif-action-btn:hover{color:var(--primary); border-color:rgba(194,24,117,.35);}
.notif-action-btn.reviewed{color:var(--success);}
.notif-count-note{font-size:9px; color:var(--text-muted); padding:0 14px 10px;}
@media (max-width: 560px){
.notification-review-all{margin-inline-start:0;}
}
/* Migrated from app/styles/architecture-system.css; source-order preserved inside this owner. */
body[data-theme="dark"].warehouse-app .notification-drawer{color:var(--text-main); background:var(--surface); border-color:var(--border);}
body[data-theme="dark"].warehouse-app .notification-filter-chip,body[data-theme="dark"].warehouse-app .notif-action-btn{color:var(--text-muted); background:var(--surface-soft); border-color:var(--border);}
@media (max-width:760px){
.warehouse-app .notification-drawer{top:7vh; border-radius:20px 20px 0 0;}
}
.warehouse-app .notification-drawer{box-shadow:0 28px 80px -32px rgba(45,26,39,.45)}
.warehouse-app .notif-item{border-radius:14px;border:1px solid var(--erp-border);box-shadow:none}
.notification-backdrop{position:fixed; inset:0; z-index:99990;
            
            
            opacity:0; visibility:hidden; pointer-events:none;
            transition:opacity .25s ease, visibility .25s ease;background:var(--dlg-backdrop);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.notification-drawer{position:fixed;
            z-index:99999;
            display:flex;
            flex-direction:column;
            visibility:hidden;
            
            transition:transform .3s ease, visibility .3s ease;
            
            margin:9px;
            top:0; bottom:0;
            
            border-radius:24px;
            
            overflow:hidden;width:min(490px,94vw);min-height:0;color:var(--dlg-text);background:var(--dlg-canvas);border:1px solid var(--dlg-border);box-shadow:var(--dlg-shadow)}
html[dir="rtl"] .notification-drawer{left:0;right:auto;transform:translateX(-100%)}
html[dir="ltr"] .notification-drawer{right:0;left:auto;transform:translateX(100%)}
html[dir="rtl"] .notification-drawer{text-align:right;line-height:1.72}
html[dir="ltr"] .notification-drawer{text-align:left}
@media (max-width:760px){
.notification-drawer{width:100vw;max-width:100vw;top:7dvh;border-radius:24px 24px 0 0}
}
html[dir="rtl"] .notification-drawer.open,html[dir="ltr"] .notification-drawer.open{transform:translateX(0);
  visibility:visible;}
@media (max-width:760px){
html[dir="rtl"] .notification-drawer,html[dir="ltr"] .notification-drawer{left:0;right:0;bottom:0;margin:0;}
html[dir="rtl"] .notification-drawer{transform:translateY(105%);}
html[dir="ltr"] .notification-drawer{transform:translateY(105%);}
html[dir="rtl"] .notification-drawer.open,html[dir="ltr"] .notification-drawer.open{transform:translateY(0);}
}
@media (max-width:760px){
.warehouse-app .notification-drawer{width:min(94vw,420px);max-width:94vw;}
}