*{box-sizing:border-box}
body{margin:0;background:#f3f4f6;color:#111827;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
header.branding-header{position:relative;background:#fff;padding:0;line-height:0;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.branding-header img{display:block;width:100%;height:auto;max-height:180px;object-fit:contain;object-position:center}

main{width:min(1600px,94vw);margin:28px auto}.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 10px #0000000a}
.login{max-width:460px;margin:70px auto;padding:28px}.login h2{margin-top:0}
form{display:grid;gap:16px}label{display:grid;gap:6px;font-size:13px;font-weight:650}
input,select{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:7px;background:#fff;font:inherit}
select[multiple]{min-height:140px}.filter-field{display:grid;gap:6px;font-size:13px;font-weight:650;position:relative}.filter-label{display:block}.status-state{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.status-filter{position:relative}.filter-select-button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;background:#fff;color:#111827;border:1px solid #d1d5db;padding:10px;border-radius:7px;font:inherit;font-weight:400}.filter-select-button .chevron{font-size:14px;color:#6b7280;transition:transform .15s}.filter-select-button[aria-expanded="true"] .chevron{transform:rotate(180deg)}.status-menu{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 5px);background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px #00000018;padding:6px}.status-menu label{display:flex;grid-template-columns:none;align-items:center;gap:9px;padding:9px 8px;border-radius:6px;font-weight:500;cursor:pointer}.status-menu label:hover{background:#f3f4f6}.status-menu input{width:16px;height:16px;padding:0;accent-color:#111827}button{padding:9px 14px;border:0;border-radius:7px;background:#111827;color:#fff;font-weight:650;cursor:pointer}
button:disabled{opacity:.5;cursor:wait}.secondary{background:#fff;color:#111827;border:1px solid #d1d5db}
.context{font-size:18px;font-weight:700;margin:0 0 14px}
.filters{padding:16px;display:grid;grid-template-columns:260px 240px auto auto 1fr;gap:12px;align-items:end}
.filters{transition:background-color .25s ease,border-color .25s ease}.filters-warning{background:#fef3c7;border-color:#f59e0b}.filters-critical{background:#fee2e2;border-color:#dc2626}
#count{padding:10px 2px;min-height:38px;color:#4b5563}.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #e5e7eb;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb}.sort-btn{background:transparent;color:#374151;border:0;padding:0;font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:750}.sort-indicator{display:inline-block;width:12px;margin-left:4px}.last-updated{font-size:13px;color:#6b7280;align-self:center;justify-self:end;white-space:nowrap}
th:nth-child(1){width:10%}th:nth-child(2){width:10%}th:nth-child(3){width:14%}
th:nth-child(4){width:10%}th:nth-child(5){width:39%}th:nth-child(6){width:17%}
td.message{white-space:normal;overflow-wrap:anywhere}
.priority,.badge{display:inline-flex;align-items:center;box-sizing:border-box;min-height:26px;padding:4px 8px;border-radius:999px;line-height:1.2;font-size:12px}.priority{font-weight:800;color:#fff}.priority-highest{background:#dc2626}.priority-high{background:#f97316}.priority-normal{background:#eab308;color:#111827}.priority-low{background:#111827}.priority-lowest{background:#111827}
.badge{background:#f3f4f6;font-weight:700}.status-escalated{background:#dc2626;color:#fff}
.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{font-size:12px;padding:7px 9px}
.action-dismiss{background:#6b7280}.action-escalate{background:#b91c1c}.action-managed{background:#047857}
.error{color:#b91c1c;font-size:13px}.empty{text-align:center;padding:35px;color:#6b7280}.hidden{display:none!important}
@media(max-width:900px){.filters{grid-template-columns:1fr 1fr}.last-updated{justify-self:start}table{min-width:1100px}}
@media(max-width:480px){.filters{grid-template-columns:1fr}}
.action-compact{display:none}
@media(max-width:700px){.actions{gap:4px;flex-wrap:nowrap}.actions button{padding:6px 8px;min-width:30px}.action-full{display:none}.action-compact{display:inline}.tablewrap{overflow-x:hidden}table{min-width:0;table-layout:fixed}th,td{padding:8px 6px}th:nth-child(1){width:10%}th:nth-child(2){width:10%}th:nth-child(3){display:none}td:nth-child(3){display:none}th:nth-child(4){width:20%}th:nth-child(5){width:auto}th:nth-child(6){width:86px}.sort-btn{font-size:11px;letter-spacing:0}.priority,.badge{min-height:24px;padding:3px 6px}.last-updated{white-space:normal}}
@media(min-width:701px){.priority,.badge{min-width:30px;justify-content:center}.sort-btn{white-space:nowrap}}
.status-compact{display:none}@media(max-width:700px){.status-full{display:none}.status-compact{display:inline}}

/* Narrow-screen refinements and notification detail screen */
.detail-screen{padding:20px}
.detail-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.detail-header h2{margin:0;flex:1}
.detail-grid{display:grid;grid-template-columns:180px 1fr;gap:0;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:20px}
.detail-label,.detail-value{padding:12px 14px;border-bottom:1px solid #e5e7eb}
.detail-label{font-weight:700;background:#f9fafb}
.detail-value{overflow-wrap:anywhere}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.detail-actions button{min-width:110px}
@media(max-width:700px){
  .tablewrap{overflow-x:hidden}
  table{width:100%;min-width:0;table-layout:fixed}
  th,td{padding:7px 5px;font-size:clamp(9px,2.7vw,13px)}
  th{font-size:clamp(8px,2.4vw,11px);letter-spacing:0;text-transform:uppercase;white-space:nowrap;overflow:hidden}
  .sort-btn{font-size:inherit;letter-spacing:0;white-space:nowrap;max-width:100%;overflow:hidden}
  th:nth-child(1){width:9%}th:nth-child(2){width:11%}th:nth-child(4){width:19%}th:nth-child(5){width:auto}th:nth-child(6){width:0}
  th:nth-child(6),td:nth-child(6){display:none}
  .priority,.badge{font-size:clamp(9px,2.5vw,12px);padding:2px 5px;min-height:22px}
  .detail-grid{grid-template-columns:105px 1fr}
  .detail-label,.detail-value{padding:9px 10px;font-size:13px}
  .detail-actions{display:grid;grid-template-columns:repeat(2,1fr)}
  .detail-actions button{min-width:0}
}


/* Site name and sign-out share the same row below the banner. */
.context-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}
.context-row .context{
  margin:0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.context-row .header-logout{
  position:static;
  flex:0 0 auto;
  margin:0;
  z-index:auto;
  white-space:nowrap;
}

@media(max-width:700px){
  .context-row .header-logout{
    padding:6px 9px;
    font-size:12px;
  }
}
@media(max-width:420px){
  .context-row{
    gap:8px;
  }
  .context-row .header-logout{
    padding:5px 7px;
    font-size:11px;
  }
}

.header-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.push-alerts{
  white-space:nowrap;
}
.push-enabled{
  background:#ecfdf5;
  border-color:#86efac;
  color:#166534;
}
@media(max-width:420px){
  .header-controls{gap:5px}
  .header-controls button{font-size:11px;padding:5px 7px}
}