/* App shell + screen-specific layout. Responsive from 360px up. */

.boot-screen { display: flex; align-items: center; justify-content: center; height: 100vh; }

/* --- Auth --- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1em; background: var(--bg); }
.auth-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2em;
  width: 100%;
  max-width: 380px;
}
.auth-card h1 { font-size: 1.4rem; margin-bottom: 0.2em; }
.auth-subtitle { color: var(--text-muted); margin-bottom: 1.2em; }
.auth-hint { margin-top: 1em; font-size: 0.82em; color: var(--text-muted); }

/* --- App shell --- */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em 1em;
  padding: 0.6em 1em;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left, .topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; min-width: 0; }
.topbar-right { flex: 1 1 auto; justify-content: flex-end; }
.brand { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

.topbar-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--text);
  font-size: 0.86em;
  white-space: nowrap;
}
.topbar-badge-link:hover { text-decoration: none; color: var(--accent); }
/* Below ~480px, "Sorular" / "Onay bekleyen" used to wrap under the project
   switcher and could push the topbar wider than the viewport; collapse the
   text label and keep only the count badge so nothing overflows. */
.topbar-badge-label { display: none; }
@media (min-width: 480px) { .topbar-badge-label { display: inline; } }

.connection-indicator { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82em; color: var(--text-muted); }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.connection-connected .connection-dot { background: var(--success); }
.connection-connecting .connection-dot, .connection-reconnecting .connection-dot { background: var(--warning); animation: pulse 1.2s ease-in-out infinite; }
.connection-disconnected .connection-dot { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.connection-label { display: none; }
@media (min-width: 720px) { .connection-label { display: inline; } }

.app-nav {
  display: flex;
  gap: 0.2em;
  padding: 0 0.75em;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  position: sticky;
  top: 49px;
  z-index: 19;
}
.app-nav-item {
  padding: 0.7em 0.8em;
  color: var(--text-muted);
  font-size: 0.9em;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.app-nav-item:hover { text-decoration: none; color: var(--text); }
.app-nav-item.active { color: var(--accent); border-bottom-color: var(--accent); }

.app-main { flex: 1; padding: 1.1em; max-width: 1280px; width: 100%; margin: 0 auto; }

/* --- Project switcher --- */
.project-switcher { position: relative; }
.project-switcher-btn, .account-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.6em;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9em;
}
.project-key { font-weight: 700; }
.project-switcher-menu, .account-menu-list {
  position: absolute;
  top: calc(100% + 0.35em);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  min-width: 220px;
  padding: 0.4em;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.account-menu-list { left: auto; right: 0; }
.project-switcher-item, .account-menu-list button {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  text-align: left;
  background: none;
  border: none;
  padding: 0.5em 0.6em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 0.9em;
}
.project-switcher-item:hover, .account-menu-list button:hover { background: var(--bg-muted); }
.project-switcher-item.active { background: var(--accent-soft); color: var(--accent); }
.project-switcher-new { color: var(--accent); font-weight: 600; }
.project-name { color: var(--text-muted); }
.account-menu-btn { gap: 0.5em; }
.account-avatar {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85em;
}
.account-name { display: none; }
@media (min-width: 640px) { .account-name { display: inline; } }
.account-menu-email { margin: 0 0 0.3em; padding: 0.2em 0.6em; font-size: 0.8em; color: var(--text-muted); }

/* --- Board --- */
.board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
  align-items: end;
  margin-bottom: 1em;
  padding: 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.filter-field { display: flex; flex-direction: column; gap: 0.25em; font-size: 0.85em; color: var(--text-muted); }
.filter-field select, .filter-field input { min-width: 140px; }
.filter-field-text input { min-width: 200px; }

.board-tabs { display: flex; gap: 0.3em; overflow-x: auto; margin-bottom: 0.6em; }
.board-tab {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 0.35em 0.75em;
  font-size: 0.8em;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.board-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.board-tab-count { opacity: 0.8; }

.board-columns {
  display: flex;
  gap: 0.9em;
  overflow-x: auto;
  padding-bottom: 0.5em;
}
.board-column {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  min-width: 270px;
  flex: 1 1 270px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}
.board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7em 0.8em 0.4em;
}
.board-column-header h2 { font-size: 0.92em; margin: 0; }
.board-column-count { color: var(--text-muted); font-size: 0.82em; }
.board-column-body { padding: 0 0.6em 0.6em; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5em; }
.board-column-empty { color: var(--text-muted); font-size: 0.85em; padding: 0.5em; }

.task-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.65em 0.75em;
  color: var(--text);
}
.task-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.task-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3em; }
.task-key { font-family: var(--font-mono); font-size: 0.8em; color: var(--text-muted); }
.task-title { font-size: 0.92em; margin: 0 0 0.5em; }
.task-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; font-size: 0.78em; color: var(--text-muted); }
.task-card-meta { display: flex; align-items: center; gap: 0.4em; }

@keyframes card-flash {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: none; }
}
.task-card-flash { animation: card-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .task-card-flash { animation: none; border-color: var(--accent); }
}

@media (max-width: 860px) {
  .board-tabs { display: flex; }
  .board-columns {
    scroll-snap-type: x mandatory;
  }
  .board-column {
    scroll-snap-align: start;
    min-width: 88vw;
    max-height: none;
  }
}
@media (min-width: 861px) {
  .board-tabs { display: none; }
}

/* --- Task detail --- */
.task-detail-page {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2em;
  max-width: 920px;
  margin-left: auto;
  animation: slide-in 0.18s ease-out;
}
@keyframes slide-in { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .task-detail-page { animation: none; } }
@media (max-width: 860px) { .task-detail-page { margin-left: 0; max-width: none; border-radius: 0; border-width: 0; } }

.back-link { display: inline-block; margin-bottom: 0.6em; font-size: 0.88em; }
.task-detail-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.task-detail-titlebar h1 { margin: 0.1em 0 0; }
.task-key-big { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.9em; }
.task-detail-badges { display: flex; gap: 0.4em; flex-wrap: wrap; }
.task-detail-sub { display: flex; align-items: center; gap: 0.9em; margin-top: 0.5em; font-size: 0.85em; color: var(--text-muted); flex-wrap: wrap; }
.blocked-banner { margin-top: 0.6em; padding: 0.5em 0.8em; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); }

.task-detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 1.4em; margin-top: 1.2em; }
@media (max-width: 860px) { .task-detail-grid { grid-template-columns: 1fr; } }
.task-detail-main section { margin-bottom: 1.4em; }
.acceptance-list li, .dependency-list li { margin-bottom: 0.3em; }
.dependency-list li { display: flex; align-items: center; gap: 0.5em; list-style: none; margin-left: -1.25em; padding-left: 1.25em; }

.notes-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8em; }
.notes-timeline li { border-left: 2px solid var(--border); padding-left: 0.8em; }
.note-head { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.3em; font-size: 0.82em; color: var(--text-muted); }
.note-kind-badge { text-transform: uppercase; font-size: 0.7em; }

.task-questions { list-style: none; margin: 0 0 0.6em; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.task-questions li { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6em 0.7em; }
.question-meta { font-size: 0.8em; color: var(--text-muted); margin: 0.2em 0; }
.question-answer { font-style: italic; margin: 0; }

.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45em; font-size: 0.88em; }
.event-list li { display: flex; gap: 0.6em; color: var(--text-muted); }
.event-list time { flex-shrink: 0; }

.task-detail-actions { display: flex; flex-direction: column; gap: 0.9em; }
.action-card { background: var(--bg-muted); border-radius: var(--radius-md); padding: 0.8em; }
.action-card h3 { margin: 0 0 0.5em; font-size: 0.88em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.transition-buttons { display: flex; flex-wrap: wrap; gap: 0.4em; }
.transition-confirm { margin-top: 0.6em; }
.radio-row { display: flex; gap: 1em; margin-bottom: 0.6em; font-size: 0.9em; }
.inline-form { display: flex; align-items: flex-end; gap: 0.6em; flex-wrap: wrap; margin-bottom: 1em; }

/* --- Screens (generic) --- */
.screen-header { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; flex-wrap: wrap; }

/* Questions */
.questions-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6em; }
.question-list { list-style: none; margin: 0 0 1.5em; padding: 0; display: flex; flex-direction: column; gap: 0.7em; }
.question-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.8em; background: var(--bg-elevated); }
.question-card.question-blocking { border-color: var(--warning); }
.question-card-head { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.4em; font-size: 0.85em; }
.question-text { font-weight: 600; margin-bottom: 0.4em; }
.question-task-link { font-size: 0.82em; }
.question-options { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.5em; }
.question-freeform { display: flex; gap: 0.5em; margin-top: 0.5em; align-items: flex-start; }
.question-freeform textarea { flex: 1; }
.question-answered { opacity: 0.85; }
.notify-status { font-size: 0.85em; color: var(--text-muted); }

/* Agents */
.agent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.agent-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr auto;
  gap: 1em;
  align-items: center;
  padding: 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
@media (max-width: 900px) { .agent-row { grid-template-columns: 1fr; } }
.agent-row-main { display: flex; align-items: center; gap: 0.7em; min-width: 0; }
.agent-row-name { display: flex; align-items: center; gap: 0.5em; font-weight: 600; }
.agent-row-model { display: flex; flex-direction: column; font-size: 0.78em; color: var(--text-muted); gap: 0.1em; }
.model-mismatch { color: var(--warning); }
.agent-row-meta { display: flex; flex-direction: column; gap: 0.3em; }
.agent-capabilities { font-size: 0.8em; color: var(--text-muted); }
.agent-row-tasks { display: flex; flex-wrap: wrap; gap: 0.4em; font-size: 0.85em; }
.agent-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4em; font-size: 0.8em; color: var(--text-muted); }
.agent-row-actions { display: flex; gap: 0.4em; }

/* Tokens */
.token-reveal {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  padding: 0.9em;
  margin-bottom: 1.2em;
}
.token-reveal-warning { margin: 0 0 0.5em; font-weight: 600; color: var(--warning); }
.token-value-row { display: flex; align-items: center; gap: 0.6em; }
.token-value { background: var(--bg-elevated); padding: 0.4em 0.6em; border-radius: var(--radius-sm); word-break: break-all; }
.snippets { margin-top: 1em; display: flex; flex-direction: column; gap: 0.9em; }
.snippet-head { display: flex; align-items: center; justify-content: space-between; }
.snippet-head h4 { margin: 0; font-size: 0.9em; }
.tokens-table { margin-top: 0.8em; }
.token-revoked { opacity: 0.55; }

/* Members / Users tables */
.members-table, .tokens-table { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.members-table th, .tokens-table th { background: var(--bg-muted); }

/* Activity */
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.activity-item { display: flex; align-items: baseline; gap: 0.6em; font-size: 0.9em; padding: 0.5em 0.6em; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); flex-wrap: wrap; }
.activity-item time { color: var(--text-muted); font-size: 0.82em; flex-shrink: 0; }
.activity-text { flex: 1; min-width: 200px; }
.activity-task-link { font-size: 0.85em; }

/* Import */
.import-textarea { font-family: var(--font-mono); font-size: 0.85em; }
.import-hint { color: var(--text-muted); font-size: 0.88em; }
.import-preview { background: var(--bg-muted); border-radius: var(--radius-md); padding: 0.8em; margin: 0.8em 0; }
.import-errors { margin: 0.5em 0 0; padding-left: 1.2em; color: var(--danger); font-size: 0.85em; }
.import-result { margin-top: 1em; padding: 0.8em; background: var(--success-soft); border-radius: var(--radius-md); }

/* Account */
.account-screen section { margin-bottom: 1.6em; }
.account-form { max-width: 360px; }

/* Copy button used inline */
.token-value-row .btn, .snippet-head .btn { white-space: nowrap; }

/* Project switcher: archived group */
.project-switcher-group-label {
  margin: 0.4em 0.2em 0.1em;
  padding: 0 0.4em;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Project settings ("Ayarlar") */
.settings-screen { max-width: 480px; }
.archived-banner {
  padding: 0.6em 0.8em;
  background: var(--bg-muted);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  margin-bottom: 1em;
}
.danger-zone {
  margin-top: 1.6em;
  padding: 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.danger-zone h2 { font-size: 1em; margin-bottom: 0.3em; }

/* Users screen */
.users-screen .screen-header { margin-bottom: 0.6em; }
.users-hint { color: var(--text-muted); font-size: 0.88em; margin: 0 0 1em; }
.user-status-badges { display: flex; flex-wrap: wrap; gap: 0.3em; }
.user-actions { display: flex; flex-wrap: wrap; gap: 0.35em; }
.password-reveal-value { font-size: 1.05em; }