/* Servility Software Portal: light look (Brad, 30 Oct 2026: white is easier on the eye), per the Servility Brand
   Identity Guidelines v1.0. Montserrat (Arial fallback), Servility Dark text, Primary Blue for actions, Signal Teal
   (darkened for reading on white) for labels, Accent Purple used sparingly. The logo is the supplied full-colour
   horizontal artwork; the name is never typed as a logo. */
:root {
  color-scheme: light;
  --bg: #F4F6F9; --rail: #FFFFFF; --panel: #FFFFFF; --panel-2: #F4F6F9; --line: #DFE4EB;
  --teal: #4E8584; --teal-2: #3F7574; --grey: #6B7280;
  --fg: #131720; --muted: #5B6476; --menu: #3D4656; --sel: #E6F0FF;
  --blue: #3B8CFF; --blue-2: #1F6FE0; --purple: #954ECA; --purple-2: #6E2FA3;
  --ok: #2F8B57; --ok-t: #1E6E43; --warn: #D68800; --warn-t: #8A5A00; --bad: #C94343; --bad-t: #A12C2C; --off: #9AA3B2;
  --font: "Montserrat", Arial, Helvetica, sans-serif; --mono: Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.5; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
h1 { font-size: 26px; font-weight: 800; margin: 0; } h2 { font-size: 18px; font-weight: 700; margin: 0; }
.muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: var(--mono); font-size: 13px; }
.err { color: var(--bad-t); font-size: 13px; margin: 0; min-height: 1em; }

.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.card { box-shadow: 0 1px 2px rgba(19,23,32,.05); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.narrow { width: 100%; max-width: 380px; }
label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-2); }
input, select, textarea { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }

.brand { display: flex; flex-direction: column; }
.brand { gap: 14px; } /* clear space around the logo (guidelines section 05) */
.brand .logo { width: 200px; max-width: 100%; height: auto; display: block; }
.brand span { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); padding-left: 2px; }

.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.rail { flex: 1 1 220px; background: var(--rail); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.who { display: flex; flex-direction: column; padding: 0 4px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 8px; color: var(--menu); display: flex; justify-content: space-between; gap: 8px; }
.menu button:hover { background: var(--panel-2); }
.menu button[aria-current="true"] { background: var(--sel); color: var(--fg); font-weight: bold; box-shadow: inset 0 0 0 1px var(--blue); }
.menu .soon { font-size: 11px; color: var(--muted); }
.rail > .btn { margin-top: auto; }
main { flex: 999 1 560px; min-width: 0; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { main { padding: 24px 32px 48px; } }

.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 14px; }
.tabs button[aria-selected="true"] { border-color: var(--blue); background: var(--sel); font-weight: 700; }
.tabs button.help[aria-selected="true"] { border-color: var(--teal); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-size: 28px; font-variant-numeric: tabular-nums; }
.stat.bad { border-color: var(--bad); } .stat.warn { border-color: var(--warn); }
.grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .grid { grid-template-columns: minmax(0, 1fr); } }

.btn { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 12px; }
.btn:hover:not(:disabled) { border-color: var(--blue); }
/* Brand guidelines: blue is for graphics and large text, so button text is Servility Dark on blue (contrast about 5.5:1). */
.btn.primary { background: var(--blue); border-color: var(--blue); color: #131720; font-weight: 700; }
.btn.danger { border-color: var(--bad); color: var(--bad-t); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }

.pill { display: inline-block; font-size: 12px; font-weight: bold; padding: 1px 9px; border-radius: 99px; white-space: nowrap; }
.pill.ok { background: rgba(47,139,87,.14); color: var(--ok-t); } .pill.warn { background: rgba(214,136,0,.16); color: var(--warn-t); }
.pill.bad { background: rgba(201,67,67,.13); color: var(--bad-t); } .pill.off { background: rgba(107,114,128,.16); color: #4B5466; }
.pill.purple { background: rgba(149,78,202,.13); color: var(--purple-2); } .pill.blue { background: rgba(59,140,255,.13); color: var(--blue-2); }

.strip { display: flex; gap: 4px; flex-wrap: wrap; }
.seg { cursor: pointer; flex: 1 1 90px; min-height: 54px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); padding: 6px 8px; border-top: 5px solid var(--off); text-align: left; }
.seg.ok { border-top-color: var(--ok); } .seg.warn { border-top-color: var(--warn); } .seg.bad { border-top-color: var(--bad); }
.seg.dis { border-top-color: var(--purple); } .seg.sel { box-shadow: 0 0 0 2px var(--blue); }
.seg small { display: block; color: var(--muted); font-size: 11px; }

.alarm { border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 10px; padding: 12px; background: #FDF1F1; display: flex; flex-direction: column; gap: 8px; }
.alarm.ack { border-left-color: var(--warn); background: #FFF8EA; }
.empty { color: var(--muted); padding: 14px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 620px; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.toast { position: fixed; right: 16px; bottom: 16px; background: var(--panel-2); border: 1px solid var(--blue); border-radius: 10px; padding: 10px 14px; max-width: calc(100vw - 32px); }
.help p, .help ul { max-width: 68ch; }
#pdBody { display: flex; flex-direction: column; gap: 16px; }
.pw { position: relative; }
.pw input { padding-right: 46px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--fg); background: var(--panel-2); }

/* People & cards */
ul.plain { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.inline-form select, .inline-form input { flex: 1 1 180px; width: auto; }
.inline-form .err { width: 100%; margin: 0; }