/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Default icon size; contextual rules (.btn svg, .empty svg…) take precedence. */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ==========================================================================
   App shell
   ========================================================================== */

#app {
  height: 100%;
}

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "brand topbar"
    "sidebar main";
  height: 100vh;
  background: var(--surface);
}

.shell.is-collapsed {
  --sidebar-w: 60px;
}

/* Full-space workspaces (the assistant) own the whole viewport: they carry
   their own navigation and controls, so the shell chrome steps aside. */
.shell.is-fullspace {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "main";
}

.shell.is-fullspace .brand,
.shell.is-fullspace .sidebar,
.shell.is-fullspace .topbar {
  display: none;
}

/* -- brand ---------------------------------------------------------------- */
.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.brand-logo {
  flex: none;
  height: 31px;
  width: auto;
  max-width: 202px;
}

.brand-mark {
  display: none;
  flex: none;
  width: 30px;
  height: 30px;
}

/* Wordmark and mark are drawn in near-black: invert them on dark surfaces. */
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-mark {
  filter: invert(1) hue-rotate(180deg);
}

.brand-toggle {
  margin-left: auto;
}

.shell.is-collapsed .brand-logo {
  display: none;
}

.shell.is-collapsed .brand-mark {
  display: block;
  transition: opacity 0.12s ease;
}

/* Collapsed, the 60px rail only fits one control. The toggle covers the mark
   and fades in on hover, so the sidebar can always be reopened from where it
   was closed. Overlaying rather than swapping keeps the button in the tab
   order and makes the whole brand cell a valid click target. */
.shell.is-collapsed .brand {
  position: relative;
  justify-content: center;
  padding: 0;
}

.shell.is-collapsed .brand-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.shell.is-collapsed .brand:hover .brand-mark {
  opacity: 0;
}

.shell.is-collapsed .brand:hover .brand-toggle,
.shell.is-collapsed .brand:focus-within .brand-toggle {
  opacity: 1;
}

/* -- topbar --------------------------------------------------------------- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.topbar-spacer {
  flex: 1 1 auto;
}

.topbar-search {
  position: relative;
  width: 320px;
  max-width: 42vw;
}

.topbar-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 30px;
  font-size: var(--fs-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.topbar-search svg {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  pointer-events: none;
}

.topbar-search input:focus {
  background: var(--surface);
  border-color: var(--accent-border);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* -- sidebar -------------------------------------------------------------- */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.nav {
  flex: 1 1 auto;
  overflow-y: auto;
  /* A fixed-width rail never scrolls sideways: without this, `overflow-y`
     alone turns the horizontal axis into `auto` too. */
  overflow-x: hidden;
  padding: 10px 0 16px;
}

.nav-group {
  padding: 0 10px;
  margin-bottom: 14px;
}

.nav-group-label {
  padding: 0 8px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Kept in the flow so the groups keep their rhythm, but clipped: hidden text
   still lays out, and these single unbreakable words are far wider than the
   collapsed rail. */
.shell.is-collapsed .nav-group-label {
  visibility: hidden;
  height: 10px;
  overflow: hidden;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.nav-item svg {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

.nav-item-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell.is-collapsed .nav-item-label,
.shell.is-collapsed .nav-count {
  display: none;
}

.nav-count {
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 650;
  line-height: 16px;
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface-3);
  border-radius: 8px;
}

.nav-item.is-active .nav-count {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
}

.nav-count.is-alert {
  color: #fff;
  background: var(--orange-700);
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 9px 12px;
}

.account-block,
.rag-account {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* The identity block doubles as the entry point to the profile page. */
.account-identity {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 6px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.account-identity:hover {
  background: var(--surface-2);
}

.account-row.is-active .account-identity {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.account-meta {
  flex: 1;
  min-width: 0;
}

.account-meta strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-meta span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.user-avatar-lg {
  width: 46px;
  height: 46px;
  font-size: var(--fs-md);
}

.user-avatar-xl {
  width: 62px;
  height: 62px;
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
}

.profile-hero {
  overflow: hidden;
}

.profile-hero-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 18px;
}

.profile-hero-id h3 {
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.profile-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--border);
}

.profile-fact {
  min-width: 0;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
}

.profile-fact:last-child {
  border-right: 0;
}

.profile-fact-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.profile-fact-value {
  margin-top: 5px;
  font-size: var(--fs-md);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Both cards run to the same bottom edge: the bodies absorb the difference so
   the two footers stay on one line. */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.profile-grid > .card {
  display: flex;
  flex-direction: column;
}

.profile-grid > .card > .card-body {
  flex: 1;
}

.shell.is-collapsed .account-meta,
.shell.is-collapsed .account-row .btn {
  display: none;
}

.login-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--surface-2);
  overflow: hidden;
}

/* Soft accent wash behind the card so the sign-in screen is not a flat slab. */
.login-screen::before {
  content: "";
  position: absolute;
  top: -30vh;
  left: 50%;
  width: 120vw;
  height: 90vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  opacity: 0.85;
  pointer-events: none;
}

.login-card {
  position: relative;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 40px 36px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  text-align: center;
}

.login-card .brand-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  margin: 0;
}

.login-card h1 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.login-brand p {
  margin: 0;
  max-width: 30ch;
  font-size: var(--fs-md);
  color: var(--ink-muted);
}

.login-card .btn-lg {
  margin-top: 4px;
}

.login-version {
  margin: 10px 0 0 !important;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.status-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-version {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shell.is-collapsed .sidebar-version {
  display: none;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-faint);
}

.status-dot.is-ok {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

.status-dot.is-warn {
  background: var(--warning);
}

.status-dot.is-down {
  background: var(--danger);
}

.shell.is-collapsed .status-label,
.shell.is-collapsed .status-line .sidebar-version {
  display: none;
}

/* -- main ----------------------------------------------------------------- */
.main {
  grid-area: main;
  overflow: hidden;
  background: var(--surface-2);
}

.view {
  height: 100%;
  overflow-y: auto;
}

/* Centred measure: on 27" and 32" displays a left-anchored column leaves the
   whole right side empty and makes the grids look off-balance. */
.view-pad {
  padding: 22px var(--view-pad-x) 48px;
  max-width: var(--content-max);
  margin-inline: auto;
}

.view-center {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}

.view-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.view-head-text h2 {
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.view-head-text p {
  margin-top: 3px;
  font-size: var(--fs-md);
  color: var(--ink-muted);
  max-width: 78ch;
}

.view-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition),
    box-shadow var(--transition);
}

.btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-faint);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.btn-primary {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--navy-700);
  border-color: var(--navy-700);
}

html[data-theme="dark"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn-accent {
  background: var(--orange-700);
  border-color: var(--orange-700);
  color: #fff;
}

.btn-accent:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--ink);
}

.btn-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-soft);
}

.btn-sm {
  height: 26px;
  padding: 0 8px;
  font-size: var(--fs-sm);
}

.btn-sm svg {
  width: 13px;
  height: 13px;
}

.btn-lg {
  height: 36px;
  padding: 0 16px;
  font-size: var(--fs-base);
}

.btn-icon {
  width: 30px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 26px;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.field-hint {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.45;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.55;
}

/* -- select --------------------------------------------------------------- */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  font-weight: 550;
  color: var(--ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374747d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px 13px;
}

.select:hover {
  border-color: var(--ink-faint);
}

.select:disabled {
  color: var(--ink-faint);
  background-color: var(--surface-2);
  cursor: not-allowed;
}

.select option {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392959f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.select-sm {
  min-height: 26px;
  padding: 2px 26px 2px 8px;
  font-size: var(--fs-sm);
  background-size: 12px 12px;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-md);
}

.check input {
  margin: 2px 0 0;
  accent-color: var(--navy-900);
  width: 14px;
  height: 14px;
  flex: none;
}

.check-text strong {
  display: block;
  font-weight: 600;
  font-size: var(--fs-md);
}

.check-text span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.45;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: var(--fs-md);
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  width: 32px;
  height: 18px;
  flex: none;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  transition: background var(--transition), border-color var(--transition);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition);
}

.switch input:checked + .switch-track {
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.switch input:checked + .switch-track::after {
  transform: translateX(14px);
}

.range-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.range-row input[type="range"] {
  flex: 1;
  accent-color: var(--navy-900);
}

.range-value {
  min-width: 46px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: right;
}

.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 2px;
}

/* Inside a column field the switch would otherwise stretch to the full grid
   track and dwarf its two labels. */
.field > .segmented {
  align-self: flex-start;
  max-width: 100%;
}

.segmented button {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}

.card-head h3 {
  font-size: var(--fs-md);
  font-weight: 620;
  letter-spacing: -0.005em;
}

.card-head p {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.card-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card-head-actions .select {
  min-width: 168px;
  width: auto;
}

.card-body {
  padding: 14px;
}

.card-body-flush {
  padding: 0;
}

.card-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-xs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.spacer {
  flex: 1 1 auto;
}

/* Wider columns need proportionally wider gutters, otherwise the cards read as
   one undifferentiated block once the content column stretches. */
@media (min-width: 1800px) {
  .grid,
  .stack {
    gap: 18px;
  }

  .view-head {
    margin-bottom: 20px;
  }

  .card-body {
    padding: 16px 18px;
  }

  .card-head {
    padding: 12px 18px;
  }

  .card-foot {
    padding: 12px 18px;
  }
}

/* ==========================================================================
   KPI
   ========================================================================== */

.kpi {
  position: relative;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.85;
}

.kpi.is-success::before {
  background: var(--success);
}

.kpi.is-warning::before {
  background: var(--warning);
}

.kpi.is-danger::before {
  background: var(--danger);
}

.kpi.is-highlight::before {
  background: var(--highlight);
}

.kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.kpi-value {
  margin-top: 6px;
  font-size: var(--fs-2xl);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-value small {
  font-size: var(--fs-md);
  font-weight: 550;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.kpi-meta {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.kpi-spark {
  margin-top: 8px;
  height: 26px;
}

/* ==========================================================================
   Badges, chips, tags
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 620;
  line-height: 17px;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--ink-soft);
}

.badge-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge-success {
  background: var(--success-soft);
  color: var(--success-ink);
}

.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-info {
  background: var(--info-soft);
  color: var(--info);
}

.badge-accent {
  background: var(--highlight-soft);
  color: var(--highlight);
}

.badge-neutral {
  background: var(--surface-3);
  color: var(--ink-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--ink-faint);
}

.chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-ink);
}

.chip-close {
  display: inline-flex;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-faint);
}

.chip-close:hover {
  color: var(--danger);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
  overflow: auto;
}

table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-faint);
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: var(--surface-1);
}

.table tbody tr.is-selected td {
  background: var(--accent-soft);
}

.table tbody tr.is-clickable {
  cursor: pointer;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table .shrink {
  width: 1%;
  white-space: nowrap;
}

/* Row actions stay reachable when a wide table scrolls horizontally. */
.table thead th.shrink:last-child,
.table tbody td.shrink:last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  box-shadow: -10px 0 10px -10px rgba(16, 24, 40, 0.22);
}

.table thead th.shrink:last-child {
  z-index: 2;
  background: var(--surface-1);
}

.table tbody tr:hover td.shrink:last-child {
  background: var(--surface-1);
}

.table tbody tr.is-selected td.shrink:last-child {
  background: var(--accent-soft);
}

.cell-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 340px;
}

.cell-title strong {
  display: block;
  font-weight: 570;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

.cell-sub {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-muted);
  border: 1px solid var(--border-faint);
}

.file-icon svg {
  width: 14px;
  height: 14px;
}

.file-icon.is-pdf {
  background: var(--orange-050);
  color: var(--orange-700);
  border-color: color-mix(in srgb, var(--orange-700) 20%, transparent);
}

.file-icon.is-image {
  background: var(--navy-050);
  color: var(--navy-700);
  border-color: var(--accent-border);
}

.file-icon.is-text {
  background: var(--success-soft);
  color: var(--success-ink);
}

/* ==========================================================================
   Progress & meters
   ========================================================================== */

.progress {
  position: relative;
  height: 6px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 320ms ease;
}

.progress-bar.is-success {
  background: var(--success);
}

.progress-bar.is-warning {
  background: var(--warning);
}

.progress-bar.is-danger {
  background: var(--danger);
}

.progress.is-striped .progress-bar {
  background-image: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.28) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.28) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
  animation: stripes 900ms linear infinite;
}

@keyframes stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 14px 0;
  }
}

.meter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 104px;
}

.meter .progress {
  flex: 1;
  height: 5px;
}

.meter-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 620;
  min-width: 38px;
  text-align: right;
}

.pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  flex: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

/* ==========================================================================
   Empty states, notices
   ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 44px 22px;
  text-align: center;
  color: var(--ink-muted);
}

.empty svg {
  width: 28px;
  height: 28px;
  color: var(--ink-faint);
}

.empty strong {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}

.empty p {
  font-size: var(--fs-md);
  max-width: 46ch;
}

.notice {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: var(--radius);
  background: var(--surface-1);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.notice svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
}

.notice strong {
  font-weight: 620;
}

.notice-info {
  border-left-color: var(--info);
  background: var(--info-soft);
  color: var(--info);
}

.notice-warning {
  border-left-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
}

.notice-danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.notice-success {
  border-left-color: var(--success);
  background: var(--success-soft);
  color: var(--success-ink);
}

/* ==========================================================================
   Modal / drawer / toast
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 16, 28, 0.42);
  backdrop-filter: blur(2px);
  animation: fade-in 120ms ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.modal {
  width: min(560px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: pop-in 150ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.modal-wide {
  width: min(1080px, 100%);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 {
  font-size: var(--fs-base);
  font-weight: 640;
}

.modal-head p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
}

.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(370px, calc(100vw - 32px));
}

.toast {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-md);
  animation: slide-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

.toast.is-success {
  border-left-color: var(--success);
}

.toast.is-error {
  border-left-color: var(--danger);
}

.toast.is-warning {
  border-left-color: var(--warning);
}

.toast strong {
  display: block;
  font-weight: 620;
}

.toast p {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.toast-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}

/* ==========================================================================
   Charts (inline SVG)
   ========================================================================== */

.chart {
  width: 100%;
  display: block;
  overflow: visible;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.chart-grid line {
  stroke: var(--border-faint);
  stroke-width: 1;
}

.chart-axis {
  fill: var(--ink-faint);
  font-size: 9.5px;
  font-family: var(--font);
}

.bar-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(84px, 32%) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
}

.bar-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}

.bar-row-track {
  height: 7px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}

.bar-row-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 400ms ease;
}

.bar-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  font-size: var(--fs-sm);
  min-width: 34px;
  text-align: right;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.muted {
  color: var(--ink-muted);
}

.faint {
  color: var(--ink-faint);
}

.small {
  font-size: var(--fs-sm);
}

.xs {
  font-size: var(--fs-xs);
}

.strong {
  font-weight: 620;
}

.nowrap {
  white-space: nowrap;
}

/* Absorbs the width the other columns leave over, so a table stays inside its
   card instead of pushing a horizontal scrollbar: max-width:0 stops the cell
   from claiming its content width during table layout. */
.table .cell-elastic {
  width: 100%;
  max-width: 0;
}

.table .cell-elastic > .truncate {
  display: block;
  max-width: 100%;
}

.truncate {
  /* ellipsis needs a block-ish box: inline boxes ignore overflow */
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.hidden {
  display: none !important;
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-accent {
  color: var(--highlight);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.scroll-y {
  overflow-y: auto;
}

/* ==========================================================================
   Dark theme corrections
   Tokens alone cannot fix pairs that were built for light surfaces: a navy
   foreground on a navy background is unreadable once inverted.
   ========================================================================== */

/* The accent is a light blue once inverted, so the button keeps dark ink and
   brightens on hover instead of darkening as it does on the light theme. */
html[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: var(--navy-700);
  border-color: var(--navy-700);
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-icon {
  color: var(--ink);
}

html[data-theme="dark"] .btn-ghost {
  color: var(--ink-soft);
}

html[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--ink);
}

/* The active pill has to read lighter than the track, not darker. */
html[data-theme="dark"] .segmented {
  background: var(--surface-1);
}

html[data-theme="dark"] .segmented button.is-active {
  background: var(--surface-3);
  color: var(--ink);
}