/* TyapTerm — tabs: tab bar, tab states, protocol colors, panel toggles */

/* ===============================================
   TAB BAR
   =============================================== */
.tab-bar {
  display: flex;
  align-items: flex-end;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 1px;
  padding: 0 4px;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  height: 34px;
  max-width: var(--tab-max-w);
  min-width: 100px;
  padding: 0 12px;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--dur-fast) ease;
  position: relative;
  flex-shrink: 0;
}
.tab:hover { color: var(--text-1); background: var(--surface-2); }

.tab .tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tab .tab-label { overflow: hidden; text-overflow: ellipsis; }
.tab .tab-close {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
  border-radius: 3px;
  opacity: 0;
  font-size: 11px;
  transition: all var(--dur-fast) ease;
  flex-shrink: 0;
  color: var(--text-3);
}
.tab:hover .tab-close { opacity: 0.7; }
.tab .tab-close:hover { opacity: 1; background: var(--red-glow); color: var(--red); }

/* Active tab states per protocol */
.tab.active { color: var(--text-1); background: var(--surface); }
.tab.active.proto-ssh { border-bottom-color: var(--ssh-color); }
.tab.active.proto-telnet { border-bottom-color: var(--telnet-color); }
.tab.active.proto-ftp { border-bottom-color: var(--ftp-color); }
.tab.active.proto-remote { border-bottom-color: var(--remote-color); }
.tab.active.proto-local { border-bottom-color: var(--local-color); }
.tab.active.proto-powershell { border-bottom-color: var(--powershell-color); }

/* Dot color variants */
.tab.proto-ssh .tab-dot { background: var(--ssh-color); }
.tab.proto-telnet .tab-dot { background: var(--telnet-color); }
.tab.proto-ftp .tab-dot { background: var(--ftp-color); }
.tab.proto-remote .tab-dot { background: var(--remote-color); }
.tab.proto-local .tab-dot { background: var(--local-color); }
.tab.proto-powershell .tab-dot { background: var(--powershell-color); }

/* ===============================================
   PANEL TOGGLE BUTTONS — styled like titlebar-btn with text
   =============================================== */
.panel-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--border-r);
  transition: all var(--dur-fast) ease;
  white-space: nowrap;
}
.panel-toggle:hover { color: var(--text-1); background: var(--surface-2); }
.panel-toggle.active { color: var(--text-1); background: var(--surface); }

/* New tab button */
.tab.tab-new {
  min-width: 34px;
  max-width: 34px;
  padding: 0;
  justify-content: center;
  color: var(--text-3);
  border-bottom-color: transparent;
}
.tab.tab-new:hover { color: var(--text-1); background: var(--surface-2); }

/* Fitts's Law: tab click zone extended to top edge via JS in app.js */