/* Status layouts on top of COW's 2026-10 light theme (cow.css). Every rule is scoped to .status-app
   so the main COW pages are unaffected. Some rules reset legacy cow.css rules (black header, 70%-wide
   .button, underlined blue <button>). */
.status-app { margin:0; min-height:100vh; justify-content:flex-start; font-size:15px; color:#222; }

/* Header: cow.css paints <header> black with black text; the light theme then makes the logo/h1 dark. */
/* Single-line header: "COW" logo link + page title, e.g. "COW Network Service Status".
   clamp() shrinks the text on narrow screens so it stays on one line (~1.05rem on a 360px phone). */
.status-app header { display:flex; justify-content:center; align-items:baseline; gap:.3em; flex-wrap:nowrap;
  padding:10px 16px; background:#fff; color:#2b3a4a; border-bottom:3px solid #2b3a4a;
  font-size:clamp(1.05rem, 4.2vw, 1.6rem); line-height:1.2; white-space:nowrap; }
.status-app header #logo { color:#2b3a4a !important; font-size:1em; font-style:normal; font-weight:700; text-decoration:none; }
.status-app header h1 { font-size:1em; margin:0; color:#2b3a4a; overflow:hidden; text-overflow:ellipsis; }
.status-app h1 { color:#2b3a4a; }
.status-app h2 { color:#2b3a4a; margin-top:0; }

.status-app .status-main { display:block; width:min(1200px,94%); margin:24px auto; flex:1; }
.status-app footer { padding:24px; text-align:center; color:#2b3a4a; }

.status-app .toolbar,.status-app .summary { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.status-app .panel,.status-app .service-card { background:#fff; color:#222; padding:20px; border:1px solid #2b3a4a; border-radius:6px; margin-bottom:18px; }
.status-app .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }

/* Service cards: colored left edge carries the status */
.status-app .service-card { border-left:9px solid #8a63d2; margin:0; }
.status-app .service-card.Green { border-left-color:#2e9e4f; }
.status-app .service-card.Yellow { border-left-color:#e0a800; }
.status-app .service-card.Red { border-left-color:#d93025; }
.status-app .service-head { display:flex; align-items:center; gap:12px; }
.status-app .service-head h2 { margin:0; }
.status-app .service-head img { width:40px; height:40px; object-fit:contain; background:#fff; border:1px solid #e3e6ea; border-radius:4px; padding:4px; }
.status-app .service-card p { margin:10px 0; }
.status-app .service-card > .badge { margin-top:10px; }

/* Badges: dark text on a light tint so they read on white */
.status-app .badge { display:inline-block; padding:4px 10px; border:1px solid currentColor; border-radius:4px; font-weight:bold; }
.status-app .badge.Green { color:#1e7b34; background:#e6f4ea; }
.status-app .badge.Yellow { color:#8a5a00; background:#fff4d6; }
.status-app .badge.Red { color:#b42318; background:#fdecea; }
.status-app .badge.Purple { color:#5b3a9e; background:#f0eafb; }

/* Buttons: undo cow.css .button (width:70%; height:12px; text-shadow) and bare <button> (blue underlined link look) */
.status-app button,.status-app .button { width:auto !important; height:auto !important; box-sizing:border-box; display:inline-block;
  background:#fff; color:#2b3a4a !important; border:1px solid #2b3a4a; border-radius:6px; padding:8px 14px; cursor:pointer;
  font:inherit; font-weight:600; text-decoration:none !important; text-shadow:none; box-shadow:none; }
.status-app button:hover,.status-app .button:hover { background:#dfe9f5; }
.status-app .button[aria-current=page] { background:#2b3a4a; color:#fff !important; }
.status-app button.danger { border-color:#b42318; color:#b42318 !important; }
.status-app button.danger:hover { background:#fdecea; }

/* District Network menu (index.php): collapsible on phones, open row of links at >=768px.
   index.php keeps <details> open at that width; the toggle is hidden there. */
.status-app .net-menu { margin:0 0 16px; }
.status-app .net-menu > summary { display:inline-flex; align-items:center; gap:8px; list-style:none; cursor:pointer;
  padding:8px 14px; border:1px solid #2b3a4a; border-radius:6px; background:#fff; color:#2b3a4a; font-weight:600; user-select:none; }
.status-app .net-menu > summary::-webkit-details-marker { display:none; }
.status-app .net-menu > summary::before { content:"\2630"; font-size:1.1em; line-height:1; }
.status-app .net-menu[open] > summary { background:#2b3a4a; color:#fff; }
.status-app .net-menu ul { list-style:none; margin:8px 0 0; padding:0; border:1px solid #2b3a4a; border-radius:6px; overflow:hidden; background:#fff; }
.status-app .net-menu li + li { border-top:1px solid #e3e6ea; }
.status-app .net-menu a { display:block; padding:11px 14px; color:#0b3d91; text-decoration:none; font-weight:600; }
.status-app .net-menu a:hover { background:#dfe9f5; text-decoration:none; }
@media (min-width:768px) {
  .status-app .net-menu > summary { display:none; }
  .status-app .net-menu ul { display:flex; flex-wrap:wrap; margin:0; border:0; border-radius:0; background:none; border-bottom:2px solid #2b3a4a; }
  .status-app .net-menu li + li { border-top:0; }
  .status-app .net-menu a { padding:8px 9px; border-radius:6px 6px 0 0; white-space:nowrap; font-size:.93em; }
}

/* Forms */
.status-app label { display:block; margin:14px 0; }
.status-app input:not([type=checkbox]),.status-app textarea,.status-app select { display:block; box-sizing:border-box; width:100%; padding:9px 10px; margin-top:5px; color:#111; background:#fff; border:1px solid #9aa5b1; border-radius:4px; font:inherit; }
.status-app textarea { min-height:90px; }
.status-app .fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 20px; }
.status-app .login { max-width:400px; margin:40px auto; }
.status-app details > summary { cursor:pointer; font-weight:600; color:#2b3a4a; }

/* Notices */
.status-app .notice { padding:14px; margin-bottom:18px; border:1px solid #e3e6ea; border-left:5px solid #e0a800; background:#fffaf0; color:#222; border-radius:4px; }
.status-app .notice.error { border-left-color:#d93025; background:#fdecea; }
.status-app .notice.success { border-left-color:#2e9e4f; background:#e6f4ea; }

/* Tables (admin) */
.status-app .table-wrap { overflow-x:auto; }
.status-app table { width:100%; border-collapse:collapse; }
.status-app th,.status-app td { text-align:left; padding:10px 8px; border-bottom:1px solid #e3e6ea; vertical-align:top; }
.status-app th { background:#2b3a4a; color:#fff; }
.status-app tbody tr:nth-child(even) { background:#f7f8fa; }
.status-app td form { display:inline; }
.status-app td label { display:inline; margin:0 6px; }

.status-app .muted { color:#5a6573; font-size:.9em; }
.status-app .graph { width:100%; background:#fff; border:1px solid #e3e6ea; border-radius:4px; }
.status-app pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.status-app a:focus-visible,.status-app button:focus-visible,.status-app input:focus-visible { outline:3px solid #0b3d91; outline-offset:3px; }