@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

@theme {
  --font-family-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --color-background: oklch(var(--background));
  --color-foreground: oklch(var(--foreground));
  --color-card: oklch(var(--card));
  --color-card-foreground: oklch(var(--card-foreground));
  --color-popover: oklch(var(--popover));
  --color-popover-foreground: oklch(var(--popover-foreground));
  --color-primary: oklch(var(--primary));
  --color-primary-foreground: oklch(var(--primary-foreground));
  --color-secondary: oklch(var(--secondary));
  --color-secondary-foreground: oklch(var(--secondary-foreground));
  --color-muted: oklch(var(--muted));
  --color-muted-foreground: oklch(var(--muted-foreground));
  --color-accent: oklch(var(--accent));
  --color-accent-foreground: oklch(var(--accent-foreground));
  --color-destructive: oklch(var(--destructive));
  --color-destructive-foreground: oklch(var(--destructive-foreground));
  --color-border: oklch(var(--border));
  --color-input: oklch(var(--input));
  --color-ring: oklch(var(--ring));
  --color-success: oklch(var(--success));
  --color-success-foreground: oklch(var(--success-foreground));
  --color-info: oklch(var(--info));
  --color-info-foreground: oklch(var(--info-foreground));
  --color-attention: oklch(var(--attention));
  --color-attention-foreground: oklch(var(--attention-foreground));
  --border-radius: var(--radius);
  --border-radius-md: calc(var(--radius) - 2px);
  --border-radius-sm: calc(var(--radius) - 4px);
  --border-radius-lg: var(--radius);
}

@import "./shadcn.css";
@import "./calendar.css";

/* ── Liquid Glass UI Component ─────────────────────────────────────────────── */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Bento / Marquee animations ───────────────────────────────────────────── */
@keyframes marquee-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); }    }
.animate-marquee-left  { animation: marquee-left  22s linear infinite; }
.animate-marquee-right { animation: marquee-right 26s linear infinite; }

/* ── Noise overlay (teal bento cards) ─────────────────────────────────────── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ── PWA / Initial-load Splash Screen ────────────────────────────────────── *
 *                                                                             *
 * Markup lives in layouts/_splash.html.erb.                                  *
 * Default state: class="app-splash--hidden" → display:none.                  *
 * JS (manageSplash in application.js) removes that class on the first load   *
 * this session, drives the progress bar, then fades out via                  *
 * app-splash--gone and adds app-splash--hidden back. morphdom sees the same  *
 * class on every Turbo nav and makes no DOM change.                          *
 * ─────────────────────────────────────────────────────────────────────────── */

/* Higher specificity (0,1,1,0) beats bare ID (0,1,0,0) — no !important. */
#app-splash.app-splash--hidden { display: none; }

#app-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #0B1228 0%, #0e1d3f 55%, #112068 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s;
}

#app-splash.app-splash--gone {
  opacity: 0;
  visibility: hidden;
}

.app-splash__mark {
  width: 96px;
  height: 96px;
}

.app-splash__mark path {
  stroke-width: 8.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.app-splash__chev-top { stroke: #fff; }
.app-splash__chev-bot { stroke: #5C8DF6; }

@media (prefers-reduced-motion: no-preference) {
  .app-splash__chev-top,
  .app-splash__chev-bot {
    animation: app-splash-chev 1.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }
  .app-splash__chev-bot { animation-delay: 0.22s; }
}

@keyframes app-splash-chev {
  0%         { transform: translateY(0);   opacity: 1;    }
  28%        { transform: translateY(7px); opacity: 0.55; }
  56%, 100%  { transform: translateY(0);   opacity: 1;    }
}

.app-splash__wordmark {
  margin-top: 22px;
  color: #fff;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-splash__tagline {
  margin-top: 8px;
  color: #93A3C7;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.app-splash__bar {
  margin-top: 36px;
  width: 180px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.app-splash__bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5C8DF6, #93C5FD);
  transition: width 0.3s ease;
}

/* ── Mobile page-transition overlay ──────────────────────────────────────── */
.page-transition-overlay {
  background: linear-gradient(135deg, #0B1228 0%, #0e1d3f 55%, #112068 100%);
}

.page-transition__bar {
  margin-top: 36px;
  width: 180px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  position: relative;
}

.page-transition__bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #5C8DF6, #93C5FD, transparent);
  animation: page-transition-sweep 1.2s ease-in-out infinite;
}

@keyframes page-transition-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}

/*
  Disable all browser zoom gestures — three-layer approach:

  Layer 1 (this CSS):
    html { touch-action: pan-x pan-y }
      Omitting `pinch-zoom` from the value tells the browser pinch gestures should NOT
      trigger zoom. Handles Android Chrome reliably.
    Interactive elements { touch-action: manipulation }
      `manipulation` = pan-x pan-y pinch-zoom. Its effective value is intersected with
      ancestor touch-actions along the hit-test chain. Since `html` has only `pan-x pan-y`,
      the intersection is still `pan-x pan-y` (no pinch-zoom). The `manipulation` keyword
      additionally disables double-tap zoom and removes the 300 ms synthetic click delay.

  Layer 2 (JS in application.js):
    Prevent `gesturestart/change/end` — iOS Safari 10+ ignores both the viewport
    `user-scalable=no` attribute and CSS `touch-action` for zoom gestures. These
    webkit-specific events are the only reliable hook for blocking iOS pinch-to-zoom.

  Layer 3 (viewport meta tag in application.html.erb):
    maximum-scale=1, user-scalable=no — prevents zoom on older Android WebViews
    and provides an additional signal to supporting browsers.
*/
html {
  touch-action: pan-x pan-y;
}

a,
button,
[type="button"],
[type="submit"],
[type="reset"],
input,
select,
textarea,
label,
summary,
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"] {
  touch-action: manipulation;
}

/*
  Prevent automatic zoom on input focus in iOS Safari and Android Chrome.
  Both browsers zoom in when a focused input has font-size < 16px.
  This rule enforces the 16px minimum on touch-screen viewports without
  affecting desktop layout or disabling user-initiated pinch-to-zoom.
  Covers: native inputs, textareas, selects, and Select2's search field.
*/
@media screen and (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="image"]),
  textarea,
  select,
  .select2-search__field {
    font-size: 16px !important;
  }
}