/* Reset, type scale, app shell (topbar + left rail). */

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 640px;
  background: var(--c-app);
  color: var(--fg2);
  font: 400 12px/16px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--tint); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 96, 216, .22);
}

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

#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 640px;
}

/* ---------- Topbar ---------- */
.topbar {
  flex: none;
  height: 48px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 60;
}
.topbar-logo { height: 20px; display: block; }
.topbar-divider { width: 1px; height: 20px; background: var(--topbar-border); flex: none; }
.topbar-title { font: 600 12px/16px var(--font-sans); color: var(--topbar-fg); white-space: nowrap; }
.topbar-subtitle { font-size: 11px; color: #7E7E84; white-space: nowrap; }
.topbar-spacer { flex: 1 1 auto; }
.topbar-meta { font-size: 11px; color: var(--topbar-meta); white-space: nowrap; }
.topbar-meta strong, .topbar-meta .ts { color: var(--topbar-fg2); font-weight: 400; }
.icon-btn {
  border: none;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg3);
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease);
}
.icon-btn:hover { background: var(--hover); }
.topbar-bell {
  width: 28px; height: 28px;
  position: relative;
  color: var(--topbar-fg2);
  flex: none;
}
.topbar-bell:hover { background: rgba(255, 255, 255, .08); }
.topbar-bell .dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--notif-dot);
  box-shadow: 0 0 0 1px var(--topbar-bg);
}
.notif-bell-wrap { position: relative; flex: none; }
.notif-dropdown {
  position: absolute; top: 36px; right: 0; z-index: 70;
  width: 320px; max-height: 380px; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px;
  box-shadow: var(--pop);
}
.notif-dropdown-header {
  padding: 10px 14px; font: 600 12px/16px var(--font-sans); color: var(--fg1);
  border-bottom: 1px solid var(--c-border-subtle);
}
.notif-dropdown-empty { padding: 20px 14px; text-align: center; font-size: 11px; color: var(--fg3); }
.notif-item { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--c-border-subtle); }
.notif-item:last-child { border-bottom: none; }
.notif-item-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--success-dot); }
.notif-item-dot.error { background: var(--danger); }
.notif-item-body { flex: 1 1 auto; min-width: 0; }
.notif-item-message { font-size: 12px; color: var(--fg1); }
.notif-item-time { font-size: 10px; color: var(--fg3); margin-top: 2px; }

/* ---------- Generic themed dropdown menu (e.g. Export format picker) ---------- */
.action-menu {
  position: fixed; z-index: 300;
  min-width: 140px; padding: 4px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 8px; box-shadow: var(--pop);
  display: flex; flex-direction: column; gap: 2px;
}
.action-menu-item {
  height: 28px; padding: 0 10px; border-radius: 6px;
  border: none; background: transparent; color: var(--fg1);
  font-size: 12px; text-align: left; cursor: pointer;
}
.action-menu-item:hover { background: var(--hover); }

.topbar-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font: 600 10px/1 var(--font-sans);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* ---------- Staleness banner ---------- */
.staleness-banner {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px;
  background: var(--tint);
  border-bottom: 1px solid var(--brand);
  font-size: 12px; color: var(--fg1);
}
.staleness-banner-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.staleness-banner-actions .btn { height: 24px; padding: 0 10px; font-size: 11px; }

/* ---------- Body row: rail + main ---------- */
.app-body { flex: 1 1 auto; display: flex; min-height: 0; }

.rail {
  flex: none;
  width: 216px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 180ms var(--ease);
}
.rail.collapsed { width: 52px; }

.rail-header {
  flex: none;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--c-border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rail-title {
  font: 600 13px/19px var(--font-sans);
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.rail.collapsed .rail-title { display: none; }
.rail-collapse-btn {
  width: 24px; height: 24px; flex: none;
  color: var(--fg3);
  font-size: 14px;
}

.rail-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 10px; }
.rail-group-label {
  padding: 10px 16px 2px;
  font: 600 10px/14px var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg3);
}
.rail.collapsed .rail-group-label { display: none; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 2px 8px 0;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--fg3);
  text-align: left;
  font: 400 12px/16px var(--font-sans);
}
.rail-item:hover { background: var(--hover); }
.rail-item.active { color: var(--brand); background: var(--tint); font-weight: 500; }
.rail-item .rail-icon {
  width: 16px; height: 16px; flex: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: var(--icon-filter);
  opacity: .85;
}
.rail-item .rail-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item .rail-badge {
  flex: none;
  font: 400 10px/14px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--fg3);
  background: var(--c-raised);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0 5px;
}
.rail.collapsed .rail-item { justify-content: center; }
.rail.collapsed .rail-item .rail-label,
.rail.collapsed .rail-item .rail-badge { display: none; }

.rail-footer { flex: none; border-top: 1px solid var(--c-border-subtle); padding: 8px; }

.main-view { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.screen[hidden] { display: none !important; }

.screen-header { padding: 20px 24px 0; }
.screen-title { font: 700 18px/24px var(--font-sans); color: var(--fg1); margin: 0; }
.screen-note { font-size: 12px; color: var(--fg3); margin: 4px 0 0; max-width: 70ch; }

/* generic buttons reused across screens */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 44px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--fg2);
  font: 400 12px/16px var(--font-sans);
  white-space: nowrap;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease), border-color var(--motion) var(--ease);
}
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.tertiary { border-color: transparent; background: transparent; }
.btn.tertiary:hover { background: var(--hover); }
.btn.danger { color: var(--danger); border-color: var(--danger-border); background: var(--c-surface); }
.btn.danger:hover { background: var(--danger-bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 14px; height: 14px; }
.btn.is-open { border-color: var(--brand); color: var(--brand); }
.btn .icon:last-child svg { transition: transform var(--motion) var(--ease); }
.btn.is-open .icon:last-child svg { transform: rotate(180deg); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 10px/14px var(--font-sans);
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 8px;
  border: 1px solid var(--c-border);
  color: var(--fg3); background: var(--c-raised);
}

.storage-chip.file { color: var(--fg3); border-color: var(--c-border); background: var(--c-raised); }
.storage-chip.postgres { color: var(--brand); border-color: var(--brand); background: var(--tint); }