#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px; flex-shrink: 0;
  background: hsl(var(--background) / .8); backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(var(--border));
  position: relative; z-index: 30;
}
.topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.topbar .brand .icon { width: 18px; height: 18px; }
.topbar .nav-right { display: flex; gap: 6px; align-items: center; }

/* ---------- User menu (topbar dropdown) ---------- */
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px;
  border-radius: calc(var(--radius) - 2px); border: 1px solid transparent; background: transparent; cursor: pointer;
}
.user-menu-trigger:hover { background: hsl(var(--accent)); }
.user-menu-trigger .avatar-circle {
  width: 26px; height: 26px; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
.user-menu-trigger .name { font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); }
.user-menu-trigger .icon { color: hsl(var(--muted-foreground)); width: 14px; height: 14px; }

.user-menu-backdrop { position: fixed; inset: 0; background: transparent; pointer-events: none; z-index: 20; }
.user-menu-backdrop.open { pointer-events: auto; }
.user-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px;
  background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgb(0 0 0 / .12); z-index: 21; padding: 6px;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.user-menu-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.user-menu-header { padding: 8px 10px 10px; }
.user-menu-header .name { font-size: 13.5px; font-weight: 600; }
.user-menu-header .role { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin-top: 1px; text-transform: capitalize; }
.user-menu-dropdown hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 4px 0; }
.user-menu-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none;
  border-radius: calc(var(--radius) - 4px); padding: 9px 10px; font-size: 13px; color: hsl(var(--popover-foreground)); cursor: pointer;
}
.user-menu-dropdown button:hover { background: hsl(var(--accent)); }
.user-menu-dropdown button.danger { color: hsl(var(--destructive)); }
.user-menu-dropdown .icon { color: hsl(var(--muted-foreground)); }
.user-menu-dropdown button.danger .icon { color: hsl(var(--destructive)); }

/* ---------- Login ---------- */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted) / .3); }
.login-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); padding: 32px; width: 340px; box-shadow: 0 4px 24px rgb(0 0 0 / .06); }
.login-card .brand-mark { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 20px; }
.login-card h1 { font-size: 18px; margin: 0 0 20px; letter-spacing: -.3px; }
.login-card .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

/* ---------- Layout ---------- */
.main { flex: 1; display: flex; overflow: hidden; }
.sidebar { width: 280px; background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); overflow-y: auto; flex-shrink: 0; padding: 10px; }
.sidebar.compact { width: 252px; }
.term-sidebar { width: 260px; background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); overflow-y: auto; flex-shrink: 0; padding: 10px; }
.term-sidebar .nav-item .meta .host { max-width: 170px; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 10px; }
.sidebar-header .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--muted-foreground)); }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: calc(var(--radius) - 2px);
  cursor: pointer; font-size: 13px; color: hsl(var(--foreground)); margin-bottom: 2px;
}
.nav-item:hover { background: hsl(var(--accent)); }
.nav-item.active { background: hsl(var(--accent)); font-weight: 600; }
.nav-item .icon { color: hsl(var(--muted-foreground)); }
.nav-item.active .icon { color: hsl(var(--foreground)); }
.nav-item .meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nav-item .meta .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .meta .name.has-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow: visible; }
.nav-item .meta .name.has-badge .name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-item .meta .name.has-badge .badge { flex-shrink: 0; }
.nav-item .meta .host { color: hsl(var(--muted-foreground)); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .meta .last-used { color: hsl(var(--muted-foreground)); font-size: 11px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: hsl(var(--muted) / .25); }
.content-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background)); flex-shrink: 0; }
.content-header .title-group h2 { margin: 0; font-size: 15px; font-weight: 600; }
.content-header .title-group .sub { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 1px; }
.content-header .actions { display: flex; gap: 8px; }

.list-area { padding: 20px 24px; overflow-y: auto; flex: 1; }
.card-list { display: flex; flex-direction: column; gap: 10px; }
.item-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.item-card .meta { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.item-card .meta .avatar { width: 34px; height: 34px; border-radius: 8px; background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.item-card .meta .text { flex: 1; min-width: 0; }
.item-card .meta .text .name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.item-card .meta .text .desc { color: hsl(var(--muted-foreground)); font-size: 12px; margin-top: 2px; }
.item-card .meta .text .last-used { color: hsl(var(--muted-foreground)); font-size: 11px; opacity: .75; margin-top: 2px; }
.item-card .actions { display: flex; gap: 6px; flex-shrink: 0; }

.terminal-view { flex: 1; padding: 0; overflow: hidden; display: flex; }
.terminal-window { flex: 1; display: flex; flex-direction: column; background: #1e1e1e; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 24px rgb(0 0 0 / .18); border: 1px solid rgb(0 0 0 / .3); }

/* Fullscreen terminal: an topbar + ca 2 sidebar, terminal chiem toan bo viewport */
body.terminal-fullscreen .topbar,
body.terminal-fullscreen .sidebar,
body.terminal-fullscreen .term-sidebar { display: none; }
body.terminal-fullscreen .terminal-window { border-radius: 0; border: none; }
.terminal-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #2a2a2a; flex-shrink: 0; }
.terminal-chrome .dots { display: flex; gap: 7px; }
.terminal-chrome .dot {
  width: 12px; height: 12px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: rgb(0 0 0 / .55);
}
.terminal-chrome .dot .icon { width: 8px; height: 8px; stroke-width: 3.5; opacity: 0; transition: opacity .1s; }
.terminal-chrome .dots:hover .dot .icon { opacity: 1; }
.terminal-chrome .dot.red { background: #ff5f57; }
.terminal-chrome .dot.yellow { background: #febc2e; }
.terminal-chrome .dot.green { background: #28c840; }
.terminal-chrome .title { flex: 1; text-align: center; font-size: 12.5px; color: #9a9a9a; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-chrome .close-btn { background: none; border: none; color: #9a9a9a; cursor: pointer; padding: 2px 4px; border-radius: 4px; display: flex; }
.terminal-chrome .close-btn:hover { color: #fff; background: rgb(255 255 255 / .1); }
.terminal-chrome .close-btn .icon { width: 15px; height: 15px; }
#xterm-container { flex: 1; padding: 10px 12px; overflow: hidden; }