/* SEA Leitstelle. Colours and font follow the SEA website (D:\APPS\SEA\web\assets\settings.css). */

@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-display: swap;
  src: url('fonts/chakra-petch-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-display: swap;
  src: url('fonts/chakra-petch-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap;
  src: url('fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap;
  src: url('fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }

:root {
  --ground: #13181E; --surface: #181E25; --surface-2: #1F262E; --surface-3: #262E38;
  --text: #E7EBF1; --text-muted: #A0AAB8; --text-faint: #6B7686;
  --accent: #F2913F; --accent-hi: #F9A155; --on-accent: #1C1304;
  --online-fg: #5FCB9A; --online-tint: rgba(61,174,126,.14);
  --danger: #D85543; --danger-fg: #EE8576; --danger-tint: rgba(216,85,67,.15);
  --info-fg: #8FBCEB; --info-tint: rgba(78,143,212,.14);
  --outline: #323B47; --outline-soft: #232B34;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, .brand { font-family: 'Chakra Petch', system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
a { color: var(--accent-hi); }
p { margin: 0 0 .75rem; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.hint { margin-top: .75rem; }

header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 16px; border-bottom: 1px solid var(--outline-soft); background: var(--surface);
}
.brand { color: var(--text); text-decoration: none; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.brand span { color: var(--accent); }
.brand img { width: 24px; height: 24px; }
header.top nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
header.top nav a { text-decoration: none; }

main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.narrow { max-width: 440px; margin: 8vh auto 0; }

.card {
  background: var(--surface); border: 1px solid var(--outline-soft); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}

.notice { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid transparent; }
.notice.ok { background: var(--online-tint); color: var(--online-fg); border-color: rgba(61,174,126,.35); }
.notice.err { background: var(--danger-tint); color: var(--danger-fg); border-color: rgba(216,85,67,.4); }
.notice.info { background: var(--info-tint); color: var(--info-fg); border-color: rgba(78,143,212,.35); }

label { display: block; margin-bottom: .35rem; color: var(--text-muted); font-size: .9rem; }
input[type=text], input[type=email], select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--outline);
  background: var(--surface-2); color: var(--text); font: inherit;
}
input:focus, select:focus, button:focus-visible, a.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .grow { flex: 1 1 220px; }

button, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--outline);
  background: var(--surface-3); color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; min-height: 42px;
}
button:hover, a.button:hover { background: #2d3641; }
button.primary, a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover, a.button.primary:hover { background: var(--accent-hi); }
button.discord, a.button.discord { background: #5865F2; border-color: #5865F2; color: #fff; }
button.discord:hover, a.button.discord:hover { background: #4752c4; }
button.danger { background: transparent; border-color: rgba(216,85,67,.5); color: var(--danger-fg); }
button.danger:hover { background: var(--danger-tint); }
button.link { background: none; border: none; padding: 0; min-height: 0; color: var(--accent-hi); font-weight: 400; }
.wide { width: 100%; }
form.inline { display: inline; }

.divider { display: flex; align-items: center; gap: .75rem; color: var(--text-faint); margin: 18px 0; font-size: .875rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--outline-soft); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--outline-soft); vertical-align: middle; }
th { color: var(--text-muted); font-weight: 500; font-size: .875rem; }
td.actions { text-align: right; white-space: nowrap; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; background: var(--surface-3); color: var(--text-muted); }
.badge.owner { background: rgba(242,145,63,.13); color: var(--accent-hi); }

.accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.accounts a { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--outline-soft); border-radius: var(--radius);
  color: var(--text); text-decoration: none; }
.accounts a:hover { border-color: var(--accent); }

.copy { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: .85rem; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--radius); padding: 10px 12px; }

footer { text-align: center; color: var(--text-faint); font-size: .8rem; padding: 24px 16px; }

input[type=password] {
  width: 100%; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--outline);
  background: var(--surface-2); color: var(--text); font: inherit;
}
.servers { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.servers a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--outline-soft); border-radius: var(--radius);
  color: var(--text); text-decoration: none; }
.servers a:hover { border-color: var(--accent); }
.state { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.state::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em;
  background: currentColor; vertical-align: .05em; }
.state.ok { color: var(--online-fg); }
.state.err { color: var(--danger-fg); }
.state.info { color: var(--info-fg); }
.state.off { color: var(--text-faint); }
details.add summary, details.more summary { cursor: pointer; color: var(--accent-hi); font-weight: 600; margin: 4px 0 12px; }
.code { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 1.4rem; letter-spacing: .08em;
  color: var(--accent-hi); background: var(--surface-2); border: 1px solid var(--outline); border-radius: var(--radius);
  padding: 10px 14px; display: inline-block; user-select: all; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.facts dt { color: var(--text-muted); }
dl.facts dd { margin: 0; }
label.check { display: flex; align-items: center; gap: .5rem; color: var(--text); margin-bottom: 12px; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 20px; }
ul.plain, ul.feed { list-style: none; margin: 0; padding: 0; }
ul.plain li { display: flex; justify-content: space-between; gap: 1rem; padding: 6px 0; border-bottom: 1px solid var(--outline-soft); }
ul.feed li { padding: 5px 0; border-bottom: 1px solid var(--outline-soft); overflow-wrap: anywhere; }
ul.plain li:last-child, ul.feed li:last-child { border-bottom: none; }
.nowrap { white-space: nowrap; }