/* Custom styles and animations for NextLevelInstala PWA */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

[x-cloak] {
  display: none !important;
}

:root {
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: var(--font-main);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
}

/* Mobile Safe Area Insets */
.safe-area-inset-bottom {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.safe-area-inset-top {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Mobile touch improvements */
@media (max-width: 640px) {
  /* Prevent iOS zoom on input focus by ensuring at least 16px text */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Smooth momentum scrolling for mobile horizontal containers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Glassmorphism utility */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .glass {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Smooth micro-interactions */
.btn-press {
  transition: all 0.15s ease;
}
.btn-press:active {
  transform: scale(0.96);
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
}

/* Badge pulse for live alerts */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

.pulse-alert {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Ensure all inputs and textareas have generous, readable padding so the first letter is never clipped */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea,
.form-input,
.form-select,
.form-textarea {
  padding-left: 1rem !important; /* 16px */
  padding-right: 1rem !important; /* 16px */
  text-indent: 0 !important;
}

/* Inputs with search icon on the left */
input.pl-8,
.relative > input[type="text"].pl-8,
.relative > input.pl-8 {
  padding-left: 2.25rem !important; /* 36px */
}

input.pl-9,
.relative > input.pl-9 {
  padding-left: 2.5rem !important; /* 40px */
}

input.pl-10,
.relative > input.pl-10 {
  padding-left: 2.75rem !important; /* 44px */
}