/* tailwind overrides and utility hooks */
:root {
  color-scheme: light;
  --header-offset: 4rem; /* fallback; will be updated by JS */
}
body { margin: 0; }

:root.dark {
  color-scheme: dark;
}

.dark {
  color-scheme: dark;
}

.toast-enter {
  opacity: 0;
  transform: translateY(0.5rem);
}

.toast-enter.toast-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast-leave {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 200ms ease, transform 200ms ease;
}

.spin-slow {
  animation: spin 1s linear infinite;
}

@keyframes pulse-soft {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}
/* Header top offset fix */
#app-header { margin-top: 0; z-index: 40; padding-left: 0 !important; padding-right: 0 !important; }
/* Desktop: fix header to top and align with sidebar (w-60 => 15rem) */
@media (min-width: 768px){
  #app-header{ position: fixed; top:0; left:15rem; right:0; width:auto; }
  /* запас задаётся переменной --header-offset */
  main.flex-1.bg-surface{ padding-top: var(--header-offset, 4rem) !important; }
}
/* Mobile: header spans full width */
@media (max-width: 767.98px){
  #app-header{ position: fixed; top:0; left:0; right:0; width:100%; }
  main.flex-1.bg-surface{ padding-top: var(--header-offset, 4rem) !important; }
}

/* universal fallback: if media queries miss, still apply */
main.flex-1.bg-surface{ padding-top: var(--header-offset, 4rem) !important; }

/* Ensure content sits below fixed header */
#app-content { padding-top: var(--header-offset, 4rem) !important; }
#app-content > *:first-child { margin-top: 0 !important; }
html { scroll-padding-top: var(--header-offset, 4rem); }

/* Remove top padding from main content wrapper to eliminate header gap */
main.flex-1.bg-surface { padding-top: 0 !important; }

/* Tables: ensure horizontal scrolling when content is wider */
.overflow-x-auto { overflow-x: auto; }
.overflow-x-auto > table { min-width: max-content; }

/* Mobile header refinements */
@media (max-width: 639px){
  #app-header{margin-top:0;padding-left:1rem !important;padding-right:1rem !important;height:3.5rem}
  #sidebar-open{height:2.5rem;width:2.5rem;border-radius:9999px;padding:0}
  #sidebar-open svg{height:1.25rem;width:1.25rem}
  /* Stack brand and subtitle, hide env badge */
  #app-header > div:first-child > div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  #app-header > div:first-child > div > span:last-child{display:none}
}
@media (min-width: 640px){
  /* Restore horizontal brand row, show env badge */
  #app-header > div:first-child > div{display:flex;flex-direction:row;align-items:center;gap:.75rem}
  #app-header > div:first-child > div > span:last-child{display:inline-flex}
}

/* Login primary button force color (CDN Tailwind sometimes late-loads config) */
.login-primary, form button[type="submit"].bg-primary{background-color:#2563eb !important;color:#fff !important}
.login-primary:hover, form button[type="submit"].bg-primary:hover{background-color:#1d4ed8 !important}

/* Unify header icon buttons sizing */
#app-header .md\:flex > *:is(a,button){height:2.5rem;width:2.5rem;border-radius:9999px;padding:0}
#theme-toggle{height:2.5rem;width:2.5rem;border-radius:9999px}

/* Mobile header/hamburger tweaks */
@media (max-width: 767px){
  #app-header{height:4rem;padding-left:1rem;padding-right:1rem}
  #sidebar-open{padding:0.75rem;border-radius:0.75rem}
  #sidebar-open svg{width:1.5rem;height:1.5rem}
}

/* Changelog modal animation */
#changelog-backdrop[data-state="open"]{display:flex}
#changelog-modal{transform:scale(.95);opacity:0;transition:transform .18s ease,opacity .18s ease}
#changelog-backdrop[data-state="open"] #changelog-modal{transform:scale(1);opacity:1}