/* ============================================================
 *  style.css   —   Custom polish on top of TailwindCSS
 *  Focus: mobile feel, safe-area, smooth scroll, base type
 * ============================================================ */

:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
html, body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;          /* stop pull-to-refresh flicker */
}
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  min-height: 100dvh;                       /* dynamic vh — handles mobile browser chrome */
}
html.dark body {
  background: #0b1220;
  color: #e2e8f0;
}

/* Headings get the display font */
h1, h2, h3 { font-family: 'Sora', 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; }

/* ---------- Inputs feel native on mobile ---------- */
input, select, textarea, button {
  font-family: inherit;
  font-size: 16px;                          /* iOS won't zoom if >= 16px */
}
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* Number inputs: hide spinners — they look ugly on mobile */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ---------- Scrollbar (subtle, only on desktop) ---------- */
@media (hover: hover) {
  ::-webkit-scrollbar         { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb   { background: rgba(100, 116, 139, .35); border-radius: 999px; }
  ::-webkit-scrollbar-track   { background: transparent; }
}

/* ---------- Active-press feedback on touch ---------- */
.btn-press {
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}
.btn-press:active { transform: scale(0.97); }

/* ---------- Safe area paddings ---------- */
.safe-top    { padding-top:    var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }

/* ---------- Card surface ---------- */
.card {
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px -8px rgba(15, 23, 42, 0.10);
}
html.dark .card {
  background: #131b2e;
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.6);
}

/* ---------- Subtle gradient text (used for headings) ---------- */
.text-gradient {
  background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Skeleton (used while loading data) ---------- */
.skel {
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
  border-radius: 0.75rem;
}
html.dark .skel {
  background: linear-gradient(90deg, #1e293b 0%, #243049 50%, #1e293b 100%);
  background-size: 200% 100%;
}
@keyframes skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Bottom navigation safe area ---------- */
.bottom-nav {
  padding-bottom: var(--safe-bottom);
}

/* ---------- Hide print-only elements on screen ---------- */
.print-only { display: none; }
@media print {
  .print-only       { display: block; }
  .no-print         { display: none !important; }
  body              { background: white; color: black; }
}

/* ============================================================
 *  BRAND COLOR FALLBACKS
 *  -------------------------------------------------------------
 *  The "brand-*" palette is a custom Tailwind color defined in
 *  js/app.js via the Play CDN runtime config. On some devices
 *  (mobile browsers, slow networks, cached old SW), that config
 *  fails to apply before the Tailwind CDN paints, so classes
 *  like .bg-brand-600 produce NO background — leaving white text
 *  invisible on the white body background.
 *
 *  These fallbacks hard-code the same indigo palette values that
 *  app.js declares. If Tailwind's config DOES load, its generated
 *  styles are identical, so there is no visual conflict.
 * ============================================================ */

:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;
}

/* ---- Solid backgrounds ---- */
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-brand-700 { background-color: var(--brand-700); }
.bg-brand-800 { background-color: var(--brand-800); }

/* ---- Hover state used on login button ---- */
.hover\:bg-brand-700:hover { background-color: var(--brand-700); }

/* ---- Text colors ---- */
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
html.dark .dark\:text-brand-400 { color: var(--brand-400); }
html.dark .dark\:bg-brand-600   { background-color: var(--brand-600); }

/* ---- Focus border ---- */
.focus\:border-brand-500:focus { border-color: var(--brand-500); }

/* ---- Custom shadow defined in app.js (boxShadow.pop) ---- */
.shadow-pop { box-shadow: 0 20px 50px -20px rgba(79, 70, 229, 0.45); }

/* ---- Gradient stops ----
 * Tailwind 3's gradient mechanism uses CSS custom properties.
 * .bg-gradient-to-br paints: linear-gradient(to bottom right, var(--tw-gradient-stops))
 * We replicate the same variable shape so brand stops compose with
 * built-in stops (e.g. "from-brand-600 via-brand-700 to-indigo-900").
 */
.from-brand-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position, );
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position, );
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-600 {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position, );
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position, );
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-brand-700 {
  --tw-gradient-to: rgb(67 56 202 / 0) var(--tw-gradient-to-position, );
  --tw-gradient-stops: var(--tw-gradient-from), #4338ca var(--tw-gradient-via-position, ), var(--tw-gradient-to);
}
.to-brand-700 { --tw-gradient-to: #4338ca var(--tw-gradient-to-position, ); }
.to-brand-800 { --tw-gradient-to: #3730a3 var(--tw-gradient-to-position, ); }

/* ---- Make sure bg-gradient-to-br itself paints even if Tailwind's
 *      utility didn't get generated. ---- */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)));
}