/* ==========================================================================
   GVS.Suite - Admin > Notifications (GVS Support only).
   --------------------------------------------------------------------------
   Lifted from the Claude Design kit's notifications.css, plus the handful of
   .sc-alert rules the push tab borrows from security.css - carried across here
   rather than linking that stylesheet, because the screen it belongs to (the
   estate two-factor policy) is not built yet.

   Link this AFTER myhome/users and BEFORE gvs-mobile.css: the responsive layer
   overrides these at narrow widths and an earlier link loses every
   equal-specificity tie.
   ========================================================================== */

/* notifications.css — Admin › Notifications: mail servers, test send, delivery log.
   Builds on myhome.css + users.css (tables, selects, pager, dialogs are reused). */

/* ---------- Page tabs ----------------------------------------------------- */
.nt-tabs{display:flex;gap:28px;border-bottom:1px solid var(--gvs-border);margin:0 0 26px}
.nt-tab{white-space:nowrap;padding:0 2px 12px;font-size:14.5px;font-weight:600;color:var(--gvs-fg-3);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:8px;transition:color var(--gvs-dur-fast)}
.nt-tab:hover{color:var(--gvs-fg-1)}
.nt-tab.on{color:var(--gvs-primary);border-bottom-color:var(--gvs-primary)}
.nt-tab .material-symbols-rounded{font-size:19px}
.nt-tab .nt-tab-count{font-size:11.5px;font-weight:700;background:var(--gvs-surface-sunken);color:var(--gvs-fg-2);border-radius:var(--gvs-radius-pill);padding:1px 8px}
.nt-tab.on .nt-tab-count{background:var(--gvs-primary-weak);color:var(--gvs-primary)}

.nt-wrap{max-width:1000px}
.nt-sec{margin-top:32px}
.nt-sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.nt-sec-head h2{margin:0;font-size:16px;font-weight:700;color:var(--gvs-fg-1)}
.nt-sec-head .nt-count{font-size:12px;font-weight:700;color:var(--gvs-fg-3)}
.nt-sec-note{font-size:13.5px;color:var(--gvs-fg-3);margin:0 0 14px;line-height:1.55;max-width:62ch}

/* ---------- Mail server card --------------------------------------------- */
.nt-srv{background:var(--gvs-surface);border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-lg);box-shadow:var(--gvs-elev-1);overflow:hidden}
.nt-srv+.nt-srv{margin-top:12px}
.nt-srv.shared{border-color:color-mix(in srgb,var(--gvs-primary) 40%,var(--gvs-border))}
.nt-srv-top{display:flex;align-items:flex-start;gap:16px;padding:18px 20px}
.nt-srv-icon{flex:none;width:44px;height:44px;border-radius:var(--gvs-radius-md);display:grid;place-items:center;background:var(--gvs-primary-weak);color:var(--gvs-primary)}
.nt-srv-icon .material-symbols-rounded{font-size:24px}
.nt-srv.off .nt-srv-icon{background:var(--gvs-surface-sunken);color:var(--gvs-fg-3)}
.nt-srv-body{flex:1;min-width:0}
.nt-srv-scope{display:flex;align-items:center;gap:9px;row-gap:6px;flex-wrap:wrap;line-height:1.3}
.nt-srv-scope h3{margin:0;font-size:16.5px;font-weight:700;color:var(--gvs-fg-1)}
.nt-srv-addr{font-family:var(--gvs-font-mono);font-size:13px;color:var(--gvs-fg-2);margin-top:4px;word-break:break-all}
.nt-srv-actions{display:flex;gap:8px;flex:none}
.nt-srv-actions .mh-btn{height:38px;padding:0 14px;font-size:13.5px}
.nt-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:var(--gvs-radius-pill);background:var(--gvs-surface-sunken);color:var(--gvs-fg-3)}
.nt-pill.live{background:var(--gvs-success-50);color:var(--gvs-success-700)}
.nt-pill.default{background:var(--gvs-primary-weak);color:var(--gvs-primary)}
[data-theme="dark"] .nt-pill.live{color:var(--gvs-success-500)}
.nt-pill .nt-pdot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* fields grid inside a server card */
.nt-srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--gvs-divider);background:var(--gvs-surface-alt)}
.nt-srv-grid > div{padding:12px 20px;border-right:1px solid var(--gvs-divider)}
.nt-srv-grid > div:last-child{border-right:none}
.nt-srv-grid dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gvs-fg-3);margin:0 0 3px}
.nt-srv-grid dd{margin:0;font-size:13.5px;color:var(--gvs-fg-1);font-weight:500;word-break:break-word}
@media(max-width:760px){.nt-srv-grid{grid-template-columns:1fr 1fr}.nt-srv-grid > div:nth-child(2){border-right:none}}
@media(max-width:480px){.nt-srv-grid{grid-template-columns:1fr}.nt-srv-grid > div{border-right:none;border-bottom:1px solid var(--gvs-divider)}.nt-srv-grid > div:last-child{border-bottom:none}.nt-srv-top{flex-wrap:wrap}.nt-srv-actions{width:100%}.nt-srv-actions .mh-btn{flex:1}}

/* an inactive server reads as switched off, not as a variant */
.nt-srv.off{background:var(--gvs-surface-alt);box-shadow:none}
.nt-srv.off .nt-srv-scope h3,.nt-srv.off .nt-srv-addr,.nt-srv.off .nt-srv-grid dd{color:var(--gvs-fg-3)}
.nt-off-banner{display:flex;align-items:center;gap:9px;padding:9px 20px;background:var(--gvs-surface-sunken);border-top:1px solid var(--gvs-divider);font-size:12.5px;font-weight:600;color:var(--gvs-fg-3)}
.nt-off-banner .material-symbols-rounded{font-size:18px}

/* which sites fall back to the shared server */
.nt-fallback{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 16px;border:1px dashed var(--gvs-border-strong);border-radius:var(--gvs-radius-md);font-size:13px;color:var(--gvs-fg-2);line-height:1.55}
.nt-fallback .material-symbols-rounded{font-size:19px;color:var(--gvs-fg-3);flex:none;margin-top:1px}
.nt-fallback b{font-weight:600;color:var(--gvs-fg-1)}

/* table variant of the same list */
.nt-srv-table .nt-branch{display:inline-flex;align-items:center;gap:8px;padding-left:22px;position:relative}
.nt-srv-table .nt-branch::before{content:"";position:absolute;left:6px;top:-14px;bottom:50%;width:10px;border-left:1px solid var(--gvs-border-strong);border-bottom:1px solid var(--gvs-border-strong);border-bottom-left-radius:6px}

/* empty state — a fresh install sends no mail at all */
.nt-nomail{border:1px solid color-mix(in srgb,var(--gvs-warning-500) 40%,var(--gvs-border));border-radius:var(--gvs-radius-lg);background:var(--gvs-surface);overflow:hidden;text-align:center;padding:44px 24px}
.nt-nomail .nt-nm-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:var(--gvs-warning-50);color:var(--gvs-warning-700)}
.nt-nomail .nt-nm-icon .material-symbols-rounded{font-size:30px}
.nt-nomail h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--gvs-fg-1)}
.nt-nomail p{margin:0 auto 20px;font-size:14px;color:var(--gvs-fg-2);max-width:44ch;line-height:1.6}

/* ---------- Test send ----------------------------------------------------- */
.nt-test{margin-top:32px}
.nt-test-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.nt-test-row .mh-input{flex:1;min-width:220px}
.nt-test-row .mh-btn{height:46px;flex:none}
.nt-test-row .us-select select{height:46px}
.nt-result{margin-top:14px;border-radius:var(--gvs-radius-md);border:1px solid var(--gvs-border);overflow:hidden}
.nt-result-head{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:14px;font-weight:600}
.nt-result-head .material-symbols-rounded{font-size:20px}
.nt-result.ok{border-color:color-mix(in srgb,var(--gvs-success-500) 40%,var(--gvs-border))}
.nt-result.ok .nt-result-head{background:var(--gvs-success-50);color:var(--gvs-success-700)}
.nt-result.fail{border-color:color-mix(in srgb,var(--gvs-danger-500) 40%,var(--gvs-border))}
.nt-result.fail .nt-result-head{background:var(--gvs-danger-50);color:var(--gvs-danger-700)}
[data-theme="dark"] .nt-result.ok .nt-result-head{color:var(--gvs-success-500)}
[data-theme="dark"] .nt-result.fail .nt-result-head{color:var(--gvs-danger-500)}
.nt-verbatim{margin:0;padding:12px 14px;background:var(--gvs-surface-sunken);font-family:var(--gvs-font-mono);font-size:12.5px;line-height:1.6;color:var(--gvs-fg-2);white-space:pre-wrap;word-break:break-word;border-top:1px solid var(--gvs-divider)}
.nt-verbatim-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gvs-fg-3);padding:10px 14px 0;background:var(--gvs-surface-sunken)}

/* ---------- Dialog: auth mode + secrets ----------------------------------- */
.nt-auth{display:grid;gap:8px}
.nt-auth-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);text-align:left;width:100%;transition:border-color var(--gvs-dur-fast),background var(--gvs-dur-fast)}
.nt-auth-opt:hover{border-color:var(--gvs-border-strong);background:var(--gvs-surface-alt)}
.nt-auth-opt.on{border-color:var(--gvs-primary);background:var(--gvs-primary-weak)}
.nt-auth-opt .nt-radio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--gvs-border-strong);display:grid;place-items:center}
.nt-auth-opt.on .nt-radio{border-color:var(--gvs-primary)}
.nt-auth-opt.on .nt-radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gvs-primary)}
.nt-auth-opt .nt-ao-t{font-size:14px;font-weight:600;color:var(--gvs-fg-1)}
.nt-auth-opt .nt-ao-s{font-size:12.5px;color:var(--gvs-fg-3);margin-top:1px}

/* the three secret states */
.nt-secret-stored{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--gvs-border);border-radius:var(--gvs-radius-md);background:var(--gvs-surface-alt)}
.nt-secret-stored .material-symbols-rounded{font-size:20px;color:var(--gvs-success-500)}
.nt-secret-stored .nt-ss-t{flex:1;font-size:13.5px;font-weight:600;color:var(--gvs-fg-1)}
.nt-secret-stored.clearing{border-color:color-mix(in srgb,var(--gvs-danger-500) 40%,var(--gvs-border));background:var(--gvs-danger-50)}
.nt-secret-stored.clearing .material-symbols-rounded{color:var(--gvs-danger-500)}
[data-theme="dark"] .nt-secret-stored.clearing .nt-ss-t{color:var(--gvs-danger-500)}
.nt-linkbtn{font-size:13px;font-weight:600;color:var(--gvs-primary);padding:5px 8px;border-radius:var(--gvs-radius-sm);transition:background var(--gvs-dur-fast)}
.nt-linkbtn:hover{background:var(--gvs-primary-weak)}
.nt-linkbtn.danger{color:var(--gvs-danger-500)}
.nt-linkbtn.danger:hover{background:var(--gvs-danger-50)}
.nt-secret-new{border:1px solid var(--gvs-primary);border-radius:var(--gvs-radius-md);padding:12px 14px;background:var(--gvs-primary-weak)}
.nt-secret-new .mh-input{background:var(--gvs-surface)}
.nt-secret-new .nt-sn-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.nt-secret-new .nt-sn-t{font-size:12.5px;font-weight:700;color:var(--gvs-primary)}

/* ---------- Delivery log -------------------------------------------------- */
.nt-log-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.nt-log-toolbar .mh-search{width:min(300px,60vw)}
.nt-filters{display:flex;gap:6px;flex-wrap:wrap}
.nt-fchip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--gvs-radius-pill);border:1px solid var(--gvs-border);font-size:13px;font-weight:600;color:var(--gvs-fg-2);background:var(--gvs-surface);transition:border-color var(--gvs-dur-fast),background var(--gvs-dur-fast)}
.nt-fchip:hover{border-color:var(--gvs-border-strong)}
.nt-fchip.on{background:var(--gvs-fg-1);border-color:var(--gvs-fg-1);color:var(--gvs-bg)}
.nt-fchip .nt-fn{font-size:11.5px;opacity:.75}

.nt-st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:4px 11px 4px 8px;border-radius:var(--gvs-radius-pill);white-space:nowrap}
.nt-st .material-symbols-rounded{font-size:16px}
.nt-st.sent{color:var(--gvs-success-700);background:var(--gvs-success-50)}
.nt-st.pending{color:var(--gvs-info-700);background:var(--gvs-info-50)}
.nt-st.failed{color:var(--gvs-danger-700);background:var(--gvs-danger-50)}
.nt-st.blocked{color:var(--gvs-fg-2);background:var(--gvs-surface-sunken)}
[data-theme="dark"] .nt-st.sent{color:var(--gvs-success-500)}
[data-theme="dark"] .nt-st.pending{color:var(--gvs-info-500)}
[data-theme="dark"] .nt-st.failed{color:var(--gvs-danger-500)}

.nt-recip{display:flex;align-items:center;gap:9px;min-width:0}
.nt-recip .nt-chan{flex:none;font-size:18px;color:var(--gvs-fg-3)}
.nt-recip .nt-rt{min-width:0}
.nt-recip .nt-to{font-size:14px;font-weight:600;color:var(--gvs-fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-recip .nt-subj{font-size:12.5px;color:var(--gvs-fg-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nt-scroll .nt-log{min-width:860px}
@media(max-width:700px){.nt-scroll{overflow-x:visible}.nt-scroll .nt-log{min-width:0}}
.nt-app{font-family:var(--gvs-font-mono);font-size:12px;color:var(--gvs-fg-2);background:var(--gvs-surface-sunken);border-radius:var(--gvs-radius-xs);padding:3px 7px;display:inline-block;word-break:break-word}
.nt-when{font-size:13px;color:var(--gvs-fg-2)}
.nt-when .nt-when-s{display:block;font-size:11.5px;color:var(--gvs-fg-3);margin-top:2px}

.nt-att{display:flex;align-items:center;gap:8px;white-space:nowrap}
.nt-att-n{font-size:13px;font-weight:600;color:var(--gvs-fg-2);font-variant-numeric:tabular-nums}
.nt-att-bar{width:44px;height:5px;border-radius:3px;background:var(--gvs-surface-sunken);overflow:hidden;flex:none}
.nt-att-bar i{display:block;height:100%;background:var(--gvs-fg-3);border-radius:3px}
.nt-att.warn .nt-att-bar i{background:var(--gvs-warning-500)}
.nt-att.spent .nt-att-bar i{background:var(--gvs-danger-500)}

.nt-retry{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--gvs-radius-sm);font-size:13px;font-weight:600;color:var(--gvs-fg-2);border:1px solid var(--gvs-border-strong);background:var(--gvs-surface);transition:border-color var(--gvs-dur-fast),color var(--gvs-dur-fast),background var(--gvs-dur-fast)}
.nt-retry:hover{border-color:var(--gvs-primary);color:var(--gvs-primary);background:var(--gvs-primary-weak)}
.nt-retry .material-symbols-rounded{font-size:17px}
.nt-rowbtn{width:32px;height:32px;border-radius:var(--gvs-radius-sm);display:grid;place-items:center;color:var(--gvs-fg-3);transition:background var(--gvs-dur-fast),transform var(--gvs-dur-fast)}
.nt-rowbtn:hover{background:var(--gvs-surface-sunken);color:var(--gvs-fg-1)}
.nt-rowbtn.open{transform:rotate(180deg)}
.nt-log-row.has-error{cursor:pointer}
.nt-exp-cell{padding:0 !important;background:var(--gvs-surface-alt)}
.nt-exp{padding:16px 20px 18px;display:grid;gap:14px}
.nt-exp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.nt-exp-grid dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gvs-fg-3);margin-bottom:3px}
.nt-exp-grid dd{margin:0;font-size:13.5px;color:var(--gvs-fg-1)}
.nt-exp-err{border:1px solid color-mix(in srgb,var(--gvs-danger-500) 30%,var(--gvs-border));border-radius:var(--gvs-radius-md);overflow:hidden}
.nt-exp-err .nt-verbatim{border-top:none}

/* drawer variant */
.nt-drawer-scrim{position:fixed;inset:0;z-index:95;background:rgba(10,26,46,.4)}
.nt-drawer{position:fixed;top:0;right:0;bottom:0;z-index:96;width:min(440px,100%);background:var(--gvs-surface);border-left:1px solid var(--gvs-border);box-shadow:var(--gvs-elev-5);display:flex;flex-direction:column;animation:nt-slide var(--gvs-dur-slow) var(--gvs-ease-decelerate)}
@keyframes nt-slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.nt-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--gvs-divider)}
.nt-drawer-head h3{margin:0;font-size:17px;font-weight:700;color:var(--gvs-fg-1)}
.nt-drawer-head .nt-dh-sub{font-size:13px;color:var(--gvs-fg-3);margin-top:3px}
.nt-drawer-body{padding:20px 22px;overflow-y:auto;flex:1;display:grid;gap:18px;align-content:start}
.nt-drawer-foot{padding:14px 22px;border-top:1px solid var(--gvs-divider);background:var(--gvs-surface-alt);display:flex;justify-content:flex-end;gap:10px}
.nt-dl{display:grid;gap:12px}
.nt-dl-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline}
.nt-dl-row dt{font-size:12.5px;color:var(--gvs-fg-3);font-weight:600}
.nt-dl-row dd{margin:0;font-size:13.5px;color:var(--gvs-fg-1);word-break:break-word}

/* mobile collapse for the log — same card pattern as the other Suite tables */
@media(max-width:700px){
  .nt-log tbody tr{display:grid;grid-template-columns:1fr auto;gap:9px 12px;padding:14px 16px;border-bottom:1px solid var(--gvs-divider);align-items:center}
  .nt-log thead{display:none}
  .nt-log,.nt-log tbody{display:block;width:100%}
  .nt-log tbody td{display:block;padding:0 !important;border:none !important;min-width:0}
  .nt-log tbody td.nt-c-recip{grid-column:1/-1;order:1}
  .nt-log tbody td.nt-c-status{grid-column:1;order:2;justify-self:start}
  .nt-log tbody td.nt-c-act{grid-column:2;order:3;justify-self:end;text-align:right}
  .nt-log tbody td.nt-c-meta{grid-column:1/-1;order:4;display:flex !important;gap:10px;flex-wrap:wrap;align-items:center}
  .nt-log tbody td.nt-c-hide{display:none !important}
  .nt-log tbody td.nt-exp-cell{grid-column:1/-1;order:5;margin:4px -16px -14px;background:var(--gvs-surface-alt)}
  .nt-exp{padding:14px 16px}
  .nt-log-toolbar .mh-search{width:100%}
  .nt-filters{width:100%}
}


/* ---- borrowed from the design kit's security.css ---- */
.sc-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--gvs-radius-md);font-size:13.5px;line-height:1.55;margin-bottom:16px}
.sc-alert .material-symbols-rounded{font-size:20px;flex:none}
.sc-alert.bad{background:var(--gvs-danger-50);color:var(--gvs-danger-700);border:1px solid color-mix(in srgb,var(--gvs-danger-500) 30%,transparent)}
.sc-alert.warn{background:var(--gvs-warning-50);color:var(--gvs-warning-700);border:1px solid color-mix(in srgb,var(--gvs-warning-500) 30%,transparent)}
.sc-alert.good{background:var(--gvs-success-50);color:var(--gvs-success-700);border:1px solid color-mix(in srgb,var(--gvs-success-500) 30%,transparent)}
.sc-alert.info{background:var(--gvs-info-50);color:var(--gvs-info-700);border:1px solid color-mix(in srgb,var(--gvs-info-500) 30%,transparent)}
.sc-alert pre{margin:6px 0 0;font-family:var(--gvs-font-mono);font-size:12px;white-space:pre-wrap;opacity:.9}


/* Push: the service-account key field. A stored key is never sent to the browser, so the
   field is either a state line with replace/remove, or an empty box — never a pre-filled
   input that would be posted back as whatever placeholder it was showing. */
.nt-keystate{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--gvs-border);
    border-radius:var(--gvs-radius-sm);background:var(--gvs-surface-alt);font-size:13.5px;
    font-weight:600;color:var(--gvs-fg-2);flex-wrap:wrap}
.nt-keystate .material-symbols-rounded{font-size:20px;color:var(--gvs-success-700)}
.nt-keystate > span{flex:1}

.nt-keybox{width:100%;min-height:120px;padding:12px 14px;border:1px solid var(--gvs-border-strong);
    border-radius:var(--gvs-radius-sm);background:var(--gvs-surface);color:var(--gvs-fg-1);
    font-family:var(--gvs-font-mono);font-size:12.5px;line-height:1.5;resize:vertical}
.nt-keybox:focus{outline:none;border-color:var(--gvs-primary);box-shadow:0 0 0 3px var(--gvs-primary-weak)}
.nt-keybox::placeholder{color:var(--gvs-fg-3)}

@media (max-width:600px){
    .nt-keystate{align-items:flex-start;flex-direction:column}
    .nt-keystate > span{flex:none}
}