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

html,
body,
#root {
  height: 100%;
}

/* Notizarr is dark-first with no light mode, so this is unconditional —
   tells the browser to use its own dark widget theme for anything it
   renders itself: <select> dropdown popups, <input type="time/date">
   pickers, checkboxes, scrollbars. Without it those stay light regardless
   of how the surrounding elements are styled, since that part of the UI
   isn't actually drawn by our CSS. */
:root {
  color-scheme: dark;
}

body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* iOS Safari auto-zooms the page on focus for any text input under 16px,
   and doesn't always zoom back out cleanly — forcing 16px here (rather
   than bumping every input's Tailwind text size, which would also change
   how they look) is the standard fix. !important is genuinely needed, not
   just convenient: Tailwind's own size utilities (e.g. text-sm) are class
   selectors, which beat a plain `input { }` element selector in the
   cascade regardless of source order, so a bare rule here silently loses
   to whatever text-size class an individual input uses. */
input,
textarea,
select {
  font-size: 16px !important;
}

/* Safe-area padding for iPhone notch / Dynamic Island / home indicator. */
.safe-top {
  padding-top: env(safe-area-inset-top);
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: theme('colors.base.border');
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}