/* ============================================================
   Shared Honey design-system components (Phase 0).

   These mirror the class names used in the redesign mockups so views
   can be ported with minimal churn. Everything is token-driven
   (see application.css for the Honey palette).

   Loaded by Propshaft after the Tailwind build (app/assets/builds/*),
   so these intentionally take precedence over the legacy @apply
   utilities that share the same class names (.nav-item, .card).
   ============================================================ */

/* ---------- Feather icons ----------
   Feather renders inline <svg class="feather"> at a fixed 24x24 default.
   Scale them to the surrounding font-size (like the Font Awesome icons
   they replaced) so text-xs/text-lg/inherited sizing "just works", and
   stop them collapsing when only a CSS width is set. */
svg.feather {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
/* svg.feather's element+class selector outranks Tailwind's single-class
   .hidden, so a feather icon toggled hidden (e.g. the password-visibility
   eye-off) would still render. Restore .hidden precedence for feather SVGs. */
svg.feather.hidden {
  display: none;
}
/* Icon tiles (the rounded accent squares) render a larger glyph than body text. */
.icon-tile svg.feather {
  width: 1.25em;
  height: 1.25em;
}

/* ---------- Surfaces ---------- */
.surface {
  background-color: var(--surface);
  border: 1px solid var(--border);
}

.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* ---------- Buttons ---------- */
.btn-accent {
  background-color: var(--accent);
  color: var(--accent-on);
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.btn-accent:hover {
  background-color: var(--accent-strong);
  color: var(--accent-on);
}

.btn-ghost {
  color: var(--txt-subtle);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.15s ease;
  cursor: pointer;
}
.btn-ghost:hover {
  color: var(--txt);
  border-color: var(--border-strong);
}

.btn-danger {
  background-color: var(--neg);
  color: var(--neg-on);
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.btn-danger:hover {
  opacity: 0.85;
}

.pagination__btn--disabled {
  color: var(--txt-subtle);
  border: 1px solid var(--border);
  background: var(--surface);
  opacity: 0.5;
  cursor: not-allowed;
}
/* Pagination layout (colour comes from .btn-ghost / --disabled above). */
.pagination {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  border-radius: var(--radius-full);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--txt-sm);
  font-weight: var(--weight-bold);
}
.pagination__btn:focus { outline: none; }

/* ---------- Segmented control / tabs ---------- */
.seg {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.seg-btn {
  color: var(--txt-subtle);
  transition: all 0.15s ease;
}
.seg-btn[aria-checked="true"],
.seg-btn[aria-selected="true"],
.seg-btn.seg-btn--active {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}
.seg-btn:not([aria-checked="true"]):not([aria-selected="true"]):hover {
  background: var(--surface-3);
  color: var(--txt);
}

/* ---------- Badges & pills ---------- */
.badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--txt-subtle);
}
.badge-income {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-strong);
}
.badge-default {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.count-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--txt-subtle);
}

/* ---------- Accent status pill (e.g. trial countdown) ---------- */
.pill {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* ---------- Icon tile (rounded accent square) ---------- */
.icon-tile {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* ---------- Soft warm glow behind the marketing hero ---------- */
.hero-glow::before {
  content: "";
  position: absolute;
  inset: -10% 10% auto 10%;
  height: 60%;
  background: radial-gradient(ellipse at top, var(--hero-glow) 0%, transparent 70%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

/* Marketing hero app-preview screenshot: show the light shot by default and
   swap to the dark shot under the .dark theme class. Token-agnostic CSS so
   the swap doesn't depend on Tailwind's dark: display utilities. */
.app-preview__dark {
  display: none;
}
.dark .app-preview__light {
  display: none;
}
.dark .app-preview__dark {
  display: block;
}

/* ---------- User menu signout ---------- */
.signout-item:hover {
  background: var(--surface-2);
}

/* ---------- Navigation ---------- */
.nav-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}
.nav-item {
  color: var(--txt-subtle);
}
.nav-item:hover {
  color: var(--txt);
  background: var(--surface-2);
}

/* ---------- Category hierarchy display (dot + parent / sub) ---------- */
.cat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  line-height: 1;
}
.cat__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--cat-color, var(--txt-subtle));
}
.cat__parent {
  color: var(--txt-subtle);
  font-weight: 500;
}
.cat__sep {
  color: var(--txt-subtle);
  opacity: 0.5;
}
.cat__sub {
  color: var(--txt);
  font-weight: 700;
}

/* ---------- Category color stripe + dot (lists / groups) ---------- */
.stripe {
  width: 0.3rem;
  align-self: stretch;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--cat-color, var(--accent));
}
.cat-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--cat-color, var(--txt-subtle));
}

/* 12-color category palette (mirrors id % 12 in the mockups). */
.c0 { --cat-color: #5b8def; }
.c1 { --cat-color: #46b58a; }
.c2 { --cat-color: #c2772f; }
.c3 { --cat-color: #e0708a; }
.c4 { --cat-color: #9b7ad6; }
.c5 { --cat-color: #d99b1d; }
.c6 { --cat-color: #4aa3c2; }
.c7 { --cat-color: #d4694a; }
.c8 { --cat-color: #6aa84f; }
.c9 { --cat-color: #b06ab3; }
.c10 { --cat-color: #4a90d6; }
.c11 { --cat-color: #cf913f; }

/* ---------- Avatar background palette (posting / counterparty initials) ----------
   White text is set on .posting__avatar / .counterparty-avatar. Values mirror
   the Tailwind *-500 hues the random_bg_color helper previously emitted. */
.avatar-bg-1 { background-color: #ef4444; }
.avatar-bg-2 { background-color: #3b82f6; }
.avatar-bg-3 { background-color: #22c55e; }
.avatar-bg-4 { background-color: #eab308; }
.avatar-bg-5 { background-color: #a855f7; }
.avatar-bg-6 { background-color: #ec4899; }
.avatar-bg-7 { background-color: #6366f1; }
.avatar-bg-8 { background-color: #14b8a6; }

/* ---------- Amount / trend semantics ---------- */
.amount-pos { color: var(--pos); }
.amount-neg { color: var(--neg); }
.accent-txt { color: var(--accent-strong); }
.subtle { color: var(--txt-subtle); }

/* ---------- Marketing footer links ---------- */
.footer-link {
  color: var(--txt-subtle);
  transition: color 0.15s ease;
}
.footer-link:hover {
  color: var(--accent-strong);
}

/* ---------- Global search results ---------- */
.search-result + .search-result {
  border-top: 1px solid var(--border);
}
.search-result:hover,
.search-result--selected {
  background: var(--surface-2);
}
.search-result:hover .search-result__title,
.search-result--selected .search-result__title {
  color: var(--accent-strong);
}

/* ============================================================
   Tom Select (enhanced <select>) — Honey theme.

   Tom Select replaces the native <select> with its own DOM: an outer
   .ts-wrapper, a visible .ts-control box, and a .ts-dropdown popup.
   The CDN default stylesheet hardcodes a white box / grey border / 3px
   radius and is dark-mode unaware. These rules retheme the inner pieces
   with Honey tokens so any tom-select instance matches the native
   .expense-select fields in both light and dark mode.
   ============================================================ */
.ts-wrapper {
  /* The .ts-control owns the visible box; keep the wrapper transparent. */
  background: transparent;
}

/* Scoped to .ts-wrapper.single / .ts-wrapper.multi to match the CDN's
   `.ts-wrapper.single .ts-control` specificity (0,3,0) — a plain
   `.ts-wrapper .ts-control` (0,2,0) loses the border to it.
   The chevron is drawn by a ::after pseudo (below), NOT as a background
   image: Tom Select reassigns the `background` shorthand on the focused/
   open control, which would otherwise tile or drop a background chevron. */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  position: relative;
  background-color: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: 1rem; /* matches rounded-2xl on native selects */
  color: var(--txt);
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-size: 0.875rem;
  box-shadow: none;
}
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi.input-active .ts-control,
.ts-wrapper .ts-control:focus {
  /* The CDN paints the focused / input-active control white — keep it on
     the Honey surface. */
  background-color: var(--surface);
  border-color: var(--border-strong);
  box-shadow: none;
}
.ts-wrapper.disabled .ts-control {
  opacity: 0.6;
}

/* Honey chevron as a pseudo-element, replacing Tom Select's own ::after
   caret. Specificity (0,3,1) matches the CDN's `.ts-wrapper.single
   .ts-control:after` so this wins. Multi-select carries no caret in the
   CDN, so we only draw it on .single. */
.ts-wrapper.single .ts-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.875rem;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(-50%);
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7b63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  pointer-events: none;
}
:root:is(.dark) .ts-wrapper.single .ts-control::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a99a85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.ts-wrapper .ts-control,
.ts-wrapper .ts-control input,
.ts-wrapper .ts-control .item {
  color: var(--txt);
}
.ts-wrapper .ts-control input::placeholder {
  color: var(--txt-subtle);
}

/* Multi-select item chips (remove_button plugin). */
.ts-wrapper.multi .ts-control > .item {
  background: var(--accent-soft);
  border: 1px solid transparent;
  color: var(--accent-strong);
  border-radius: 9999px;
}

/* Dropdown popup. The doubled `.ts-dropdown.ts-dropdown` raises specificity
   to (0,2,0) so it beats the CDN base `.ts-dropdown` border colour. */
.ts-dropdown.ts-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  color: var(--txt);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.ts-dropdown.ts-dropdown .option,
.ts-dropdown.ts-dropdown .no-results,
.ts-dropdown.ts-dropdown .optgroup-header {
  color: var(--txt);
}
.ts-dropdown.ts-dropdown .optgroup-header {
  color: var(--txt-subtle);
  background: transparent;
}
.ts-dropdown.ts-dropdown .option:hover,
.ts-dropdown.ts-dropdown .option.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.ts-dropdown.ts-dropdown .option.selected {
  background: var(--surface-2);
  color: var(--txt);
}

/* Inline accent link inside body copy (support, marketing prose). */
.text-link {
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: underline;
}
.text-link:hover {
  opacity: 0.8;
}

/* Scrollbar inside a long dropdown — tint the default light track. */
.ts-dropdown.ts-dropdown .ts-dropdown-content {
  scrollbar-color: var(--border-strong) var(--surface-2);
}
.ts-dropdown.ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
  width: 0.625rem;
}
.ts-dropdown.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track {
  background: var(--surface-2);
}
.ts-dropdown.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 9999px;
  border: 2px solid var(--surface-2);
}