/* Notifications Center («التنبيهات») - every rule is scoped to the alerts sheet (.ref-sheet.nc-sheet, added by
   notifications-center.js), so the settings, reports, support and branch sheets that share .ref-sheet are untouched. */
.ref-sheet.nc-sheet{--nc-surface:#fff;--nc-surface-2:#f6f8fb;--nc-card:#fff;--nc-card-hover:#f8fafc;--nc-line:#e6ebf2;--nc-card-line:var(--nc-line);--nc-line-strong:#d3dbe7;--nc-text:#182033;--nc-text-2:#44506a;--nc-muted:#5f6b7f;--nc-eyebrow:#8a6a33;--nc-focus:#2e6ce6;--nc-red:#b3261e;--nc-red-bg:#fdeeec;--nc-red-edge:#e0574d;--nc-amber:#94590a;--nc-amber-bg:#fff4e0;--nc-amber-edge:#e39a2d;--nc-slate:#56627a;--nc-slate-bg:#eef1f5;--nc-slate-edge:#a7b1bf;--nc-green:#16734a;--nc-green-bg:#e8f6ee;--nc-shadow:0 1px 2px rgba(24,32,51,.05),0 6px 16px -8px rgba(24,32,51,.12)}
.ref-dark .ref-sheet.nc-sheet{--nc-surface:var(--dk-elev,#1d232c);--nc-surface-2:var(--dk-s2,#1c222a);--nc-card:#252c36;--nc-card-hover:#2a323d;--nc-line:#2d3440;--nc-card-line:#313946;--nc-line-strong:#4a5364;--nc-text:var(--dk-text,#ebe8e1);--nc-text-2:var(--dk-text-2,#b9bdc5);--nc-muted:#9aa1ab;--nc-eyebrow:#d4b064;--nc-focus:#8fb4f5;--nc-red:#f09a90;--nc-red-bg:rgba(240,154,144,.12);--nc-red-edge:#e0766b;--nc-amber:#f2a863;--nc-amber-bg:rgba(242,168,99,.12);--nc-amber-edge:#e8964a;--nc-slate:#b0b8c4;--nc-slate-bg:rgba(176,184,196,.11);--nc-slate-edge:#6f7a89;--nc-green:#5fc896;--nc-green-bg:rgba(95,200,150,.13);--nc-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 20px -10px rgba(0,0,0,.5)}

/* the dialog: header stays put, only the list scrolls */
.ref-sheet.nc-sheet{width:min(720px,100%);max-height:min(800px,calc(100vh - 48px));display:flex;flex-direction:column;overflow:hidden;background:var(--nc-surface);color:var(--nc-text);border-color:var(--nc-line)}
.ref-sheet.nc-sheet:focus{outline:none}
.ref-sheet.nc-sheet header{flex:none;align-items:flex-start;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--nc-line);background:var(--nc-surface)}
.ref-sheet.nc-sheet header>div{min-width:0}
.ref-sheet.nc-sheet header small{color:var(--nc-eyebrow);font-weight:650}
.ref-sheet.nc-sheet header h2{font-size:24px;font-weight:800;letter-spacing:-.3px;color:var(--nc-text)}
.ref-sheet.nc-sheet header #sheet-close{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--nc-line);background:var(--nc-surface-2);color:var(--nc-text);box-shadow:none;font-size:22px;line-height:1;display:grid;place-items:center;transition:background-color .15s ease-out,border-color .15s ease-out}
.ref-sheet.nc-sheet header #sheet-close:hover{background:var(--nc-card-hover);border-color:var(--nc-line-strong)}
.ref-sheet.nc-sheet header #sheet-close:focus-visible{outline:2px solid var(--nc-focus);outline-offset:2px}
.ref-sheet.nc-sheet .ref-sheet-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
.nc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header summary: the count, then one quiet stat per state (a dot + a word, never colour alone) */
.nc-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px}
.nc-total{font-size:13px;font-weight:750;color:var(--nc-text);padding:3px 11px;border-radius:999px;background:var(--nc-surface-2);border:1px solid var(--nc-line);font-variant-numeric:tabular-nums}
.nc-sum{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--nc-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.nc-sum b{font-weight:750;color:var(--nc-text)}
.nc-sum i{width:7px;height:7px;border-radius:50%;background:var(--nc-muted)}
.nc-sum-overdue i{background:var(--nc-red-edge)}
.nc-sum-late i{background:var(--nc-amber-edge)}
.nc-sum-never i{background:var(--nc-slate-edge)}
.nc-sum-fresh i{background:var(--nc-green)}

/* the scrolling list; the sticky fade at the bottom says there is more below */
.nc-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px;scroll-padding-block:48px 40px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--nc-line-strong) transparent}
.nc-scroll::after{content:"";position:sticky;bottom:0;display:block;height:30px;background:linear-gradient(to bottom,transparent,var(--nc-surface) 75%);pointer-events:none}
.ref-sheet.nc-sheet .nc-group-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:0;padding:14px 2px 4px;background:var(--nc-surface);box-shadow:0 1px 0 var(--nc-line);font-size:12.5px;font-weight:750;color:var(--nc-text-2)}
.ref-sheet.nc-sheet .nc-group:first-child .nc-group-h{padding-top:12px}
.nc-group-h>span{display:inline-flex;align-items:center;gap:8px}
.nc-group-h>span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.nc-group-h em{font-style:normal;font-size:12px;font-weight:700;color:var(--nc-muted);background:var(--nc-surface-2);border:1px solid var(--nc-line);border-radius:999px;padding:0 9px;font-variant-numeric:tabular-nums}
.nc-g-overdue{--acc:var(--nc-red-edge)}
.nc-g-late{--acc:var(--nc-amber-edge)}
.nc-g-never{--acc:var(--nc-slate-edge)}
.nc-list{display:grid;gap:8px;padding-top:8px}

/* one notification: state icon | branch + state, what + where | how long ago + exact time */
.nc-item{--acc:var(--nc-red);--acc-bg:var(--nc-red-bg);--acc-edge:var(--nc-red-edge);position:relative;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ico body when go";align-items:center;gap:8px 14px;padding-block:11px;padding-inline:18px 12px;border:1px solid var(--nc-card-line);border-radius:14px;background:var(--nc-card);color:var(--nc-text);text-align:start;font:inherit;cursor:pointer;box-shadow:none;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out}
.nc-item::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:3px;border-start-end-radius:3px;border-end-end-radius:3px;background:var(--acc-edge)}
.nc-item:hover{background:var(--nc-card-hover);border-color:var(--nc-line-strong);box-shadow:var(--nc-shadow)}
.nc-item:active{transform:scale(.99)}
.nc-item:focus-visible{outline:2px solid var(--nc-focus);outline-offset:2px}
.nc-item.nc-late{--acc:var(--nc-amber);--acc-bg:var(--nc-amber-bg);--acc-edge:var(--nc-amber-edge)}
.nc-item.nc-never{--acc:var(--nc-slate);--acc-bg:var(--nc-slate-bg);--acc-edge:var(--nc-slate-edge)}
.nc-ico{grid-area:ico;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--acc-bg);color:var(--acc)}
.nc-body{grid-area:body;min-width:0;display:flex;flex-direction:column;gap:4px}
.nc-line{display:flex;align-items:center;gap:8px;min-width:0}
.nc-name{font-size:15px;font-weight:780;color:var(--nc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nc-chip{flex:none;font-size:12px;font-weight:750;line-height:1.75;color:var(--acc);background:var(--acc-bg);border-radius:999px;padding:0 9px}
.nc-meta{display:block;font-size:12.5px;color:var(--nc-muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-meta>span+span::before{content:"·";margin-inline:6px}
.nc-what{color:var(--nc-text-2)}
.nc-when{grid-area:when;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:end;white-space:nowrap}
.nc-age{font-size:13px;font-weight:750;color:var(--nc-text);font-variant-numeric:tabular-nums}
.nc-when time{font-size:12px;color:var(--nc-muted);font-variant-numeric:tabular-nums}
.nc-go{grid-area:go;display:grid;place-items:center;color:var(--nc-muted);transition:transform .15s ease-out,color .15s ease-out}
.nc-item:hover .nc-go{transform:translateX(-2px);color:var(--nc-text-2)}

/* empty / no-data states */
.nc-state{display:grid;justify-items:center;gap:8px;text-align:center;padding:48px 24px 36px;color:var(--nc-text-2)}
.nc-state-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--nc-slate-bg);color:var(--nc-slate);margin-bottom:6px}
.nc-state-ok .nc-state-ico{background:var(--nc-green-bg);color:var(--nc-green)}
.nc-state strong{font-size:16px;color:var(--nc-text)}
.nc-state p{margin:0;font-size:13px;color:var(--nc-muted);max-width:40ch;text-wrap:balance}

/* phones and narrow tablets: a near-full-height bottom sheet with a grab handle */
@media(max-width:900px){
  .ref-sheet.nc-sheet{width:min(760px,100%);max-height:94dvh;height:94dvh;border-radius:22px 22px 0 0;padding-bottom:0}
  .ref-sheet.nc-sheet header{position:relative;padding:22px 16px 14px;backdrop-filter:none}
  .ref-sheet.nc-sheet header::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--nc-line-strong)}
  .ref-sheet.nc-sheet header h2{font-size:21px}
  .nc-summary{gap:4px 12px}
  .nc-scroll{padding:0 12px env(safe-area-inset-bottom);scroll-padding-block:44px 36px}
  .nc-item{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico body go" "ico when go";align-items:start;padding-block:12px;padding-inline:14px 8px;gap:6px 12px}
  .nc-ico{width:34px;height:34px;border-radius:10px}
  .nc-go{align-self:center}
  .nc-when{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px;justify-content:flex-start;text-align:start;white-space:normal}
  .nc-when>*{white-space:nowrap}
  .nc-item.nc-never{grid-template-areas:"ico body go"}
  .nc-line{flex-wrap:wrap;row-gap:4px}
  .nc-name{white-space:normal}
  .nc-what,.nc-what+span::before{display:none}
  .ref-sheet.nc-sheet:has(.nc-state){height:auto}
  /* dark phones: the product eyebrow steps back so «التنبيهات» leads */
  .ref-dark .ref-sheet.nc-sheet header small{color:#a88e57;font-weight:600;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){.nc-item,.nc-go,.ref-sheet.nc-sheet header #sheet-close{transition:none}.nc-item:active{transform:none}.nc-item:hover .nc-go{transform:none}}