/* === BASE === */

html,
body {
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  background: var(--page);
  color: var(--text);
  min-height: 100vh;
  padding: 2.25rem 1rem 3rem;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

/* === FOCUS VISIBILITY ===
   Keyboard-only focus rings (mouse clicks don't trigger :focus-visible).
   One accent ring for every interactive element so nothing is ever
   focused silently. */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(83, 74, 183, .45);
  border-radius: 8px;
}

/* Inputs/dropdowns already paint their own focus glow — keep it stronger
   and skip the generic ring so it isn't doubled up. */
.search-wrap input:focus-visible,
.fg input:focus-visible,
.fg textarea:focus-visible,
.num-input:focus-within,
.dd-toggle:focus-visible,
.date-toggle:focus-visible,
.cell-edit:focus-visible {
  box-shadow: 0 0 0 3px rgba(83, 74, 183, .45);
}

/* === REDUCED MOTION ===
   Honor the OS-level "reduce motion" preference: collapse animations and
   transitions to near-instant so motion-sensitive users aren't affected. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Drop the lift-on-hover transforms entirely — feedback comes from
     color/opacity instead. */
  .btn-add:hover,
  .btn-primary:hover {
    transform: none;
  }
}

/* === SCROLLBARS === */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 50, 35, .22) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(60, 50, 35, .2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 50, 35, .34);
  background-clip: padding-box;
  border: 2px solid transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

:root[data-theme="dark"] * {
  scrollbar-color: rgba(255, 245, 225, .18) transparent;
}

:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(255, 245, 225, .16);
  background-clip: padding-box;
}

:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 245, 225, .3);
  background-clip: padding-box;
}

/* === RESPONSIVE === */

@media (max-width: 640px) {
  body {
    padding: 1.25rem .75rem 2rem;
  }
}