@import "tailwindcss";

/* Exclude the generated tauri-specta bindings from Tailwind's content scan.
   It contains no CSS classes (only TS types/command wrappers), and scanning a
   large generated file can confuse Tailwind v4's automatic class detection. */
@source not "./lib/api/bindings.ts";

/* Custom theme variables for JellyTau */
@theme {
  --color-jellyfin: #00a4dc;
  --color-jellyfin-dark: #0085b3;
  --color-background: #101010;
  --color-surface: #1a1a1a;
  --color-surface-hover: #252525;
}

/* Safe-area insets — the single source of edge padding for the whole app.
 *
 * TRACES: UR-066 | DR-112
 *
 * Two independent sources have to be folded together:
 *
 *  - `env(safe-area-inset-*)` — iOS/desktop, and the *display cutout* on
 *    Android. Requires `viewport-fit=cover` (see src/app.html) or it is 0px.
 *  - `var(--jt-inset-*)` — real Android `WindowInsets` (status bar, navigation/
 *    gesture bar, cutout) pushed in from Kotlin, because Android WebView never
 *    reports the *system bars* through `env()`. See WindowInsetsBridge.kt and
 *    $lib/utils/safeArea.ts.
 *
 * `max()` takes whichever is real on this platform; both are 0 on desktop.
 * Consumers must use `--safe-*` and never `env()` directly — a bare `env()` is
 * silently 0 for the Android system bars, which is what put the bottom nav
 * under the navigation bar on 3-button-nav devices.
 *
 * Applied at the edges that own them: the app shell (top/left/right) and
 * BottomUi (bottom, so its surface colour extends behind the gesture bar).
 * Deliberately NOT applied to `body` — the shell is `h-screen`, and body
 * padding would push 100vh past the viewport, and `position: fixed` overlays
 * (the video/audio players) ignore body padding anyway.
 */
:root {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--jt-inset-top, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--jt-inset-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--jt-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--jt-inset-left, 0px));
}

/* Global styles */
html, body {
  @apply h-full;
  background-color: var(--color-background);
}

/* Native-video compositing (Android).
 *
 * TRACES: UR-003, UR-004 | DR-150
 *
 * When ExoPlayer renders into a SurfaceView *behind* the WebView, every opaque
 * layer between the viewport and that surface hides the video. The WebView
 * itself is made transparent by `"transparent": true` in
 * tauri.android.conf.json; these rules clear the app's own painted backgrounds.
 *
 * Scoped to `[data-native-video="active"]` — set on <html> by
 * $lib/stores/nativeVideo.ts only while a native video session is on screen —
 * because every other screen genuinely needs its opaque background. The app
 * shell (+layout.svelte) also paints --color-background across the viewport, so
 * it is cleared here too; the shell is the layer directly over the surface.
 *
 * `background: transparent` (not a colour) is required: an alpha-0 colour still
 * composites in some WebView versions.
 */
html[data-native-video="active"],
html[data-native-video="active"] body,
html[data-native-video="active"] [data-app-shell] {
  background: transparent !important;
}

body {
  @apply text-white antialiased;
  font-family: system-ui, -apple-system, sans-serif;
}
