/*
 * The console behind the door.
 *
 * The palette is inherited from `nfc-audio/server/public/app.css` unchanged -
 * the same variables with the same names, so a component moved from one to the
 * other keeps its colours. The reasoning there still holds and is worth
 * repeating: **committed to one dark look, no light variant on purpose.** What
 * is on this screen is what gets described to someone on the phone.
 *
 * `login.css` covers the four screens in front of the door and is loaded on its
 * own. This file is everything after signing in.
 */

:root {
  --bg: #0D1219;
  --card: #141b23;
  --line: #1e2a33;
  --text: #F5F8F8;
  --dim: #7d8b96;
  --accent: #2DD4BF;
  --accent-deep: #0E7C7B;
  --good: #2DD4BF;
  --warn: #E0A340;
  --bad: #E05B5B;
  --radius: 10px;
  --page: 1100px;
}

/*
 * Same note as the panel in `tap`, and the same bug it prevents: any `display`
 * in a rule below outranks the `hidden` attribute's own `display: none`. This
 * shell hides flex and grid containers by attribute everywhere, and without
 * this line they all paint at once and it reads as broken routing rather than
 * as one missing line of CSS.
 */
[hidden] { display: none !important; }

/* ---------------- the shell ---------------- */

/*
 * `login.css` centres one card in the middle of the viewport with a flex
 * body. The shell is a full page and needs that undone - which is a class on
 * the body rather than a second stylesheet, so that signing out puts the door
 * back exactly as it was without a reload.
 */
body.shell-mode {
  display: block;
  align-items: initial;
  justify-content: initial;
  padding: 0;
}

body.shell-mode > main { display: none; }


#shell {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 20px 60px;
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--line);
}

.top .brand { display: flex; align-items: center; gap: 14px; }
.top .brand img { height: 30px; display: block; }

.top .who {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--dim);
  font-size: 13px;
}

nav.modules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0 22px;
}

nav.modules a {
  color: var(--dim);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
}

nav.modules a:hover { color: var(--text); border-color: var(--line); }

nav.modules a[aria-current="page"] {
  color: var(--bg);
  background: var(--accent);
  font-weight: 600;
}

/*
 * A module that is planned but not built is shown and not hidden, and it is not
 * clickable. Hiding it would mean the navigation silently changes shape as the
 * console is built, and somebody looking for "אתרים" would conclude it does not
 * exist rather than that it is not ready.
 */
nav.modules span.soon {
  color: #4a5560;
  padding: 7px 14px;
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  cursor: default;
}

/* ---------------- components ---------------- */

#shell .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 18px;
}

#shell .card > h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}

#shell .card > .sub {
  margin: 0 0 16px;
  color: var(--dim);
  font-size: 13px;
}

#shell .card > :last-child { margin-bottom: 0; }

#shell .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* Tiles. Numbers that answer a question, not a report. */
#shell .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

#shell .tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

#shell .tile b {
  display: block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

#shell .tile span {
  color: var(--dim);
  font-size: 13px;
}

/* The wrapper the table lives in. Its own scrollbar rather than the page ones. */
#shell .scroll { overflow-x: auto; }

#shell table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#shell th, #shell td {
  text-align: right;
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

#shell th {
  color: var(--dim);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}

#shell tr:last-child td { border-bottom: none; }

#shell td.num { font-variant-numeric: tabular-nums; }

/* Pills. One shape, three meanings, and the colour is never the only signal -
   every pill also carries a word. */
#shell .pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid;
}

#shell .pill.good { color: var(--good); border-color: rgba(45, 212, 191, .35); background: rgba(45, 212, 191, .08); }
#shell .pill.warn { color: var(--warn); border-color: rgba(224, 163, 64, .35); background: rgba(224, 163, 64, .08); }
#shell .pill.bad { color: var(--bad);  border-color: rgba(224, 91, 91, .35);  background: rgba(224, 91, 91, .08); }
#shell .pill.mute { color: var(--dim);  border-color: var(--line); }

/* Issues. The list that matters most on the dashboard. */
#shell .issue {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

#shell .issue:last-child { border-bottom: none; }
#shell .issue .who { color: var(--dim); font-size: 12px; white-space: nowrap; }
#shell .issue .what { flex: 1; }
#shell .issue .id { color: #4a5560; font-size: 11px; font-family: ui-monospace, Consolas, monospace; }

#shell button.quiet {
  width: auto;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

#shell button.quiet:hover { color: var(--text); border-color: var(--dim); }
#shell button.quiet:disabled { opacity: .5; cursor: default; }

#shell .dim { color: var(--dim); }

/* The read-at line under a screen. Its own class rather than a style
   attribute: the page's CSP is `style-src 'self'`, which blocks an inline
   style as firmly as it blocks an inline script. */
#shell .foot { color: var(--dim); text-align: center; font-size: 12px; }
#shell .mono {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  /* A command line is one long unbreakable token. Without this it sets the
     width of the card it is in, and the card sets the width of the page. */
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: left;
}

#shell .msg {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid;
}

#shell .msg.good { color: var(--good); border-color: rgba(45, 212, 191, .3); background: rgba(45, 212, 191, .06); }
#shell .msg.warn { color: var(--warn); border-color: rgba(224, 163, 64, .3); background: rgba(224, 163, 64, .06); }
#shell .msg.bad { color: var(--bad);  border-color: rgba(224, 91, 91, .3);  background: rgba(224, 91, 91, .06); }

/* An empty state is written, never blank. A screen with nothing on it reads as
   broken, and a screen that reads as broken stops being opened. */
#shell .empty {
  color: var(--dim);
  padding: 22px 0;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 640px) {
  #shell .top { padding: 16px 0 14px; }
  #shell th, #shell td { padding: 9px 6px; }
  #shell .hide-narrow { display: none; }
}