/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Theme palette — Option B (CTA + accent only; emerald surfaces preserved).
 *
 * Repaints the daisyUI 4 emerald theme's CTA, neutral, and semantic tokens
 * in place. The base surface stack (--b1/--b2/--b3/--bc) is intentionally
 * left as emerald's defaults: white-ish page, light-grey card, near-black
 * text. Forcing a warm-beige surface stack onto a data-dense admin caused
 * cascading contrast problems (inputs, disabled controls, secondary tokens
 * all collided with the card). The warm beige aesthetic is owned by the
 * landing page via the `landing_*` Tailwind tokens in tailwind.config.js,
 * which bypass daisyUI entirely.
 *
 * Layouts still ship data-theme="emerald" and the prebuilt daisyUI CDN
 * bundle; this block runs after that bundle in document order, so
 * same-specificity overrides win.
 *
 * Values map the design references:
 *   #111111  Foreground   -> --p (primary CTAs go from green to black)
 *   ~#1F1F1F Black-chrome -> --n (oklch 13.97% 0 0; topbar / footer chrome)
 *   #E63B2E  Accent       -> --a (use sparingly: CTAs / eyebrow only)
 *   #22C55E Success     -> --su
 *   #EAB308 Warning     -> --wa
 *   #EF4444 Error       -> --er
 */
[data-theme="emerald"] {
  /* Surface stack — cool ice-grey page with white cards, matching the
     original emerald look. The page picks up a subtle blue-grey tint
     while cards stay pure white so they pop. Inputs (which default to
     bg-base-100 in daisyUI 4) end up white because we flip --b1 white
     and put the page tint on the layout wrapper instead — see the
     `body` rule below. */
  --b1: 100%   0 0;        /* card / input surface — pure white */
  --b2: 96.84% 0.007 247;  /* slightly cooler grey for raised surfaces */
  --b3: 92.9%  0.013 256;  /* borders / dividers / hover */
  --bc: 17.76% 0 0;        /* base text — near black */

  --p:  17.76% 0 0;
  --pc: 100%   0 0;

  --s:  35% 0 0;
  --sc: 100% 0 0;

  /* #E63B2E (landing_accent) → exact oklch */
  --a:  60.43% 0.2237 28.85;
  --ac: 100%   0 0;

  --n:  13.97% 0 0;
  /* --nc doubles as the layout page-wrapper background (the layouts use
     `bg-neutral-content` on the content frame). Exact value from the
     pre-Option-B emerald build: oklch(0.984625 0.001706 247.839).
     Still readable as text-on-neutral when used semantically. */
  --nc: 98.4625% 0.001706 247.839;

  --in:  70%    0.13  225;
  --inc: 100%   0 0;
  --su:  70.79% 0.187 142.5;
  --suc: 100%   0 0;
  --wa:  75.84% 0.158 85.92;
  --wac: 17.76% 0 0;
  --er:  63.68% 0.225 25.33;
  --erc: 100%   0 0;
}

/*
 * Form polish — surface-agnostic.
 *
 * Only the rules that improve legibility regardless of bg color:
 *   B  card edge + corner radius
 *   D  required marker uses accent red (matches errors semantically)
 *   E  hairline divider under section headers
 *
 * Input/radio/checkbox/toggle white-fill rules were removed — emerald's
 * defaults already render correctly on its own white surfaces.
 */

/* B — card edge & corner */
[data-theme="emerald"] .card {
  border: 1px solid oklch(var(--bc) / 0.08);
  border-radius: 1rem;
}

/* Bare `.btn` (no color modifier) defaults to --b2 in daisyUI, which
   sits ~2% lightness off from --nc (the page tint) and blurs into the
   background. Bump fill + border to --b3 (matching daisyUI's borderless
   look for color-modified buttons). Color/style modifiers
   (.btn-primary, .btn-accent, .btn-ghost, .btn-link, .btn-outline, etc.)
   are excluded so their painted treatments stay intact. */
[data-theme="emerald"] .btn:not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-neutral):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-error):not(.btn-ghost):not(.btn-link):not(.btn-outline) {
  background-color: oklch(var(--b3) / 1);
  border-color: oklch(var(--b3) / 1);
}

[data-theme="emerald"] .btn:not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-neutral):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-error):not(.btn-ghost):not(.btn-link):not(.btn-outline):hover {
  background-color: oklch(var(--bc) / 0.1);
  border-color: oklch(var(--bc) / 0.1);
}

/* D — required marker uses accent red, the same color as errors */
[data-theme="emerald"] .label abbr[title="required"],
[data-theme="emerald"] label abbr[title="required"],
[data-theme="emerald"] .label .text-error {
  color: oklch(var(--a) / 1);
  text-decoration: none;
}

/* E — section header hairline inside cards */
[data-theme="emerald"] .card-body > h2:first-child,
[data-theme="emerald"] .card-body > h3:first-child,
[data-theme="emerald"] .card > .p-6 > h2:first-child,
[data-theme="emerald"] .card > .p-6 > h3:first-child {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid oklch(var(--bc) / 0.08);
}

/* Daisy overrides */

/*
 "join-strict" class that joins all its first level children.
 It only works with direct children so "join-item" is no longer necessary.
 It does nothing to margins or padding and you need to specify "flex-row" or "flex-column" manually.

 Logic:

 first and not last: remove bottom border radius
 not first and last: remove top border radius
 not first and not last: remove all border radiuses

 not first: remove top or left border depending on orientation
*/

/* Landing page fonts (Fontshare) */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@400,500,700&display=swap');

/*vertical*/
.join-strict.join-vertical > :first-child:not(:last-child) {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.join-strict.join-vertical > :not(:first-child):last-child {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.join-strict.join-vertical > :not(:first-child):not(:last-child) {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.join-strict.join-vertical > :not(:first-child) {
	border-block-start: 0;
}

/*horizontal*/

.join-strict.join-horizontal > :first-child:not(:last-child) {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.join-strict.join-horizontal > :not(:first-child):last-child {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.join-strict.join-horizontal > :not(:first-child):not(:last-child) {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.join-strict.join-horizontal > :not(:first-child) {
	border-inline-start: 0;
}

/* Payment method accordion radio buttons */
.collapse input[type="radio"]:checked ~ .collapse-title .payment-radio {
	border-color: oklch(var(--n));
}

.collapse input[type="radio"]:checked ~ .collapse-title .payment-radio-dot {
	display: block;
}

.label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.card-bordered > .overflow-x-auto > .table tbody tr:last-child {
  border-bottom: 0;
}

/* EveryLayout - Grid */

.l-grid {
  display: grid;
}

@supports (width: min(1rem, 100%)) {
  .l-grid-40 { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
  .l-grid-44 { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
  .l-grid-48 { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
  .l-grid-52 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
  .l-grid-56 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
  .l-grid-60 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .l-grid-64 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
  .l-grid-72 { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
  .l-grid-80 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
  .l-grid-96 { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
}

/* Custom components */

.form-controls { /* TW: .flex.flex-wrap.gap-4 */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-controls[hidden] {
  display: none;
}

.form-control-full { flex: 1 1 clamp(28ch, 100%, 100%); }

.form-control-1\/3 { flex: 1 1 clamp(28ch, calc(33.3333% - 1rem), 100%); }
.form-control-2\/3 { flex: 1 1 clamp(28ch, calc(66.6666% - 0.5rem), 100%); }

.form-control-1\/4 { flex: 1 1 clamp(28ch, calc(25% - 1rem), 100%); }
.form-control-2\/4,
.form-control-1\/2 { flex: 1 1 clamp(28ch, calc(50% - 0.5rem), 100%); }
.form-control-3\/4 { flex: 1 1 clamp(28ch, calc(75% - 0.5rem), 100%); }

.input-checkout,
.select-checkout {
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  background-color: var(--fallback-sc,oklch(var(--sc)/1));
  line-height: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.input-checkout:focus,
.select-checkout:focus {
  outline-offset: 1px;
  outline-color: var(--fallback-n,oklch(var(--n)/.8));
  z-index: 2;
}

.input-checkout.input-error,
.select-checkout.select-error {
  z-index: 1
}

.input-checkout.input-error:focus,
.select-checkout.select-error:focus {
  --tw-border-opacity: 1;
  border-color: var(--fallback-er, oklch(var(--er) / var(--tw-border-opacity)));
  outline-color: var(--fallback-er, oklch(var(--er) / 1));
  z-index: 2;
}

.join .join-item.join-item-rounded-es:first-child:not(:last-child),
.join :first-child:not(:last-child) .join-item.join-item-rounded-es {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: inherit;
  border-end-end-radius: 0;
}

.join .join-item.join-item-rounded-ee:last-child:not(:first-child),
.join :last-child:not(:first-child) .join-item.join-item-rounded-ee {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: inherit;
}

.join .join-item.join-item-rounded-none.join-item-rounded-none.join-item-rounded-none {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Pagy — fintech-style ghost pagination */

.pagy-footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--fallback-bc, oklch(var(--bc) / 0.08));
}

.pagy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.375rem;
  color: var(--fallback-bc, oklch(var(--bc) / 0.6));
  background-color: transparent;
  border: 1px solid var(--fallback-bc, oklch(var(--bc) / 0.12));
  border-radius: var(--rounded-btn, 0.5rem);
  transition: background-color 150ms, color 150ms, border-color 150ms;
}

.pagy a:hover:not([aria-disabled="true"]):not([aria-current]) {
  background-color: var(--fallback-bc, oklch(var(--bc) / 0.04));
  border-color: var(--fallback-bc, oklch(var(--bc) / 0.25));
  color: var(--fallback-bc, oklch(var(--bc) / 0.9));
}

.pagy a:active:not([aria-disabled="true"]):not([aria-current]) {
  background-color: var(--fallback-bc, oklch(var(--bc) / 0.08));
}

.pagy a:focus-visible {
  outline: 2px solid var(--fallback-p, oklch(var(--p) / 1));
  outline-offset: -1px;
}

.pagy a[aria-current="page"] {
  color: var(--fallback-bc, oklch(var(--bc) / 0.95));
  background-color: var(--fallback-bc, oklch(var(--bc) / 0.06));
  border-color: var(--fallback-bc, oklch(var(--bc) / 0.2));
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

.pagy a[aria-disabled="true"]:not([aria-current]) {
  color: var(--fallback-bc, oklch(var(--bc) / 0.2));
  border-color: var(--fallback-bc, oklch(var(--bc) / 0.06));
  cursor: default;
  pointer-events: none;
}

.pagy a[role="separator"] {
  border-color: transparent;
  pointer-events: none;
}

/* Tooltip */
.tooltip {
  position: absolute;
  z-index: 50;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  background-color: var(--fallback-bc, oklch(var(--bc) / 1));
  border-radius: 0.25rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  pointer-events: none;
  white-space: nowrap;
}