/**
 * Rekaptr Medal Clip Studio - Clean, Non-Glow Base Layout
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import './tokens.css';

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

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

/* A real screenshot never shows scrollbar chrome — it's a static crop of
   whatever fit in the window at that moment. Panels that scroll in normal
   use (squad feed, vault grid, sidebar drawers, modals) stay scrollable,
   just with no visible track/thumb, so this markup reads as a screenshot
   of the real app's window rather than a live, scrollable web page. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

input {
  font-family: inherit;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
}

/* Master 3-Section Shell (Studio Mode: 3 columns; Vault/Teams: 2 columns full-width) */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr 270px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-app);
  transition: grid-template-columns 200ms ease;
}

/* When viewing Vault or Teams, expand full width and collapse audio mixer */
.app-shell.view-fullwidth {
  grid-template-columns: 220px 1fr;
}

.app-shell.view-fullwidth .audio-balancer-card {
  display: none !important;
}

/* Left Sidebar */
.studio-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  padding: 14px 10px;
  z-index: 10;
}

/* Center Stage Viewport */
.studio-center-stage {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bg-app);
}

/* Top Session Bar */
.workspace-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 16px;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
}

/* Middle Content Stack */
.stage-content-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 14px 16px;
  gap: 12px;
  overflow-y: auto;
}