/* Shared shell: sidebar + page frame, used by every page.
   Kept in one file rather than duplicated inline per page, because the sidebar
   has to look identical everywhere or it stops reading as one application. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --line: #262b35;
  --text: #e6e8ec;
  --muted: #8b93a1;
  --accent: #4f9cf9;
  --ok: #3ecf8e;
  --bad: #f2545b;
  --warn: #f2b955;
  --nav-w: 208px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

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

.shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
  width: var(--nav-w);
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar .brand {
  padding: 0 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.sidebar .brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}

.navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.navitem:hover { background: #0d1016; color: var(--text); }
.navitem[aria-current="page"] {
  background: #0d1016;
  color: var(--text);
  border-left-color: var(--accent);
}
.navitem .lab { font-size: 14px; }
.navitem .sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.navitem[aria-current="page"] .sub { color: var(--accent); }

/* Login state, so "am I connected?" is answerable from any page without
   navigating to find out. */
.navdot {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: var(--bad); margin-left: auto;
}
.navdot[data-state="in"] { background: var(--ok); }

.sidebar .foot {
  margin-top: auto;
  padding: 10px;
  font-size: 11px;
  color: var(--muted);
}

.main { flex: 1; min-width: 0; padding: 24px; }
.main > .inner { max-width: 1180px; }

/* Phone: the sidebar becomes a strip across the top. */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .sidebar .brand, .sidebar .foot { display: none; }
  .navitem { border-left: 0; border-bottom: 2px solid transparent; padding: 7px 10px; }
  .navitem[aria-current="page"] { border-left: 0; border-bottom-color: var(--accent); }
  .navitem .sub { display: none; }
  .main { padding: 16px; }
}

/* ---------------------------------------------------------------- shared bits */

h1 { font-size: 18px; margin: 0 0 16px; font-weight: 600; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.label {
  color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.muted { color: var(--muted); }
.bengali { font-size: 16px; line-height: 1.7; }

button {
  background: var(--accent); color: #06121f; border: 0; border-radius: 7px;
  padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer;
}
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
button:disabled { opacity: 0.4; cursor: default; }

input[type="text"], input[type="password"] {
  flex: 1; min-width: 160px; background: #0d1016; border: 1px solid var(--line);
  border-radius: 7px; padding: 9px 12px; color: var(--text); font-size: 14px;
}

.pill {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.pill.ok { color: var(--ok); border-color: #1f5c43; }
.pill.bad { color: var(--bad); border-color: #5c2226; }
.pill.warn { color: var(--warn); border-color: #5c4a22; }