@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }

  html {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #0f172a;
    color: white;
    overscroll-behavior: none;
    /* Support for safe areas on modern Android/iOS */
    padding-top: env(safe-area-inset-top);
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 4px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
  }

  /* Number inputs – remove spinners */
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }

  /* Date input dark styling */
  input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.5);
    cursor: pointer;
  }

  /* Select arrow */
  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
  }
}

@layer utilities {
  /* Bottom safe area for PWA on Android/iOS */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Full viewport height that respects the browser UI on mobile */
  .h-dvh {
    height: 100dvh;
  }
}