/* Utility classes to avoid inline styles */

/* Spacing */
.mt-0-5 { margin-top: 0.5rem; }
.mt-0-75 { margin-top: 0.75rem; }
.mt-1 { margin-top: 1rem; }
.mt-1-5 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mb-0-5 { margin-bottom: 0.5rem; }
.mb-0-75 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 1rem; }
.ml-0-5 { margin-left: 0.5rem; }
.mr-0-5 { margin-right: 0.5rem; }

/* Layout */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 1rem; }
.gap-1-5 { gap: 1.5rem; }

/* Typography */
.font-mono { font-family: var(--font-mono); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-secondary { color: var(--text-secondary); }

/* Misc */
.block { display: block; }
.inline-block { display: inline-block; }
.rounded { border-radius: 8px; }
.surface { background: var(--card-bg); }
.code-box {
  background: var(--card-bg);
  padding: 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* Layout grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-auto-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.grid-auto-180 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.grid-auto-220 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.grid-auto-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* Flex layouts */
.flex-gap { display: flex; gap: 1rem; flex-wrap: wrap; }
.flex-gap-75 { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.flex-grow { flex: 1; min-width: 220px; }

/* Sizing / visibility */
.hidden { display: none; }
.width-160 { width: 160px; }
.overflow-auto { overflow: auto; }
.margin-0 { margin: 0; }

/* Colors */
.text-error { color: var(--error); }
.text-secondary { color: var(--text-secondary); }

/* Tag helpers */
.tag-read { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.tag-write { background: rgba(37, 99, 235, 0.15); color: var(--primary); }

.pl-1 { padding-left: 1rem; }