/* Base reset + shared UI primitives */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; }
code, .mono { font-family: var(--font-mono); }

button {
  font: inherit; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  padding: .5em .9em; border-radius: var(--radius-sm); transition: background .12s, border-color .12s;
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-strong); }
button.danger { color: var(--danger); border-color: var(--danger); }

input, select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5em .6em; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: block; font-size: .85em; color: var(--ink-soft); margin: .6em 0 .2em; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.muted { color: var(--ink-soft); }
.badge { display: inline-block; font-size: .72em; padding: .15em .5em; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.badge.write { background: color-mix(in srgb, var(--cypress) 22%, transparent); color: var(--cypress); }
.badge.read { background: var(--surface-2); }
.badge.danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.row { display: flex; gap: .5rem; align-items: center; }
.spinner { width: 1.1em; height: 1.1em; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile-first single column; two panes side by side on wider screens. */
.panes { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 800px) {
  .panes { grid-template-columns: minmax(260px, 340px) 1fr; }
}

/* Tree rows: indent with padding (not margin) so the row box never exceeds the
   container, and let the name shrink/ellipsize instead of pushing actions out. */
.tree-row {
  display: flex; align-items: center; gap: .2rem;
  padding: .25rem .3rem; border-radius: var(--radius-sm);
}
.tree-row.selected { background: var(--surface-2); }
.tree-name {
  flex: 1 1 auto; min-width: 0;              /* min-width:0 is what allows shrinking */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: none; background: none; text-align: left; padding: .1em .2em;
}
.tree-actions { display: flex; gap: .15rem; flex: 0 0 auto; }
.icon-btn { padding: .1em .38em; line-height: 1.3; font-size: .95em; }
.tree-badges { display: flex; gap: .2rem; flex: 0 0 auto; }
/* On narrow screens hide the permission badge to keep actions on-screen. */
@media (max-width: 520px) {
  .tree-badges .badge.perm { display: none; }
}