/* =====================================================================
   Newsroom OS — dialogs + toasts (UI Standard v2.2, Sprint 1)
   One modal for every alert / confirm / prompt, plus toasts.
   Loaded only with NF_UI_V2 on (after tokens.css).
   Sits above Bootstrap modals (1050) so a confirm opened from a modal is on top.
   ===================================================================== */

.nf-dlg{ position:fixed; inset:0; z-index:var(--nf-z-confirm,1060); display:flex; align-items:center; justify-content:center; padding:16px; background:var(--nf-scrim); font-family:var(--nf-font); animation:nf-dlg-fade 120ms ease-out; }
.nf-dlg[hidden]{ display:none; }
@keyframes nf-dlg-fade{ from{ opacity:0; } }
@keyframes nf-dlg-pop{ from{ transform:translateY(8px) scale(.98); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .nf-dlg, .nf-dlg__box{ animation:none !important; } }

.nf-dlg__box{
  width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow:auto;
  background:var(--nf-card); color:var(--nf-text); border-radius:var(--nf-r-lg); box-shadow:var(--nf-shadow-3);
  padding:24px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; animation:nf-dlg-pop 140ms ease-out;
  text-align:left;
}
.nf-dlg__icon{ grid-row:span 2; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:24px; line-height:1; }
.nf-dlg__icon .ph, .nf-dlg__icon .ph-fill{ font-size:24px; }
.nf-dlg--info .nf-dlg__icon{ background:var(--nf-info-soft); color:var(--nf-info); }
.nf-dlg--success .nf-dlg__icon{ background:var(--nf-success-soft); color:var(--nf-success); }
.nf-dlg--warning .nf-dlg__icon{ background:var(--nf-warning-soft); color:var(--nf-warning); }
.nf-dlg--danger .nf-dlg__icon{ background:var(--nf-danger-soft); color:var(--nf-danger); }
.nf-dlg__title{ margin:0; align-self:end; font:700 var(--nf-fs-lg)/1.25 var(--nf-font); letter-spacing:-.2px; color:var(--nf-text); overflow-wrap:anywhere; }
.nf-dlg__msg{ margin:0; font:400 var(--nf-fs-base)/1.5 var(--nf-font); color:var(--nf-text-2); overflow-wrap:anywhere; }
.nf-dlg__msg:empty{ display:none; }
.nf-dlg__img{ grid-column:1 / -1; justify-self:center; max-width:100%; max-height:160px; border-radius:var(--nf-r-md); }
.nf-dlg__field{ grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.nf-dlg__field label{ font:600 var(--nf-fs-xs) var(--nf-font); color:var(--nf-text); }
.nf-dlg__field input, .nf-dlg__field textarea{
  width:100%; min-height:40px; padding:9px 12px; border:1px solid var(--nf-border); border-radius:var(--nf-r-md);
  background:var(--nf-card); color:var(--nf-text); font:400 var(--nf-fs-sm)/1.4 var(--nf-font); box-shadow:none;
}
.nf-dlg__field input:focus, .nf-dlg__field textarea:focus{ outline:0; border-color:var(--nf-primary); box-shadow:var(--nf-focus); }
.nf-dlg__field.is-invalid input, .nf-dlg__field.is-invalid textarea{ border-color:var(--nf-danger); box-shadow:0 0 0 3px var(--nf-danger-soft); }
.nf-dlg__err{ font:400 var(--nf-fs-2xs) var(--nf-font); color:var(--nf-danger); min-height:0; }
.nf-dlg__err:empty{ display:none; }
.nf-dlg__foot{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }

.nf-dlg__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:88px; height:38px; padding:0 16px;
  border-radius:var(--nf-r-sm); border:1px solid transparent; font:600 var(--nf-fs-sm)/1 var(--nf-font); cursor:pointer;
  transition:background var(--nf-ease),border-color var(--nf-ease),box-shadow var(--nf-ease);
}
.nf-dlg__btn:focus-visible{ outline:0; box-shadow:var(--nf-focus); }
.nf-dlg__btn[disabled]{ opacity:.5; cursor:not-allowed; }
.nf-dlg__btn--cancel{ background:transparent; color:var(--nf-text-2); border-color:var(--nf-border); }
.nf-dlg__btn--cancel:hover{ background:var(--nf-stripe); color:var(--nf-text); }
.nf-dlg__btn--ok{ background:var(--nf-primary); color:var(--nf-on-primary); }
.nf-dlg__btn--ok:hover{ background:var(--nf-primary-hover); }
.nf-dlg__btn--danger{ background:var(--nf-danger); color:#fff; }
.nf-dlg__btn--danger:hover{ filter:brightness(.92); }
.nf-dlg__btn.is-busy::after{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:nf-spin .7s linear infinite; }
@keyframes nf-spin{ to{ transform:rotate(360deg); } }

@media (max-width:480px){
  .nf-dlg{ align-items:flex-end; padding:0; }
  .nf-dlg__box{ max-width:none; border-radius:var(--nf-r-lg) var(--nf-r-lg) 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); }
  .nf-dlg__foot{ flex-direction:column-reverse; }
  .nf-dlg__btn{ width:100%; height:44px; }
}

/* toasts */
.nf-toasts{ position:fixed; right:20px; bottom:20px; z-index:var(--nf-z-toast,1080); display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; font-family:var(--nf-font); }
.nf-toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:10px; max-width:380px; padding:12px 14px 12px 12px;
  border-radius:var(--nf-r-md); background:var(--nf-text); color:var(--nf-card); box-shadow:var(--nf-shadow-3);
  font:500 var(--nf-fs-sm)/1.4 var(--nf-font); animation:nf-dlg-pop 160ms ease-out;
}
.nf-toast .ph, .nf-toast .ph-fill{ font-size:18px; margin-top:1px; }
.nf-toast--success .ph-fill{ color:var(--nf-success); }
.nf-toast--danger .ph-fill{ color:var(--nf-danger); }
.nf-toast--warning .ph-fill{ color:var(--nf-warning); }
.nf-toast--info .ph-fill{ color:var(--nf-info); }
.nf-toast__x{ margin-left:4px; border:0; background:none; color:inherit; opacity:.6; cursor:pointer; padding:0 2px; font-size:16px; line-height:1; }
.nf-toast__x:hover{ opacity:1; }
:root[data-nf-theme="dark"] .nf-toast{ background:var(--nf-raised); color:var(--nf-text); border:1px solid var(--nf-border); }
@media (max-width:480px){ .nf-toasts{ left:12px; right:12px; bottom:12px; align-items:stretch; } .nf-toast{ max-width:none; } }