html, body { height: 100%; }
.tree button.toggle { transition: transform 0.15s ease; }
.tree button.toggle[aria-expanded="true"] { transform: rotate(90deg); }
.scrollbar-thin { scrollbar-width: thin; }
.grid-props label { font-size: 0.85rem; }

/* Approx of Tailwind utility bundles used via custom classes */
.btn { padding: 0.5rem 0.75rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.06); font-size: 0.875rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease; cursor: pointer; }
.btn-primary { background-color: #2563eb; color: white; }
.btn-primary:hover { background-color: #1d4ed8; }
.btn-outline { border: 1px solid #d1d5db; background-color: transparent; }
.btn:hover { background-color: rgba(0,0,0,0.04); }
.dark .btn:hover { background-color: rgba(255,255,255,0.06); }
.btn-outline:hover { background-color: var(--accent-soft); border-color: var(--accent); }
.dark .btn-outline:hover { background-color: rgba(255,255,255,0.08); border-color: var(--accent-700); }
.btn-active { background-color: var(--accent); color: #fff; border-color: var(--accent-700); }
.dark .btn-active { background-color: var(--accent-700); color: #fff; }

/* Myk aktiv-status som matcher tema (bruk for moduser som er aktive) */
.btn-soft-active { background-color: var(--accent-soft); border: 1px solid var(--accent); }
.dark .btn-soft-active { background-color: rgba(255,255,255,0.08); border-color: var(--accent-700); }
.badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.5rem; font-size: 0.75rem; background-color: #f3f4f6; }
.card { border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.06); padding: 1rem; }

/* Dark mode refinements for our custom classes */
.dark .badge { background-color: #1f2937; color: #e5e7eb; }

/* Smooth theme transitions for key UI elements */
html, body, header, main, .card, .btn, .badge, input, select, .tree div { 
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Theme variables (CSS custom properties) */
:root {
  --accent: #2563eb;
  --accent-700: #1d4ed8;
  --accent-soft: #e0ecff;
}
.theme-blue { --accent:#3b82f6; --accent-700:#1d4ed8; --accent-soft:#dbeafe; }
.theme-ocean { --accent:#14b8a6; --accent-700:#0d9488; --accent-soft:#ccfbf1; }
.theme-emerald { --accent:#10b981; --accent-700:#059669; --accent-soft:#d1fae5; }
.theme-sunset { --accent:#f97316; --accent-700:#ea580c; --accent-soft:#ffedd5; }

.btn-primary { background-color: var(--accent); }
.btn-primary:hover { background-color: var(--accent-700); }
.badge { background-color: var(--accent-soft); }

/* Ruler visibility improvements */
canvas#overlay { outline: none; }