/*
 * Finanflix design tokens — loaded via Sprockets application.css.
 * Ensures base colors and CTAs work even when Tailwind build is missing or stale.
 */
:root {
  --color-primary-400: #ff6d3d;
  --color-primary-500: #fe4003;
  --color-primary-600: #f03300;
  --color-primary-700: #c92900;
  --color-brand-500: #702dff;
  --color-brand-700: #4c30b9;
  --color-background: #1a1a23;
  --color-surface: #222237;
  --color-surface-elevated: #282844;
  --color-surface-muted: #363657;
  --color-border: #363657;
  --color-foreground: #f3f4f6;
  --color-foreground-muted: #9ca3af;
  --color-foreground-subtle: #71767f;
  --radius-btn: 1.5rem;
  --radius-card: 1.5rem;
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* Primary CTAs still using legacy bg-slate-800 */
a.bg-slate-800.text-white,
button.bg-slate-800,
input[type="submit"].bg-slate-800 {
  background-color: var(--color-primary-600);
  color: #fff;
}

a.bg-slate-800.text-white:hover,
button.bg-slate-800:hover,
input[type="submit"].bg-slate-800:hover {
  background-color: var(--color-primary-700);
}

/* Ghost buttons: bg-white + text-foreground (loads after tailwind via application.css) */
html.dark :is(a, button, input[type="submit"], input[type="button"]).bg-white,
html.dark :is(a, button, input).border-slate-300.bg-white {
  background-color: var(--color-surface);
  color: var(--color-foreground);
  border-color: var(--color-border);
}

html.dark .btn-secondary,
html.dark .btn-outline,
html.dark a.btn-secondary,
html.dark a.btn-outline,
html.dark button.btn-secondary {
  color: var(--color-foreground);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

@layer base {
  button {
    cursor: pointer;
  }
}

/* Financial numbers rendered in mono with tabular spacing */
.font-numeric {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 0.9375em;
}

/* ── Global micro-transitions ───────────────────────────────────────────── */
a, button, [role="button"], input, select, textarea {
  transition-property: color, background-color, border-color, opacity, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* ── Card accent ─────────────────────────────────────────────────────────── */
.card-accent {
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary-500, #ff3e00);
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Pagy nav — tuned for Finanflix dark surfaces */
.pagy {
  --B: 1;
  --H: 220;
  --S: 13%;
  --L: 50%;
  --A: 1;
  --spacing: 0.25rem;
  --padding: 0.75rem;
  --rounding: 0.375rem;
  --border-width: 1px;
  --font-size: 0.875rem;
  --font-weight: 600;
  --line-height: 1.75;

  --text:               #9ca3af;
  --text-hover:         #f3f4f6;
  --text-current:       #1a1a23;
  --background:         #222237;
  --background-hover:   #282844;
  --background-current: #fe4003;
  --background-input:   #363657;

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing);
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--spacing);
}

.pagy a:not([role="separator"]) {
  display: block;
  text-decoration: none;
  background-color: var(--background);
  padding: calc(var(--padding) / 3) var(--padding);
  border: var(--border-width) solid var(--color-border, #363657);
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover {
  background-color: var(--background-hover);
  color: var(--text-hover);
}

.pagy a:not([href]) {
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) {
  opacity: 0.6;
}

.pagy a[aria-current] {
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--background-current);
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
}

.pagy label input {
  all: unset;
  border: var(--border-width) solid var(--background-current);
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
}