:root {
  /* Brand color palette */
  --color-primary: #0f3d2e;
  --color-primary-light: #3a5a40;
  --color-accent: #8fae7a;
  --color-cream: #edede9;
  --color-ink: #2b2d42;

  /* Semantic aliases */
  --background-color: var(--color-cream);
  --text-color: var(--color-ink);
  --brand-color: var(--color-primary);
  --brand-color-light: var(--color-primary-light);
  --accent-color: var(--color-accent);
  --overlay-background-color: color-mix(in srgb, var(--color-ink) 7%, transparent);

  --border-radius: 2px;
}

body {
  background: var(--background-color);
  min-height: 100dvh;
  font-family: Parkinsans, Verdana, Geneva, Tahoma, sans-serif;
}

menu {
  border: 1px solid #04040438;
  width: 200px;
  background: var(--background-color);
  border-radius: var(--border-radius);
}

header {
  height: 70px;
  border-bottom: 0.5px solid #00000055;
  align-items: center;
}

.sidebar {
  width: 200px;
}

.menu-item {
  padding: 10px 5px;
  border-bottom: 1px solid #04040425;
  border-radius: var(--border-radius);

  cursor: pointer;

  &:hover {
    background: var(--overlay-background-color);
  }
}

/* HTMX content swap animation */
#content.htmx-added {
  opacity: 0;
  transform: translateY(8px);
}

#content {
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

/* Sidebar active state */
.sidebar a[aria-current="page"] {
  background: var(--color-primary-light);
  color: var(--color-cream);
  font-weight: 500;
}

.sidebar a[aria-current="page"] span[class*="i-tabler-"] {
  color: var(--color-cream);
}

/* HTMX request indicator (spinner) */
.htmx-indicator {
  display: none;
}

.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
  display: inline-block;
}

.svg-spinners--90-ring-with-bg {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath fill='black' d='M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  vertical-align: middle;
}

/* Alpine.js cloak — hides elements until Alpine is ready */
[x-cloak] {
  display: none !important;
}

/* Native dialog backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Ensure dialogs are properly centered */
dialog {
  padding: 0;
  border: none;
  max-height: 90vh;
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.m-x-auto {
  margin-inline: auto;
}

.aspect-square {
  aspect-ratio: 1/1;
}
/* Moved out of the templates (API todo 107): the content security policy
   allows no inline style attributes or <style> blocks. */
.brand-panel {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}