:root {
  --cw-primary: var(--brand-primary);
  --cw-dark: var(--text-primary);
  --cw-emerald: var(--brand-accent);
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--cw-dark);
}

.bg-primary {
  background-color: var(--cw-primary) !important;
}

.btn-primary {
  background-color: var(--cw-primary);
  border-color: var(--cw-primary);
}

.sidebar .nav-link {
  color: var(--cw-dark);
  border-radius: 0.375rem;
  margin: 0.125rem 0.5rem;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--cw-primary);
}

.cms-content img {
  max-width: 100%;
  height: auto;
}

.menu-sortable {
  min-height: 40px;
}

.menu-sortable li {
  list-style: none;
  margin: 4px 0;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}

.menu-sortable ol {
  margin: 8px 0 0 24px;
  padding: 0;
}

.menu-sortable-placeholder {
  border: 2px dashed var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  height: 42px;
  margin: 4px 0;
  border-radius: 0.375rem;
}

.handle {
  cursor: grab;
}

.catalog-img,
.catalog-img-placeholder {
  height: 180px;
  object-fit: cover;
}

.catalog-detail-img,
.catalog-detail-img-placeholder {
  height: 320px;
  object-fit: cover;
}

.catalog-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.25rem;
}

.catalog-card {
  transition: transform 0.15s ease;
}

.catalog-card:hover {
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  #sidebar.collapsed {
    display: block !important;
  }
}

#sidebar.collapsed {
  display: none !important;
}