/* Raiden GUI. Visual spec: the Apollo style guide (Tailwind v3 gray/blue palette). */

:root {
  color-scheme: light;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-bright: #3b82f6;
  --brand-muted: #60a5fa;

  --canvas: #ffffff;
  --canvas-subtle: #f9fafb;
  --hover: #f9fafb;
  --hover-strong: #f3f4f6;
  --chip: #f3f4f6;
  --border: #e5e7eb;
  --border-strong: #d1d5db;

  --text: #111827;
  --text-title: #1f2937;
  --text-body: #374151;
  --text-secondary: #6b7280;
  --text-button: #4b5563;
  --text-muted: #9ca3af;
  --link: #2563eb;
  --link-hover: #1e40af;
  --danger: #dc2626;

  --input-bg: #ffffff;
  --input-text: #111827;
  --placeholder: #9ca3af;

  --wash-blue: #eff6ff;
  --toggle-border: #93c5fd;
  --toggle-text: #1d4ed8;

  --pill-neutral-bg: #f3f4f6; --pill-neutral: #374151;
  --pill-info-bg: #dbeafe;    --pill-info: #1d4ed8;
  --pill-success-bg: #d1fae5; --pill-success: #047857;
  --pill-warning-bg: #fef3c7; --pill-warning: #b45309;
  --pill-danger-bg: #fee2e2;  --pill-danger: #b91c1c;

  --banner-success-bg: #ecfdf5; --banner-success-border: #d1fae5; --banner-success: #065f46;
  --banner-error-bg: #fef2f2;   --banner-error-border: #fecaca;   --banner-error: #991b1b;
  --banner-info-bg: #eff6ff;    --banner-info-border: #dbeafe;    --banner-info: #1e40af;

  --danger-border: #fca5a5;
  --danger-text: #b91c1c;
  --danger-hover: #fee2e2;

  --sidebar: #111827;
  --code-bg: #f1f5f9;
  --code-text: #0f172a;

  --shadow-float: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dark mode is the guide's remap of the light utilities, not a second palette. */
html.dark {
  color-scheme: dark;
  --canvas: #111827;
  --canvas-subtle: #1f2937;
  --hover: #1f2937;
  --hover-strong: #374151;
  --chip: #1f2937;
  --border: #374151;
  --border-strong: #4b5563;
  --text: #f3f4f6;
  --text-title: #e5e7eb;
  --text-body: #d1d5db;
  --text-secondary: #9ca3af;
  --text-button: #9ca3af;
  --link: #60a5fa;
  --link-hover: #93c5fd;
  --input-bg: #111827;
  --input-text: #e5e7eb;
  --placeholder: #6b7280;
  --wash-blue: #1f2937;
  --toggle-border: #1d4ed8;
  --toggle-text: #60a5fa;
  --pill-neutral-bg: #1f2937; --pill-neutral: #d1d5db;
  --pill-info-bg: rgb(30 58 138 / 0.55); --pill-info: #93c5fd;
  --pill-success-bg: rgb(6 78 59 / 0.55); --pill-success: #6ee7b7;
  --pill-warning-bg: rgb(120 53 15 / 0.55); --pill-warning: #fcd34d;
  --pill-danger-bg: rgb(127 29 29 / 0.55); --pill-danger: #fca5a5;
  --banner-success-bg: rgb(6 78 59 / 0.35); --banner-success-border: #065f46; --banner-success: #a7f3d0;
  --banner-error-bg: rgb(127 29 29 / 0.35); --banner-error-border: #7f1d1d; --banner-error: #fecaca;
  --banner-info-bg: #1f2937; --banner-info-border: #374151; --banner-info: #93c5fd;
  --danger-border: #7f1d1d;
  --danger-text: #fca5a5;
  --danger-hover: rgb(127 29 29 / 0.35);
  --code-bg: #1f2937;
  --code-text: #e5e7eb;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; transition: color 150ms; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); }
code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.125em 0.35em;
  border-radius: 0.25em;
  font-size: 0.875em;
  overflow-wrap: anywhere;
}
.icon { flex: none; display: inline-block; vertical-align: middle; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
[hidden] { display: none !important; }

/* ---------- Shell ---------- */

.shell { min-height: 100%; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 256px;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
.sidebar-head {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid #374151;
  flex: none;
}
.logo-tile {
  width: 28px; height: 28px;
  border-radius: 18.75%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
}
.wordmark { color: #fff; font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; }
.sidebar nav { padding: 12px; overflow-y: auto; flex: 1; }
.nav-label {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 12px 8px;
  font-size: 11px; line-height: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #6b7280;
}
.nav-label:first-child { margin-top: 4px; }
.nav-company {
  margin: 4px 12px 8px;
  color: #9ca3af; font-size: 12px; line-height: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  font-size: 14px; font-weight: 500;
  color: #d1d5db;
  transition: background-color 150ms, color 150ms;
}
.nav-item:hover { background: #1f2937; color: #fff; }
.nav-item.active, .nav-item.active:hover { background: var(--brand); color: #fff; }
.nav-empty { margin: 4px 12px 8px; color: #6b7280; font-size: 12px; line-height: 16px; }

.column { margin-left: 256px; min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.topbar .spacer { flex: 1; }
main.page {
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); z-index: 20; }
.topbar .menu-button { display: none; }

/* ---------- Page header ---------- */

.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.page-title { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text); }
.page-sub { margin-top: 2px; color: var(--text-secondary); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 14px; }
.back-link:hover { color: var(--text-body); }

/* ---------- Buttons ---------- */

.btn, .btn-secondary, .btn-danger, .btn-icon, .btn-text {
  font: inherit;
  font-size: 14px; line-height: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  white-space: nowrap;
}
.btn { background: var(--brand); color: #fff; border: 1px solid transparent; padding: 6px 12px; font-weight: 500; }
.btn:hover { background: var(--brand-hover); color: #fff; }
.btn-secondary { background: transparent; color: var(--text-button); border: 1px solid var(--border); padding: 6px 10px; }
.btn-secondary:hover { background: var(--hover); color: var(--text-button); }
.btn-secondary[aria-pressed="true"] { background: var(--wash-blue); border-color: var(--toggle-border); color: var(--toggle-text); }
.btn-danger { background: transparent; color: var(--danger-text); border: 1px solid var(--danger-border); padding: 6px 10px; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-icon { background: transparent; border: 0; color: var(--text-button); padding: 8px; border-radius: 4px; }
.btn-icon:hover { background: var(--hover-strong); }
.btn-text { background: none; border: 0; padding: 0; color: var(--text-secondary); }
.btn-text:hover { color: var(--text-body); }
.btn-block { width: 100%; border-radius: 4px; padding: 8px 12px; }
button:disabled { opacity: 0.5; cursor: default; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-bright); }

/* ---------- Cards, tables, empty states ---------- */

.card { background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; }
.card-body { padding: 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-title); }
.card-note { color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.card.danger-zone { border-color: var(--danger-border); }
.table-wrap { overflow-x: auto; }
.card > .table-wrap:first-child table, .card > table:first-child { border-top-left-radius: 8px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.data thead { background: var(--canvas-subtle); }
table.data th {
  text-align: left; padding: 8px 12px;
  font-size: 12px; line-height: 16px; font-weight: 600;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
table.data td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--text-body); }
table.data tbody tr:hover { background: var(--hover); }
table.data td.primary { color: var(--text-title); font-weight: 500; }
table.data td.right, table.data th.right { text-align: right; }
table.data td.gutter { width: 1%; white-space: nowrap; text-align: right; }
table.data tr.row-link { cursor: pointer; }
.empty {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
}
.card .empty { margin: 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat { padding: 12px 16px; }
.stat-label { color: var(--text-secondary); font-size: 14px; }
.stat-value { margin-top: 4px; font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-foot { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 12px; line-height: 16px; font-weight: 500;
  white-space: nowrap;
}
.pill-neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral); }
.pill-info { background: var(--pill-info-bg); color: var(--pill-info); }
.pill-success { background: var(--pill-success-bg); color: var(--pill-success); }
.pill-warning { background: var(--pill-warning-bg); color: var(--pill-warning); }
.pill-danger { background: var(--pill-danger-bg); color: var(--pill-danger); }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: currentColor; }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span.label, .label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-body); }
.field .hint { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input:not([type]), select, textarea {
  width: 100%;
  font: inherit; font-size: 14px; line-height: 20px;
  padding: 8px 12px;
  background: var(--input-bg); color: var(--input-text);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: box-shadow 150ms;
}
select { padding-right: 32px; }
textarea { min-height: 128px; resize: vertical; font-family: var(--font-mono); font-size: 13px; }
::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-bright); border-color: transparent; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-body); cursor: pointer; }
.check input { width: auto; margin: 0; accent-color: var(--brand); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-section { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.form-section + .form-section { border-top: 1px solid var(--border); }
.section-label {
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.form-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--canvas-subtle); border-radius: 0 0 8px 8px; }
.inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-form select, .inline-form input { width: auto; min-width: 140px; padding-top: 6px; padding-bottom: 6px; }

/* Key/value definition list for credentials and details. */
dl.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; }
dl.kv dt, dl.kv dd { padding: 8px 16px; border-top: 1px solid var(--border); }
dl.kv dt:first-of-type, dl.kv dd:first-of-type { border-top: 0; }
dl.kv dt { color: var(--text-secondary); }
dl.kv dd { margin: 0; color: var(--text-body); display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.secret { font-family: var(--font-mono); letter-spacing: 0.05em; }

/* ---------- Banners (flash) ---------- */

.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 8px; border: 1px solid;
  font-size: 14px;
}
.banner .icon { margin-top: 1px; }
.banner-success { background: var(--banner-success-bg); border-color: var(--banner-success-border); color: var(--banner-success); }
.banner-error { background: var(--banner-error-bg); border-color: var(--banner-error-border); color: var(--banner-error); }
.banner-info { background: var(--banner-info-bg); border-color: var(--banner-info-border); color: var(--banner-info); }
.banner .dismiss { margin-left: auto; color: inherit; opacity: 0.7; padding: 0; }
.banner .dismiss:hover { opacity: 1; background: none; }

/* ---------- Menus and dialogs ---------- */

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; top: calc(100% + 4px); z-index: 50;
  min-width: 200px; padding: 4px 0;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-float);
}
.menu-panel.right { right: 0; }
.menu-panel.left { left: 0; }
.menu-head { padding: 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-head .who { color: var(--text-title); font-weight: 500; overflow-wrap: anywhere; }
.menu-section { padding: 6px 12px 2px; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 12px; font: inherit; font-size: 14px; text-align: left;
  background: none; border: 0; color: var(--text-body); cursor: pointer;
}
.menu-item:hover { background: var(--hover); color: var(--text-body); }
.menu-item.current { color: var(--link); font-weight: 500; }
.menu-item .check-mark { margin-left: auto; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

.switcher {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-title); font-weight: 500;
  max-width: 280px;
}
.switcher:hover { background: var(--hover); }
.switcher .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.avatar-button { padding: 2px; border-radius: 999px; display: inline-flex; }
.avatar-button:hover { background: var(--hover-strong); }

dialog.dialog {
  border: 0; padding: 0;
  width: calc(100% - 32px); max-width: 28rem;
  background: var(--canvas); color: var(--text);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}
dialog.dialog.wide { max-width: 32rem; }
html.dark dialog.dialog, html.dark .menu-panel { border: 1px solid var(--border); }
dialog.dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.dialog-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Login ---------- */

.login-canvas { min-height: 100%; background: var(--canvas-subtle); display: grid; place-items: center; padding: 16px; }
.login-card {
  width: 100%; max-width: 24rem;
  background: var(--canvas); border-radius: 8px; padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 16px;
}
html.dark .login-card { border: 1px solid var(--border); }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand .logo-tile { width: 36px; height: 36px; font-size: 19px; }
.login-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--text); }

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .sidebar { transform: translateX(-100%); transition: transform 200ms; }
  body.nav-open .sidebar { transform: none; }
  .column { margin-left: 0; }
  .topbar .menu-button { display: inline-flex; }
  .topbar { padding-left: 8px; padding-right: 8px; }
  main.page { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .form-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .switcher { max-width: 180px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  main.page { padding: 16px; }
}
@media (max-width: 639px) {
  input, select, textarea { font-size: 16px; }
  .btn, .btn-secondary, .btn-danger { min-height: 40px; }
}