* { box-sizing: border-box; }

body {
  background-color: #fcf9f8;
  color: #323233;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, .font-serif {
  font-family: 'Noto Serif', serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.hairline-grid {
  background-image: linear-gradient(to right, #b2b2b1 1px, transparent 1px),
                    linear-gradient(to bottom, #b2b2b1 1px, transparent 1px);
  background-size: 100px 100px;
  opacity: 0.05;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #fcf9f8; }
::-webkit-scrollbar-thumb { background: #b2b2b1; }

#app {
  transition: opacity 200ms ease;
}

#app.fade-out {
  opacity: 0;
}

#toast.visible {
  opacity: 1;
}

@media (max-width: 767px) {
  #top-nav { padding-left: 1.5rem; padding-right: 1.5rem; }
  #top-nav { padding-top: 1rem; padding-bottom: 1rem; }
}

/* Scroll indicator for horizontally scrollable tables */
.scroll-hint {
  position: relative;
}
.scroll-hint::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(252,249,248,0.9));
  pointer-events: none;
  transition: opacity 0.3s;
}
.scroll-hint.scrolled-end::after {
  opacity: 0;
}