/* sitehealth.css -- Site Health dashboard (SiteHealth.aspx / SiteHealthMobile.aspx). Scoped under .shl-wrap,
 * explicit colors everywhere (the mobile pages default to white text on a dark body), no Tailwind needed. */
.shl-wrap { box-sizing: border-box; max-width: 1100px; margin: 0 auto; padding: 16px 14px 48px; color: #111827; background: #f3f4f6; border-radius: 14px; font-family: inherit; }
.shl-wrap *, .shl-wrap *::before, .shl-wrap *::after { box-sizing: border-box; }
.shl-mobile { max-width: none; border-radius: 0; padding: 12px 12px 40px; min-height: 100vh; }
.shl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.shl-head h1 { margin: 0; font-size: 22px; font-weight: 800; color: #111827; }
.shl-head p { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.shl-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.shl-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.shl-tab { flex: 1 1 0; min-width: 90px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: #374151; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; cursor: pointer; }
.shl-tab.on { background: #1e40af; color: #fff; border-color: #1e40af; }

.shl-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 14px; color: #111827; }
.shl-center { text-align: center; padding: 28px 18px; }
.shl-h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #111827; }
.shl-h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .04em; }
.shl-hint { margin: 0 0 12px; font-size: 13px; color: #6b7280; }
.shl-muted { color: #6b7280; font-size: 12px; }

.shl-btn { display: inline-block; padding: 9px 14px; font-size: 13px; font-weight: 700; border-radius: 9px; border: 1px solid #d1d5db; background: #fff; color: #1f2937; cursor: pointer; text-decoration: none; }
.shl-btn:hover { background: #f9fafb; }
.shl-btn[disabled] { opacity: .55; cursor: default; }
.shl-btn-primary { background: #1e40af; border-color: #1e40af; color: #fff; }
.shl-btn-primary:hover { background: #1d3a9e; }
.shl-seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: 9px; overflow: hidden; background: #fff; }
.shl-seg button { padding: 8px 12px; font-size: 13px; font-weight: 700; border: 0; background: #fff; color: #374151; cursor: pointer; border-right: 1px solid #e5e7eb; }
.shl-seg button:last-child { border-right: 0; }
.shl-seg button.on { background: #1e40af; color: #fff; }

.shl-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px; font-weight: 800; font-size: 16px; }
.shl-banner small { display: block; font-weight: 600; font-size: 12px; opacity: .85; margin-top: 2px; }
.shl-banner-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.shl-banner-warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.shl-banner-fail { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.shl-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.shl-dot-ok { background: #16a34a; } .shl-dot-warn { background: #f59e0b; } .shl-dot-fail { background: #dc2626; }

.shl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.shl-tile { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; }
.shl-tile b { display: block; font-size: 22px; font-weight: 800; color: #111827; line-height: 1.15; }
.shl-tile span { font-size: 12px; color: #6b7280; font-weight: 600; }

.shl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.shl-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 9px; background: #fafafa; font-size: 13px; color: #1f2937; min-width: 0; }
.shl-chip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.shl-chip .ms { font-size: 11px; color: #6b7280; flex: 0 0 auto; }
.shl-chip.warn { background: #fffbeb; border-color: #fde68a; }
.shl-chip.fail { background: #fef2f2; border-color: #fecaca; }
.shl-chip .why { display: block; font-size: 11px; font-weight: 500; color: #991b1b; white-space: normal; }

.shl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shl-table th { text-align: left; padding: 6px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
.shl-table td { padding: 7px 8px; border-bottom: 1px solid #f3f4f6; color: #1f2937; vertical-align: middle; }
.shl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.shl-scroll { overflow-x: auto; }
.shl-bar { height: 8px; background: #e5e7eb; border-radius: 6px; overflow: hidden; min-width: 70px; }
.shl-bar > i { display: block; height: 100%; background: #3b82f6; border-radius: 6px; }
.shl-bar > i.warn { background: #f59e0b; } .shl-bar > i.fail { background: #dc2626; }
.shl-tag { display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 800; border-radius: 6px; background: #e5e7eb; color: #374151; }
.shl-tag.m { background: #dbeafe; color: #1e40af; }
.shl-tag.err { background: #fee2e2; color: #991b1b; }
.shl-ev-DOWN, .shl-ev-ALERT_FAIL { color: #991b1b; font-weight: 800; } .shl-ev-UP { color: #166534; font-weight: 800; } .shl-ev-START, .shl-ev-END { color: #1e40af; font-weight: 800; }

.shl-spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding-top: 6px; }
.shl-spark div { flex: 1 1 0; min-width: 2px; background: #3b82f6; border-radius: 2px 2px 0 0; position: relative; }
.shl-spark div.err { background: #dc2626; }
.shl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shl-code { font-family: Consolas, monospace; font-size: 12px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 7px; padding: 6px 8px; word-break: break-all; display: block; margin: 4px 0 8px; color: #111827; }
.shl-note { padding: 8px 10px; border-radius: 8px; font-size: 13px; margin-top: 8px; }
.shl-note.ok { background: #dcfce7; color: #166534; } .shl-note.bad { background: #fee2e2; color: #991b1b; }
.shl-details summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #374151; }
.shl-unused { columns: 3 190px; font-size: 12px; color: #374151; margin-top: 8px; }
@media (max-width: 800px) { .shl-cols { grid-template-columns: 1fr; } }

/* Mobile master header: the other mobile pages load Tailwind, whose preflight caps every <img> at
 * max-width:100%. That cap keeps the wide logo image from pushing the hamburger button off screen on
 * narrow phones; this page doesn't load Tailwind, so restore the cap (same fix as roadpo.css). */
.navbar-fixed-top .navbar-brand { min-width: 0; flex: 0 1 auto; }
.navbar-fixed-top .navbar-brand img { max-width: 100%; }
.navbar-fixed-top .manual-toggle { flex: 0 0 auto; }

/* Site.Master's SAAQ popup is styled only by Tailwind utility classes, and this desktop page does not load
 * Tailwind -- without these rules the popup renders unstyled under the footer. Same look, no CDN needed. */
#saaqAlertModal.hidden { display: none; }
#saaqAlertModal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); }
#saaqAlertModal > div { width: 100%; max-width: 32rem; background: #fff; border-radius: 16px; border-top: 8px solid #dc2626; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); overflow: hidden; }
#saaqAlertModal > div > div:first-child { padding: 24px; }
#saaqAlertModal > div > div:first-child > div:first-child { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#saaqAlertModal span.text-3xl { font-size: 30px; line-height: 1; }
#saaqAlertModal h3 { margin: 0; font-size: 20px; font-weight: 900; color: #1f2937; text-transform: uppercase; letter-spacing: -.025em; }
#saaqAlertModal p { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: #6b7280; }
#saaqAlertList { max-height: 15rem; overflow-y: auto; padding-right: 8px; }
#saaqAlertList > div { display: flex; justify-content: space-between; align-items: center; padding: 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid; }
#saaqAlertList .bg-red-100 { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
#saaqAlertList .bg-orange-100 { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
#saaqAlertList .font-black { font-weight: 900; font-size: 14px; }
#saaqAlertList .uppercase { font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: .8; }
#saaqAlertList > div > span { font-size: 9px; font-weight: 900; padding: 4px 8px; background: rgba(255,255,255,.5); border-radius: 8px; }
#saaqAlertModal > div > div:last-child { display: flex; justify-content: flex-end; padding: 16px; background: #f9fafb; }
#saaqAlertModal button { background: #1f2937; color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .1em; padding: 12px 32px; border: 0; border-radius: 12px; cursor: pointer; }
#saaqAlertModal button:hover { background: #000; }

/* Activity + Adoption tabs */
.shl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.shl-filters input, .shl-filters select { padding: 8px 10px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; min-width: 0; max-width: 100%; }
.shl-filters input.f-text { flex: 2 1 200px; } .shl-filters input.f-user { flex: 1 1 120px; } .shl-filters select { flex: 1 1 140px; } .shl-filters input[type=date] { flex: 1 1 130px; }
.shl-act-cat { display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 800; border-radius: 6px; background: #e5e7eb; color: #374151; }
.shl-act-cat.auth { background: #dbeafe; color: #1e40af; } .shl-act-cat.order { background: #dcfce7; color: #166534; }
.shl-act-cat.account { background: #fef3c7; color: #92400e; } .shl-act-cat.admin { background: #ede9fe; color: #5b21b6; } .shl-act-cat.notify { background: #fce7f3; color: #9d174d; }
.shl-act-bad { color: #b91c1c; font-weight: 700; }
.shl-hours { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: 6px; }
.shl-hours div { flex: 1 1 0; min-width: 4px; background: #3b82f6; border-radius: 2px 2px 0 0; }
.shl-hours-lbl { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; margin-top: 2px; }
.shl-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #e5e7eb; margin: 8px 0; }
.shl-split i { display: block; height: 100%; } .shl-split i.a { background: #3b82f6; } .shl-split i.b { background: #f59e0b; }
.shl-act-wrap td { word-break: break-word; }