/**
 * Shared button component — "Shared Componentization Layer" Phase 2
 * (Buttons), Session 51+. Same rationale as tokens.css: .btn-primary /
 * .btn-ghost / .btn-danger were each defined 2-7x with slightly different
 * padding/radius/hover-color, and the drift was invisible until a rebrand
 * had to chase every copy by hand.
 *
 * SCOPE: only the color/font/radius recipe lives here. A page may still
 * declare its OWN `.btn`/`.btn-primary`/`.btn-ghost` rule locally to set
 * structural sizing (padding, font-size, width, gap, hover motion/shadow)
 * when its context genuinely needs a different size — a full-width auth
 * submit vs a compact dashboard chip vs a card action are legitimately
 * different sizes, and forcing one size everywhere would be the wrong kind
 * of consistency. What must never be redeclared per-page is BACKGROUND or
 * COLOR on these selectors — that recipe lives here, once. Guarded in
 * tests/guards/design-system.spec.js.
 *
 * Two markup conventions are both supported so no page's HTML needs to
 * change: hyphenated (`class="btn-primary"` — most pages) and the
 * space-modifier form (`class="btn primary"` — budsy-dashboard.html's
 * existing ~15 call sites).
 */

.btn,
.btn-primary,
.btn-ghost,
.btn-danger,
.btn.primary,
.btn.ghost,
.btn.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-xs);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-primary,
.btn.primary {
  background: var(--yellow);
  color: var(--dark);
}
.btn-primary:hover,
.btn.primary:hover { background: var(--yellow-dark); color: var(--white); }
.btn-primary:disabled,
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost,
.btn.ghost {
  background: transparent;
  color: var(--gray);
  font-weight: 600;
  border: 1.5px solid var(--border);
}
.btn-ghost:hover,
.btn.ghost:hover { border-color: var(--yellow); color: var(--yellow-dark); }

.btn-danger,
.btn.danger {
  background: transparent;
  color: var(--red, #ef4444);
  font-weight: 600;
  border: 1.5px solid var(--red-border, rgba(239,68,68,0.25));
}
.btn-danger:hover,
.btn.danger:hover { background: var(--red-pale, #fef2f2); }

/* Structural size modifiers — never colors, those always come from above */
.btn-sm { padding: 9px 16px; font-size: 12px; gap: 6px; }
.btn-block { width: 100%; }

/**
 * Shared form-field component ("Inputs" — Phase 2 continued). .form-input /
 * .form-select / .form-textarea carried the identical recipe (1.5px
 * var(--border), var(--radius-xs), DM Sans 14px, var(--white) idle,
 * border-color:var(--yellow) on focus) in 5 files, differing only in
 * padding/font-size — legitimate per-context sizing, kept local.
 *
 * SCOPE, deliberately narrower than it could be:
 *  - budsy-forum.html ALSO uses .form-input/.form-select/.form-textarea, but
 *    that whole page is set in Plus Jakarta Sans (an older, page-wide
 *    typography choice — its buttons/search bar/pagination all match it).
 *    Forcing this component's DM Sans onto only its inputs would mismatch
 *    the rest of that page's own type system, so forum.html is excluded —
 *    same reasoning as excluding budsy-portal.html's hero buttons above.
 *  - budsy-client-profile.html / budsy-contractor-profile.html /
 *    budsy-quotes.html style inputs with a BARE element selector
 *    (`input[type=...], select, textarea { }`, no class needed on new
 *    markup) rather than a class — a different, also-valid strategy, but
 *    putting a bare `input`/`select`/`textarea` rule in a stylesheet meant
 *    to be linked broadly would silently reskin every input on every page
 *    that ever links components.css, including ones that never opted in.
 *    Excluded rather than risk that blast radius; those three files'
 *    focus-ring treatment (box-shadow glow + background lift) is arguably
 *    the nicer of the two and is what this component's focus state below
 *    is modelled on.
 */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--dark);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(238,122,30,0.12);
}
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: var(--red, #ef4444); }
.form-textarea { resize: vertical; min-height: 100px; }

/**
 * Shared card shells ("Card Shells" — Phase 2, third and final increment).
 * .sidebar-card (5 files) and .section-card (2 files) had the identical
 * name AND the identical background/border/radius already — the only real
 * drift was a 1px-vs-1.5px border width and one page missing var() entirely.
 *
 * SCOPE, narrower than the drift survey: dozens of other card-like classes
 * exist (.product-card, .thread-card, .proj-card, .stat-card, .request-card,
 * .disc-card, ...) but each is a genuinely different widget — different
 * padding philosophy, different hover/click behavior, some with images,
 * some without. Forcing them under one shared rule would be false
 * consistency, not real de-duplication. Only names that are BOTH identical
 * AND already carrying the identical recipe are here.
 *
 * box-shadow stays page-local on purpose: 3 of the 5 .sidebar-card pages
 * use var(--shadow), 2 don't, and that reads as an intentional elevation
 * choice (a page-content sidebar vs a flush filter panel) rather than an
 * oversight — unlike the button/input drift, nothing here suggested it was
 * accidental, so it isn't "fixed" the same way. Padding/margin also stay
 * local, same reasoning as every other component here.
 */
.sidebar-card,
.section-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}

/**
 * Shared login-prompt modal ("Modals" — Phase 2 continued). This one was
 * already a real shared component in every sense except being in a shared
 * file: 7 pages carried a BYTE-IDENTICAL copy (Session 22's "harmonized
 * login modal" — deliberately pasted the same block everywhere on purpose).
 * Consolidating it here doesn't change behavior, it just makes the copy the
 * copy actually was: one. It also fixes a real drift the copy-paste already
 * produced — budsy-company-profile.html, budsy-materials-category.html and
 * budsy-product-detail.html were each missing the
 * .login-prompt-btn-ghost:hover rule, so their secondary button gave no
 * hover feedback. Raw hex (#fff/#F4F3F1/#E6E4E0) swapped for the equivalent
 * tokens while consolidating.
 */
.login-prompt-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 9999; align-items: center; justify-content: center; padding: 20px;
}
.login-prompt-overlay.open { display: flex; }
.login-prompt-box {
  background: var(--white); border-radius: 16px; max-width: 400px; width: 100%;
  padding: 36px 28px 28px; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,0.22);
}
.login-prompt-icon { font-size: 44px; margin-bottom: 12px; }
.login-prompt-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: var(--dark); margin-bottom: 8px; }
.login-prompt-desc { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 24px; }
.login-prompt-actions { display: flex; flex-direction: column; gap: 10px; }
.login-prompt-btn-primary {
  background: var(--yellow); color: var(--dark); font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 14px; padding: 13px 20px; border-radius: 9px;
  border: none; cursor: pointer; text-decoration: none; display: block; transition: background 0.2s;
}
.login-prompt-btn-primary:hover { background: var(--yellow-dark); color: var(--white); }
.login-prompt-btn-ghost {
  background: var(--light); color: var(--gray); font-family: 'Syne', sans-serif;
  font-weight: 600; font-size: 13px; padding: 11px 20px; border-radius: 9px;
  border: none; cursor: pointer; text-decoration: none; display: block; transition: background 0.2s;
}
.login-prompt-btn-ghost:hover { background: var(--light2); color: var(--dark); }

/**
 * Shared badges ("Badges" — Phase 2 continued). The markup for these was
 * already single-sourced (categories.js's BUDSY_PRO_BADGE() /
 * BUDSY_EARNED_BADGE() / BUDSY_TRADER_BADGE() emit the class name), but the
 * visual recipe was still copy-pasted per page.
 *
 * .badge-earned was BYTE-IDENTICAL across all 10 files that defined it —
 * pure duplication, no drift at all. Migrated in full.
 *
 * .badge-earned-tab (the avatar corner tab) was byte-identical across 3 of
 * its 4 files; budsy-project.html's avatar is smaller throughout and keeps
 * its own smaller override, which simply shadows this rule there.
 *
 * .badge-pro has TWO real shapes under one name: an inline tag (5 files,
 * shared here) and an absolute-positioned avatar-corner tab (chat/search/
 * project — a different widget, not a size variant of the first). Those 3
 * keep their own complete local rule, which shadows this one on their pages
 * by cascade order; nothing here changes for them.
 *
 * .badge-trader had a real color inversion, not just a size difference:
 * 3 of 4 pages used background:var(--dark)/color:var(--white); one
 * (budsy-company-profile.html) had it backwards — orange background, dark
 * text — for the exact same „Przedsiębiorca" mark. Fixed to match the
 * majority; that page's own font-size/padding stay as its size variant.
 */
.badge-earned {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.4px; padding: 3px 8px; border-radius: 100px;
  background: rgba(34,197,94,0.14); color: #15803d;
  border: 1px solid rgba(34,197,94,0.35); cursor: help; white-space: nowrap;
}
.badge-earned-tab {
  position: absolute; bottom: -5px; right: -5px; cursor: help;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 9px; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
  background: var(--green, #22c55e); color: #fff;
  border: 2px solid var(--white, #fff); white-space: nowrap;
}
.badge-pro {
  display: inline-flex; align-items: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 9px;
  letter-spacing: 0.6px; padding: 2px 6px; border-radius: 4px;
  background: var(--dark); color: var(--yellow); cursor: help;
}
.badge-trader {
  display: inline-flex; align-items: center;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
  background: var(--dark); color: var(--white); cursor: help;
}