/* Shared application chrome. Client dashboards keep their own template styles. */
:root {
  --control-h: 32px;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --font-ui: Inter, "Segoe UI", Arial, sans-serif;
}

.app-shell .btn-primary,
.app-shell .secondary,
.app-shell .source-action,
.app-shell .workspace-modes button,
.app-shell .btn-icon {
  height: var(--control-h);
  min-height: var(--control-h);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.app-shell .btn-primary,
.app-shell .source-action.btn-primary {
  border: 1px solid var(--purple);
  background: var(--purple);
  color: #fff;
  padding: 0 14px;
}
.app-shell .btn-primary:hover,
.app-shell .source-action.btn-primary:hover { background: var(--purple-hover); border-color: var(--purple-hover); }
.app-shell .btn-primary:disabled,
.app-shell .secondary:disabled,
.app-shell .btn-icon:disabled { opacity: .45; cursor: not-allowed; }

.app-shell .secondary {
  border: 1px solid var(--border);
  background: var(--elevated);
  color: #fff;
  padding: 0 12px;
}
.app-shell .secondary:hover { background: #343c44; border-color: var(--border-hover); }

.app-shell .btn-icon {
  width: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--subtext);
}
.app-shell .btn-icon:hover { color: #fff; border-color: var(--border-hover); background: var(--elevated); }

.app-shell .btn-danger,
.app-shell .menu-danger {
  color: #ffb4b4;
}
.app-shell .btn-danger {
  border: 1px solid rgba(255, 82, 82, .45);
  background: rgba(255, 82, 82, .12);
  color: #ffd0d0;
  height: var(--control-h);
  border-radius: var(--radius);
  padding: 0 12px;
}
.app-shell .menu-danger:hover,
.app-shell .btn-danger:hover { background: rgba(255, 82, 82, .22); color: #fff; }

.app-shell .segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--elevated);
}
.app-shell .segmented button {
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--subtext);
}
.app-shell .segmented button:last-child { border-right: 0; }
.app-shell .segmented button.active,
.app-shell .segmented button[aria-pressed="true"] {
  background: var(--purple);
  color: #fff;
}

.app-shell .workspace-modes { align-items: center; }
.app-shell .workspace-modes > button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--subtext);
  padding: 0 12px;
}
.app-shell .workspace-modes > button.active,
.app-shell .workspace-modes > button[aria-pressed="true"] {
  background: rgba(169, 49, 255, .16);
  border-color: rgba(169, 49, 255, .55);
  color: #fff;
}

.app-shell input:not([type=file]):not([type=checkbox]):not([type=color]),
.app-shell select,
.app-shell textarea {
  border-radius: var(--radius);
}

.app-shell .source-dialog,
.app-shell dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: #fff;
}

.app-shell .status-line,
.app-shell .editor-status {
  color: var(--muted);
  font-size: 12px;
}

.login-screen { min-height: 100vh; display: grid; place-items: center; background: #12171b; color: #e8edf2; position: relative; z-index: 20; }
.login-card { width: min(420px, calc(100% - 32px)); display: grid; gap: 10px; padding: 28px; border: 1px solid #2c353c; border-radius: 12px; background: #1a2127; }
.login-card h1 { margin: 0; font-size: 1.4rem; }
.login-card .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: #A931FF; color: white; font-weight: 700; }
.login-screen[hidden],
.app-shell[hidden] { display: none !important; }