.pwa-install-btn,
.push-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  border:1px solid rgba(11,59,54,.22);
  border-radius:13px;
  background:#fff;
  color:#0b3b36;
  font:inherit;
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(15,72,66,.1);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.pwa-install-btn[hidden]{display:none!important}
.pwa-install-btn:hover,
.push-toggle-btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#0f766e;
  box-shadow:0 12px 28px rgba(15,118,110,.18);
}
.pwa-install-btn:focus-visible,
.push-toggle-btn:focus-visible{
  outline:3px solid rgba(20,184,166,.3);
  outline-offset:2px;
}
.pwa-install-btn svg,
.push-toggle-btn svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* The login-page install button previously inherited pale button colors. */
.login-toolbar .pwa-install-btn{
  min-width:112px;
  min-height:40px;
  padding:9px 15px;
  border-color:#0f766e!important;
  background:linear-gradient(135deg,#0f766e,#0b5d57)!important;
  color:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
  box-shadow:0 12px 30px rgba(15,118,110,.3)!important;
}
.login-toolbar .pwa-install-btn:hover{
  border-color:#134e4a!important;
  background:linear-gradient(135deg,#0d9488,#0f766e)!important;
  color:#fff!important;
}

.topbar .pwa-install-btn{
  background:color-mix(in srgb,var(--surface, #fff) 92%,#dff7f2 8%);
  color:var(--text,#14302c);
  border-color:var(--border,#d7e3df);
  box-shadow:none;
}

.push-toggle-btn{
  position:relative;
  border-color:rgba(15,118,110,.24);
  background:rgba(240,253,250,.96);
  color:#0f5f58;
  box-shadow:none;
}
.push-toggle-btn i[data-push-indicator]{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.16);
}
.push-toggle-btn[data-push-state="enabled"]{
  border-color:rgba(5,150,105,.32);
  background:#ecfdf5;
  color:#047857;
}
.push-toggle-btn[data-push-state="enabled"] i[data-push-indicator]{
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.17);
}
.push-toggle-btn[data-push-state="denied"],
.push-toggle-btn[data-push-state="unsupported"]{
  background:#f8fafc;
  color:#64748b;
  border-color:#e2e8f0;
}
.push-toggle-btn[data-push-state="denied"] i[data-push-indicator]{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.14)}
.push-toggle-btn[data-push-state="install-first"]{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.push-toggle-btn[data-push-state="install-first"] i[data-push-indicator]{background:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.14)}
.push-toggle-btn[data-push-state="loading"]{opacity:.72;cursor:wait}

[data-theme="dark"] .pwa-install-btn,
[data-theme="dark"] .topbar .pwa-install-btn{
  background:rgba(18,42,39,.9);
  color:#dff3ef;
  border-color:rgba(223,243,239,.22);
}
[data-theme="dark"] .push-toggle-btn{
  background:rgba(17,49,45,.92);
  color:#b9f2e8;
  border-color:rgba(45,212,191,.24);
}
[data-theme="dark"] .push-toggle-btn[data-push-state="enabled"]{
  background:rgba(6,78,59,.7);
  color:#a7f3d0;
}
[data-theme="dark"] .push-toggle-btn[data-push-state="install-first"]{
  background:rgba(124,45,18,.48);
  color:#fed7aa;
  border-color:rgba(251,146,60,.35);
}

.pwa-help-backdrop{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(5,20,18,.68);
  backdrop-filter:blur(5px);
}
.pwa-help-dialog{
  width:min(440px,100%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:22px;
  background:#fff;
  color:#17312e;
  padding:27px;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
}
.pwa-help-dialog h2{margin:0 0 11px;font-size:22px;line-height:1.25}
.pwa-help-dialog p{margin:0 0 14px;color:#5b706d;line-height:1.65}
.pwa-help-dialog ol{margin:14px 0 20px;padding-left:22px;color:#29413e;line-height:1.75}
.pwa-help-dialog button{
  width:100%;
  border:0;
  border-radius:12px;
  background:#0b3b36;
  color:#fff;
  padding:12px 16px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
[data-theme="dark"] .pwa-help-dialog{background:#132522;color:#eef9f6;border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .pwa-help-dialog p,
[data-theme="dark"] .pwa-help-dialog ol{color:#b7cac6}

.pwa-live-toast-stack{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:10040;
  width:min(390px,calc(100vw - 32px));
  display:grid;
  gap:10px;
  pointer-events:none;
}
.pwa-live-toast{
  pointer-events:auto;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 30px;
  align-items:start;
  gap:12px;
  padding:14px;
  border:1px solid #dbe8e4;
  border-left:4px solid #0f766e;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  color:#18312d;
  box-shadow:0 20px 55px rgba(15,23,42,.2);
  animation:pwaToastIn .24s ease-out both;
}
.pwa-live-toast.priority-high{border-left-color:#d97706}
.pwa-live-toast.priority-urgent{border-left-color:#dc2626}
.pwa-live-toast.is-leaving{opacity:0;transform:translateY(8px);transition:.22s ease}
.pwa-live-toast-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#e8faf6;
  color:#0f766e;
}
.pwa-live-toast-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pwa-live-toast-copy{min-width:0}
.pwa-live-toast-copy strong{display:block;margin:1px 0 5px;font-size:14px;line-height:1.35;color:inherit}
.pwa-live-toast-copy p{margin:0;color:#5b6f6b;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.pwa-live-toast-copy a{display:inline-flex;margin-top:8px;color:#0f766e;font-size:12px;font-weight:800;text-decoration:none}
.pwa-live-toast-close{width:28px;height:28px;border:0;border-radius:9px;background:#f1f5f4;color:#60736f;font-size:20px;line-height:1;cursor:pointer}
[data-theme="dark"] .pwa-live-toast{background:rgba(18,37,34,.98);color:#edf9f6;border-color:#2f4b46;border-left-color:#2dd4bf}
[data-theme="dark"] .pwa-live-toast-copy p{color:#b8cbc7}
[data-theme="dark"] .pwa-live-toast-icon{background:#173f38;color:#5eead4}
[data-theme="dark"] .pwa-live-toast-close{background:#263d39;color:#d3e4e0}
@keyframes pwaToastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.push-settings-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding:18px;
  border:1px solid #cfe7e1;
  border-radius:16px;
  background:linear-gradient(135deg,#f0fdfa,#ffffff);
}
.push-settings-copy{display:flex;align-items:flex-start;gap:13px;min-width:min(100%,420px)}
.push-settings-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:14px;background:#ccfbf1;color:#0f766e}
.push-settings-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.push-settings-copy strong{display:block;margin:1px 0 5px;font-size:16px;color:#15322d}
.push-settings-copy p{margin:0;color:#60736f;font-size:13px;line-height:1.55}
.push-settings-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.push-test-btn{min-height:42px;padding:9px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.push-test-btn:disabled{opacity:.45;cursor:not-allowed}
[data-theme="dark"] .push-settings-card{background:linear-gradient(135deg,#102f2a,#162824);border-color:#31514a}
[data-theme="dark"] .push-settings-copy strong{color:#ecfdf9}
[data-theme="dark"] .push-settings-copy p{color:#afc5c0}
[data-theme="dark"] .push-test-btn{background:#1b302c;color:#dcebe8;border-color:#3a5650}

@media(max-width:1100px){
  .topbar .pwa-install-btn span,
  .topbar .push-toggle-btn span{display:none}
  .topbar .pwa-install-btn,
  .topbar .push-toggle-btn{width:42px;padding:9px}
  .topbar .push-toggle-btn i[data-push-indicator]{position:absolute;right:5px;top:5px;width:7px;height:7px}
}
@media(max-width:560px){
  .login-toolbar{gap:7px!important}
  .login-toolbar .pwa-install-btn{min-width:40px;width:40px;padding:8px}
  .login-toolbar .pwa-install-btn span{display:none}
  .pwa-live-toast-stack{right:12px;bottom:12px;width:calc(100vw - 24px)}
  .push-settings-card{align-items:stretch;padding:15px}
  .push-settings-actions{width:100%}
  .push-settings-actions .push-toggle-btn,
  .push-settings-actions .push-test-btn{flex:1}
}

/* =====================================================================
   MOBILE PWA HEADER + PUSH STATUS — 2026-07-29 v3
   Loaded after app.css so it neutralizes earlier conflicting mobile rules.
===================================================================== */
.push-status-message{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #d7e3df;
  border-radius:11px;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}
.push-status-message[data-status="success"]{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.push-status-message[data-status="warning"]{border-color:#fde68a;background:#fffbeb;color:#92400e}
.push-status-message[data-status="error"]{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.push-status-message[data-status="loading"]{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.push-diagnostic-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}
.push-diagnostic-item{
  min-width:0;
  padding:10px 11px;
  border:1px solid #dbe8e4;
  border-radius:11px;
  background:#fff;
}
.push-diagnostic-item span{display:block;margin-bottom:4px;color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.push-diagnostic-item strong{display:block;overflow:hidden;color:#16332e;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .push-status-message{background:#172b27;border-color:#35514b;color:#c3d7d2}
[data-theme="dark"] .push-diagnostic-item{background:#172b27;border-color:#35514b}
[data-theme="dark"] .push-diagnostic-item span{color:#9fb8b2}
[data-theme="dark"] .push-diagnostic-item strong{color:#ecfdf9}

@media(max-width:760px){
  body.app-body{padding-top:0!important}
  .topbar{
    min-height:auto!important;
    height:auto!important;
    position:sticky!important;
    top:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    padding:max(10px,env(safe-area-inset-top)) 12px 10px!important;
    background:color-mix(in srgb,var(--ui-surface,#fff) 96%,transparent)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
  }
  .topbar-left{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .topbar .menu-toggle{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border-radius:12px!important;
  }
  .topbar .page-title{flex:1 1 auto!important;min-width:0!important}
  .topbar .page-eyebrow,
  .topbar .page-title p{display:none!important}
  .topbar .page-title h1{
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:17px!important;
    line-height:1.25!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .topbar-actions{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    padding:6px!important;
    border:1px solid color-mix(in srgb,var(--ui-border,#dbe7e3) 82%,transparent)!important;
    border-radius:14px!important;
    background:color-mix(in srgb,var(--ui-surface-soft,#f4f8f7) 90%,transparent)!important;
  }
  /* Enable/Install controls remain available on the Notifications page.
     Removing them from the tiny header prevents the odd multi-column wrap. */
  .topbar .push-toggle-btn,
  .topbar .pwa-install-btn,
  .topbar .user-box{display:none!important}
  .topbar .lang-pill{
    order:1!important;
    width:auto!important;
    height:40px!important;
    grid-column:auto!important;
    flex:0 0 auto!important;
    padding:3px!important;
    border-radius:12px!important;
  }
  .topbar .lang-pill a{
    min-width:34px!important;
    padding:7px 8px!important;
    font-size:10px!important;
    line-height:1!important;
  }
  .topbar .notification-btn,
  .topbar .theme-toggle,
  .topbar .logout-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    grid-column:auto!important;
    flex:0 0 40px!important;
    padding:0!important;
    border-radius:12px!important;
  }
  .topbar .notification-btn{order:2!important}
  .topbar .theme-toggle{order:3!important}
  .topbar .logout-btn{order:4!important}
  .topbar .logout-btn span{display:none!important}
  .topbar .notification-btn span{
    top:-4px!important;
    right:-4px!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 4px!important;
    font-size:9px!important;
  }
  .push-settings-card{display:block!important;padding:15px!important}
  .push-settings-copy{min-width:0!important;width:100%!important}
  .push-settings-actions{width:100%!important;margin-top:14px!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .push-settings-actions .push-toggle-btn,
  .push-settings-actions .push-test-btn{width:100%!important;min-width:0!important}
  .push-diagnostic-grid{grid-template-columns:1fr!important}
}

@media(max-width:420px){
  .topbar{padding-inline:9px!important}
  .topbar-actions{justify-content:space-between!important}
  .topbar .lang-pill{margin-right:auto!important}
  .topbar .page-title h1{font-size:16px!important}
  .push-settings-actions{grid-template-columns:1fr!important}
}