/* ── Glass ───────────────────────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 30px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-ghost:hover { background: var(--bg-overlay); color: var(--text-primary); border-color: var(--border-hover); }

.btn-danger {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.btn-danger:hover { background: var(--red); color: #fff; }

.btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.btn-full { width: 100%; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: all var(--t-base);
}

.icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.icon-btn.danger:hover { background: var(--red-soft); color: var(--red); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

.input-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color var(--t-base);
}

.input-toggle:hover { color: var(--text-primary); }

.input-field {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 12px 16px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.input-wrapper .input-field { padding-left: 42px; padding-right: 42px; }
.input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-field::placeholder { color: var(--text-muted); }

.textarea-field {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 12px 16px;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  resize: vertical;
  outline: none;
  transition: border-color var(--t-base);
  min-height: 100px;
}

.textarea-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.select-field {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--t-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a698a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.select-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-sm { padding: 8px 32px 8px 12px; font-size: 0.8125rem; background-position: right 10px center; }
.select-sm:disabled { opacity: 0.5; cursor: not-allowed; }

.form-group { margin-bottom: 18px; }
.input-group { margin-bottom: 20px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--accent);
  flex-shrink: 0;
}

.stat-icon.accent-green { background: var(--green-soft); color: var(--green); }
.stat-icon.accent-orange { background: var(--orange-soft); color: var(--orange); }
.stat-icon.accent-purple { background: var(--purple-soft); color: var(--purple); }

.stat-value { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-label { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; }

/* ── Repo Cards ──────────────────────────────────────────────────────────── */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.repo-card {
  padding: 20px;
  cursor: pointer;
  transition: all var(--t-base);
  min-height: 140px;
}

.repo-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--accent-glow);
}

.repo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.repo-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.repo-owner { font-size: 0.8rem; color: var(--text-muted); }

.repo-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.badge-private { background: var(--orange-soft); color: var(--orange); }
.badge-public { background: var(--green-soft); color: var(--green); }

.repo-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.repo-meta {
  display: flex;
  gap: 14px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.repo-meta-item { display: flex; align-items: center; gap: 5px; }

/* ── Repo List (table-style) ─────────────────────────────────────────────── */
.repo-list { display: flex; flex-direction: column; gap: 8px; }

.repo-row {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t-base);
  gap: 16px;
}

.repo-row:hover { border-color: var(--accent); background: var(--bg-elevated); }

.repo-row-name { flex: 1; min-width: 0; }
.repo-row-name strong { display: block; font-weight: 600; }
.repo-row-name span { font-size: 0.8rem; color: var(--text-muted); }
.repo-row-branch { font-size: 0.8rem; color: var(--blue); font-family: var(--font-mono); }
.repo-row-updated { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.repo-row-size { font-size: 0.8rem; color: var(--text-muted); text-align: right; min-width: 60px; }

/* ── Filter Bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 14px;
  flex: 1;
  min-width: 200px;
  transition: border-color var(--t-base);
}

.filter-search:focus-within { border-color: var(--accent); }
.filter-search i { color: var(--text-muted); font-size: 0.875rem; }

.filter-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.filter-input::placeholder { color: var(--text-muted); }
.filter-input-sm { font-size: 0.8125rem; }
.filter-group { display: flex; gap: 8px; }
.filter-group .select-field { width: auto; min-width: 140px; }

/* ── File Tree ───────────────────────────────────────────────────────────── */
/* Indent depth is set inline via --depth (see editor.js); the guide line
   is drawn with a pseudo-element so it stays crisp at any nesting level
   instead of relying on plain padding alone. */
.tree-item {
  --depth: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 7px calc(10px + var(--depth) * 18px);
  margin: 1px 0;
  font-size: 0.825rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-item.depth-guide::before {
  content: '';
  position: absolute;
  left: calc(18px * var(--depth) - 1px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.tree-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.tree-item.active { background: var(--accent-soft); color: var(--accent); }
.tree-item.active .tree-item-name { font-weight: 500; }

.tree-item-icon { font-size: 0.875rem; flex-shrink: 0; color: var(--text-muted); width: 16px; text-align: center; }
.tree-item.folder .tree-item-icon { color: var(--orange); }
.tree-item.active .tree-item-icon { color: var(--accent); }
.tree-item-name { overflow: hidden; text-overflow: ellipsis; }

/* Language-tinted file icons — mirrors familiar editor color cues so the
   tree is scannable at a glance instead of a flat list of gray glyphs. */
.tree-item-icon.fa-js { color: #f0db4f; }
.tree-item-icon.fa-html5 { color: #e34c26; }
.tree-item-icon.fa-css3-alt { color: #2965f1; }
.tree-item-icon.fa-react { color: #61dafb; }
.tree-item-icon.fa-python { color: #4b8bbe; }
.tree-item-icon.fa-php { color: #8993be; }
.tree-item-icon.fa-java { color: #e76f00; }
.tree-item-icon.fa-markdown { color: var(--text-secondary); }
.tree-item-icon.fa-brackets-curly { color: var(--orange); }
.tree-item-icon.fa-database { color: var(--blue); }
.tree-item-icon.fa-lock { color: var(--red); }
.tree-item-icon.fa-git-alt { color: #f05133; }
.tree-item.active .tree-item-icon.fa-js,
.tree-item.active .tree-item-icon.fa-html5,
.tree-item.active .tree-item-icon.fa-css3-alt,
.tree-item.active .tree-item-icon.fa-react,
.tree-item.active .tree-item-icon.fa-python,
.tree-item.active .tree-item-icon.fa-php,
.tree-item.active .tree-item-icon.fa-java,
.tree-item.active .tree-item-icon.fa-database,
.tree-item.active .tree-item-icon.fa-lock,
.tree-item.active .tree-item-icon.fa-git-alt { filter: saturate(1.3); }

.tree-item-actions {
  margin-left: auto;
  display: none;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 6px;
}

.tree-item:hover .tree-item-actions { display: flex; }

.tree-item-actions .icon-btn { width: 22px; height: 22px; font-size: 0.75rem; }

/* Folder chevron — gives a clear open/closed affordance instead of relying
   purely on the icon swap between folder / folder-open. */
.tree-item.folder .tree-item-chevron {
  font-size: 0.65rem;
  width: 10px;
  flex-shrink: 0;
  color: var(--text-disabled);
  transition: transform var(--t-fast);
}

.tree-item-chevron-spacer { width: 10px; flex-shrink: 0; }

.tree-item.folder[data-open="true"] .tree-item-chevron { transform: rotate(90deg); }

.tree-children { position: relative; }

/* ── File Modified Badge ─────────────────────────────────────────────────── */
.file-modified-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--orange-soft);
  color: var(--orange);
}

/* ── Deploy ──────────────────────────────────────────────────────────────── */
.deploy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.deploy-form-card, .deploy-status-card {
  padding: 24px;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-base);
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.drop-icon { font-size: 2.5rem; color: var(--text-disabled); margin-bottom: 12px; }
.drop-text { color: var(--text-secondary); font-size: 0.9rem; }
.drop-hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 4px; }

.file-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--green-soft);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.file-preview i { color: var(--green); }

.deploy-warning {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--orange-soft);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--orange);
  margin-bottom: 20px;
}

.deploy-warning i { flex-shrink: 0; margin-top: 2px; }
.deploy-warning div { color: var(--text-secondary); }
.deploy-warning strong { color: var(--orange); }

.progress-bar {
  height: 6px;
  background: var(--bg-base);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 99px;
  transition: width 0.5s ease;
  width: 0;
}

.deploy-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.deploy-log {
  flex: 1;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  max-height: 340px;
  padding: 8px 0;
}

.log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
}

.log-empty i { font-size: 2rem; color: var(--text-disabled); }

.log-line {
  display: flex;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.log-line.info { color: var(--text-secondary); }
.log-line.success { color: var(--green); background: var(--green-soft); }
.log-line.error { color: var(--red); background: var(--red-soft); }

.log-time { color: var(--text-disabled); flex-shrink: 0; }

/* Deploy History */
.deploy-history { display: flex; flex-direction: column; gap: 8px; }

.history-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.history-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.history-status.success { background: var(--green); }
.history-status.failed { background: var(--red); }
.history-status.running { background: var(--orange); animation: pulse 1s infinite; }

.history-info { flex: 1; }
.history-target { font-weight: 600; font-size: 0.9rem; }
.history-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.history-time { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px;
  color: var(--text-muted);
  text-align: center;
}

.history-empty i { font-size: 2rem; color: var(--text-disabled); }

/* ── Vault ───────────────────────────────────────────────────────────────── */
.vault-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.vault-card {
  padding: 20px;
  transition: all var(--t-base);
  position: relative;
}

.vault-card:hover { border-color: var(--accent); transform: translateY(-1px); }

.vault-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vault-card-title { font-weight: 600; font-size: 0.9rem; }

.vault-card-category {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--purple-soft);
  color: var(--purple);
  margin-top: 4px;
}

.vault-card-content {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: var(--bg-base);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  word-break: break-all;
  margin-bottom: 14px;
  max-height: 80px;
  overflow: hidden;
  cursor: text;
  user-select: text;
}

.vault-card-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 0;
  animation: modalIn 0.2s ease;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color var(--t-base), background var(--t-base);
}

.modal-close:hover { color: var(--text-primary); background: var(--bg-elevated); }

.modal-body { padding: 24px; }
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.commit-info { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; font-family: var(--font-mono); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  min-width: 280px;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: toastIn 0.3s ease;
}

.toast-icon { font-size: 1rem; flex-shrink: 0; }
.toast-message { font-size: 0.875rem; flex: 1; }
.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; }

.toast.success { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.08); }
.toast.success .toast-icon { color: var(--green); }
.toast.error { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.08); }
.toast.error .toast-icon { color: var(--red); }
.toast.warning { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); }
.toast.warning .toast-icon { color: var(--orange); }
.toast.info .toast-icon { color: var(--blue); }
.toast.exiting { animation: toastOut 0.3s ease forwards; }

/* ── Logs Table ──────────────────────────────────────────────────────────── */
.logs-table-wrap { overflow-x: auto; }
.logs-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.logs-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.logs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.logs-table tr:hover td { background: var(--bg-elevated); }
.table-empty { text-align: center; color: var(--text-muted); padding: 40px; font-family: var(--font-body); }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-card {
  position: relative;
  overflow: hidden;
}

.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: shimmer 1.5s infinite;
}

.skeleton-list { display: flex; flex-direction: column; gap: 8px; }
.repo-row.skeleton-card { height: 72px; }

/* ── Deploy Status Badge ─────────────────────────────────────────────────── */
.deploy-progress-wrap { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }