/* SYS-GS Service Desk: a service-desk look in the style of ServiceNow UI16 (dark banner, dark navigator, light content). */
:root { --banner:#293e40; --nav:#303a46; --nav-hi:#3f4a57; --accent:#81b5a1; --link:#1f6fb2; --line:#d7dbde; --bg:#f6f7f8;
  --muted:#6b7680; --wn:#e9a33a; --cm:#5b9bd5; --ok:#2e8540; --err:#c0392b; }
* { box-sizing:border-box; }
body { margin:0; font:13px/1.45 "Source Sans Pro","Segoe UI",Helvetica,Arial,sans-serif; color:#2e3d49; background:#fff; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:18px; font-weight:600; margin:0; } h2 { font-size:14px; font-weight:600; margin:0 0 10px; }
.muted { color:var(--muted); }

/* banner */
.top { height:48px; background:var(--banner); color:#fff; display:flex; align-items:center; gap:16px; padding:0 16px; position:sticky; top:0; z-index:2; }
.brand { color:#fff; font-size:17px; letter-spacing:.2px; } .brand b { color:var(--accent); font-weight:600; } .brand:hover { text-decoration:none; }
.sim { font-size:10px; text-transform:uppercase; letter-spacing:1px; background:rgba(255,255,255,.12); padding:2px 6px; border-radius:3px; }
.gsearch { margin-left:auto; } .gsearch input { width:260px; padding:6px 10px; border-radius:15px; border:0; background:rgba(255,255,255,.14); color:#fff; }
.gsearch input::placeholder { color:#c9d3d4; }
.clock { font-size:12px; color:#c9d3d4; }
.who { display:flex; align-items:center; gap:8px; }
button.link { background:none; border:0; color:#dfe7e8; cursor:pointer; font:inherit; } button.link:hover { text-decoration:underline; }

/* navigator */
.shell { display:flex; min-height:calc(100vh - 48px); }
.side { width:248px; flex:none; background:var(--nav); color:#e4e8eb; padding:10px 0 30px; }
.side-title { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#9fb0bb; padding:6px 18px 10px; }
.side .app { font-weight:600; padding:10px 18px 4px; color:#fff; border-top:1px solid #3c4753; }
.side ul { list-style:none; margin:0 0 6px; padding:0; }
.side li a { display:block; color:#d5dde3; padding:5px 18px 5px 30px; } .side li a:hover { background:var(--nav-hi); text-decoration:none; color:#fff; }
main { flex:1; min-width:0; background:#fff; }

/* bars, lists */
.bar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--line); }
.bar .btns { margin-left:auto; display:flex; gap:6px; } .bar.foot { border-top:1px solid var(--line); border-bottom:0; }
.btn { display:inline-block; padding:5px 14px; border:1px solid #b9c0c6; border-radius:3px; background:#fff; color:#2e3d49; font:inherit; cursor:pointer; }
.btn:hover { background:#eef1f3; text-decoration:none; } .btn.primary { background:#1f6fb2; border-color:#1a5f99; color:#fff; } .btn.primary:hover { background:#1a5f99; }
.btn.wide { width:100%; padding:8px; }
.lsearch input { padding:5px 8px; border:1px solid var(--line); border-radius:3px; width:220px; }
.pager { margin-left:auto; display:flex; gap:10px; align-items:center; color:var(--muted); } .pager a, .pager span { font-size:14px; }
.crumb { padding:6px 16px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); }
table.list { width:100%; border-collapse:collapse; }
table.list th { text-align:left; font-weight:600; padding:7px 10px; border-bottom:2px solid var(--line); white-space:nowrap; background:#fff; }
table.list th a { color:#2e3d49; } table.list td { padding:6px 10px; border-bottom:1px solid #eceff1; vertical-align:top; }
table.list tbody tr:nth-child(even) { background:#fafbfb; } table.list tbody tr:hover { background:#eef6fb; }
.num { font-weight:600; } .empty { padding:24px 16px; color:var(--muted); }

/* badges */
.st { display:inline-block; padding:0 8px; border-radius:10px; font-size:12px; background:#e8ecef; white-space:nowrap; }
.st1 { background:#e3f0fb; color:#1f5e95; } .st2 { background:#fff3dc; color:#8a5a00; } .st3 { background:#efe7f8; color:#5e3b8a; }
.st6 { background:#e2f3e6; color:#1e6b33; } .st7 { background:#e8ecef; color:#4a5560; } .st8 { background:#f3e3e3; color:#8a2b2b; }
.pr::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:#9aa5ad; }
.pr1::before { background:#d9342b; } .pr2::before { background:#ef8b2c; } .pr3::before { background:#f2c12e; } .pr4::before { background:#5aa7de; }

/* dashboard */
.cards { display:grid; grid-template-columns:repeat(5, minmax(140px, 1fr)); gap:12px; padding:16px; }
.card { border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:4px; padding:14px; color:#2e3d49; background:#fff; }
.card:hover { text-decoration:none; box-shadow:0 1px 4px rgba(0,0,0,.12); } .card .n { font-size:30px; font-weight:300; } .card .l { color:var(--muted); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px; }
.panel { border:1px solid var(--line); border-radius:4px; padding:14px; margin:0 16px 14px; } .grid2 .panel { margin:0 0 14px; }
.meter-row { display:grid; grid-template-columns:110px 1fr 30px; align-items:center; gap:10px; margin:4px 0; } meter { width:100%; height:12px; }

/* forms */
.formbar h1 { font-size:17px; } .back { font-size:22px; color:#2e3d49; padding:0 6px; } .back:hover { text-decoration:none; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:4px 36px; padding:14px 24px; } .form.one { grid-template-columns:1fr; }
.fld { display:grid; grid-template-columns:34% 1fr; align-items:center; gap:10px; margin:3px 0; }
.fld.wide { grid-template-columns:17% 1fr; } .form.one .fld { grid-template-columns:17% 1fr; }
.fld label { text-align:right; color:#4a5560; }
.fld input, .fld select, .fld textarea { width:100%; padding:5px 8px; border:1px solid #c3cbd1; border-radius:3px; font:inherit; background:#fff; }
.fld textarea { resize:vertical; } .fld textarea.wn { background:#fffaf0; border-color:#f0c77e; }
.ro { padding:5px 8px; background:#f2f4f5; border:1px solid #e1e5e8; border-radius:3px; min-height:29px; white-space:pre-wrap; }
.atts { padding:8px 24px; border-bottom:1px solid var(--line); display:flex; gap:12px; flex-wrap:wrap; }
.sect { border-top:1px solid var(--line); } .sect h2 { padding:12px 24px 0; font-size:15px; }
.note { margin:10px 16px; padding:8px 12px; border-radius:3px; } .note.ok { background:#e2f3e6; color:var(--ok); } .note.err { background:#fbe6e4; color:var(--err); }

/* activity stream */
.stream { padding:0 24px 18px calc(17% + 34px); }
.act { display:flex; gap:10px; margin:10px 0; }
.act-body { flex:1; border:1px solid var(--line); border-left:4px solid #b8c1c8; border-radius:3px; padding:8px 12px; background:#fff; }
.act.work_notes .act-body { border-left-color:var(--wn); background:#fffcf5; } .act.comments .act-body { border-left-color:var(--cm); }
.act.opened .act-body { background:var(--bg); }
.act-head { display:flex; gap:10px; align-items:baseline; margin-bottom:4px; } .act-head .when { margin-left:auto; color:var(--muted); font-size:12px; }
.tag { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.txt { white-space:pre-wrap; font-family:inherit; } .fl { font-weight:600; } .was { color:var(--muted); font-size:12px; }
.av { width:30px; height:30px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:600; }
.av0 { background:#2e7d6f; } .av1 { background:#5b6abf; } .av2 { background:#c0703a; } .av3 { background:#7b5ea7; } .av4 { background:#2f7fb8; } .av5 { background:#8a8f2f; }
.who .av { width:26px; height:26px; }

/* login */
.login-body { background:var(--banner); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login { width:340px; background:#fff; border-radius:6px; padding:28px; box-shadow:0 8px 30px rgba(0,0,0,.3); }
.login-brand { font-size:22px; } .login-brand b { color:#2e7d6f; } .login-sub { color:var(--muted); margin:2px 0 18px; }
.login label { display:block; margin:0 0 12px; color:#4a5560; } .login input { display:block; width:100%; margin-top:4px; padding:8px; border:1px solid #c3cbd1; border-radius:3px; font:inherit; }
.login .err { background:#fbe6e4; color:var(--err); padding:8px; border-radius:3px; margin-bottom:12px; }
@media (max-width: 900px) { .side { display:none; } .cards { grid-template-columns:1fr 1fr; } .grid2, .form { grid-template-columns:1fr; } .stream { padding-left:24px; } }

/* reference notes (answer key) */
.refsect { background:#fbfaf5; } .refwrap { padding:0 24px 18px; } .refsect h2 { color:#7a5a00; }
.refbtns { display:flex; gap:8px; margin:10px 0; } .refnotes { margin-top:10px; } .refev { color:#7a5a00; }