/* ============================================================
   OUTFIT — LOCAL STATIC FONT (assets/fonts/), NO GOOGLE CDN
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{overflow-x:hidden;font-size:16px;line-height:28px;color:#000000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---------------------------------------------------------------------------
   BUTTON COLOR FALLBACK (always-present, static)
   The .btn component styles are defined in app/views/tailwind.php inside a
   `@layer components` block that the CDN Tailwind JIT compiles in the browser
   AFTER load. During that window (and if the CDN is slow/blocked) a solid .btn
   inherited body{color:#000}, rendering a blue button with BLACK text. These
   rules live in the real stylesheet (loaded every request) so button contrast
   is correct regardless of when — or whether — the JIT layer arrives. They use
   the same --btn-* theme variables as tailwind.php, so a themed button stays in
   sync; only the guaranteed base color pairing is duplicated here.
   NOTE: `.btn.primary` was never defined anywhere (only white/light/ghost/etc.
   existed), yet dashboard/wallet markup uses `class="btn primary"` — it now
   resolves to the correct solid-blue + white-text pairing.
   --------------------------------------------------------------------------- */
.btn {
    color: var(--btn-text-color, #ffffff);
    background-color: var(--btn-background, #3b82f6);
    border-color: var(--btn-border-color, #3b82f6);
}
/* Base hover = the themed hover blue. Scoped so it applies ONLY to solid buttons
   (base .btn + solid variants), NOT the low-emphasis ones — a ghost/light/outline
   button must not turn blue on hover. The :not() list keeps the low-emphasis
   variants out; each gets its own subtle hover below. */
.btn:hover:not(:disabled):not(.ghost):not(.light):not(.outline):not(.white) {
    background-color: var(--btn-background-hover, #2563eb);
}
/* Solid variants — force readable text so they never inherit body{color:#000} */
.btn.primary { color: var(--btn-text-color, #ffffff); background-color: var(--btn-background, #3b82f6); }
.btn.secondary { color: #ffffff; background-color: #4b5563; }
.btn.emerald { color: #ffffff; }
.btn.rose { color: #ffffff; }
.btn.slate { color: #ffffff; }
.btn.violet { color: #ffffff; }
.btn.cyan { color: #ffffff; }
.btn.amber { color: #0f172a; }
/* Low-emphasis variants keep DARK text on a light surface (do not whiten),
   AND get a subtle gray hover — NEVER the blue base hover. These hover rules
   must beat the base .btn:hover on specificity + source order, so they carry the
   variant class explicitly. */
.btn.white { color: #111827; background-color: #ffffff; }
.btn.white:hover:not(:disabled) { background-color: #f9fafb; color: #111827; }
.btn.light { color: #374151; background-color: #f9fafb; }
.btn.light:hover:not(:disabled) { background-color: #f3f4f6; color: #111827; }
.btn.outline { color: #374151; background-color: #ffffff; }
.btn.outline:hover:not(:disabled) { background-color: #f9fafb; color: #111827; }
.btn.ghost { color: #374151; background-color: transparent; }
.btn.ghost:hover:not(:disabled) { background-color: #f3f4f6; color: #111827; }

/* Visible KEYBOARD focus ring. The .btn @apply had `focus-visible:outline-none`
   with no replacement ring, so keyboard users got no focus indicator (an a11y
   gap; sibling components like .btn-dropdown/.tabs-trigger already ring). We use
   :focus-visible so it appears ONLY on keyboard nav, never on mouse clicks. The
   ring colour follows the theme's primary/brand so it matches the site accent.
   A 2px offset lifts the ring off solid buttons; box-shadow avoids disturbing
   layout (no outline reflow) and works on any variant/background. */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background, #ffffff),
                0 0 0 4px var(--color-primary, #2563eb);
}

/* SOLID badges (saturated bg + white text) are defined only in the CDN JIT
   layer, so they share the same race as .btn — pin their text color statically.
   The TINTED badges (badge-success/warning/error/info/etc.) are light-bg +
   dark-text by default and stay readable without the JIT, so they need no
   fallback here. */
.badge-primary { color: #ffffff; background-color: #2563eb; }
.badge-secondary { color: #ffffff; background-color: #4b5563; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    font-display: swap;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.material-symbols-outlined { font-display: swap; }

/* ---------------------------------------------------------------------------
   Mobile behaviour hardening (additive, no layout impact):
   - text-size-adjust: stop iOS Safari from auto-inflating text in landscape.
   - touch-action: manipulation: remove the 300ms tap delay on older mobile
     browsers for snappier taps.
   - tap-highlight-color: remove the grey flash box on tap for a native feel.
   The site already ships body{overflow-x:hidden} and a viewport meta, plus
   responsive per-view mobile/desktop layouts — these only refine touch feel.
   --------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
a, button, [role="button"], input[type="submit"], input[type="button"], label, summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}
/* Raster media never forces horizontal overflow on small screens. Scoped to
   img/video only — SVG/canvas are excluded on purpose: 17 inline SVGs use
   width="100%"/w-full and 294 use explicit pixel sizes, so a blanket svg rule
   risks subtle icon layout changes that can't be browser-verified here. */
img, video {
    max-width: 100%;
}