/*
 * portal_components.css
 * Reusable UI primitives — buttons, inputs, badges, pill navs,
 * breadcrumbs. All prefixed `.c-` so they're easy to grep and don't
 * collide with layout-specific BEM blocks.
 *
 * Loaded between portal_designsystem.css (tokens) and
 * portal_materials.css (surfaces), before portal_layout.css.
 */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Usage:  <button class="c-btn c-btn--primary c-btn--sm">Save</button>
 *         <a class="c-btn c-btn--ghost">Cancel</a>
 *
 * Sizes:  --sm  |  --md (default)  |  --lg
 * Variants: (default) subtle  |  --primary  |  --danger  |  --ghost
 * Shape:  pill by default; add --rounded for softer square corners
 */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition:
    background var(--duration-fast, 120ms),
    color var(--duration-fast, 120ms),
    border-color var(--duration-fast, 120ms),
    transform var(--duration-fast, 120ms);

  /* Default size (md) */
  padding: 0.5rem 0.95rem;
  font-size: var(--font-size-300, 1rem);
  border-radius: var(--radius-round, 9999px);

  /* Default variant: subtle on light surfaces */
  background: rgb(0 0 0 / 0.06);
  color: rgb(20 20 30 / 0.88);
}

.c-btn:hover {
  background: rgb(0 0 0 / 0.12);
  color: rgb(20 20 30 / 0.95);
}

/* ── Sizes ── */

.c-btn--sm {
  padding: 0.38rem 0.72rem;
  font-size: 0.78rem;
}

.c-btn--lg {
  padding: 0.65rem 1.3rem;
  font-size: var(--font-size-400, 1.125rem);
}

/* ── Shape ── */

.c-btn--rounded {
  border-radius: var(--radius-2, 0.75rem);
}

/* ── Primary (blue fill, white text — the main CTA) ── */

.c-btn--primary {
  background: var(--color-blue-500, rgb(0 113 227));
  color: #fff;
}

.c-btn--primary:hover {
  background: var(--color-blue-600, rgb(0 90 181));
  color: #fff;
}

/* ── Danger (neutral at rest, red on hover) ── */

.c-btn--danger {
  background: rgb(0 0 0 / 0.05);
  border: 1px solid rgb(0 0 0 / 0.1);
  color: rgb(20 20 30 / 0.75);
}

.c-btn--danger:hover {
  background: rgb(220 60 60 / 0.1);
  color: rgb(200 40 40 / 1);
  border-color: rgb(220 60 60 / 0.25);
}

/* ── Ghost (transparent, text-only) ── */

.c-btn--ghost {
  background: transparent;
  color: rgb(20 20 30 / 0.65);
}

.c-btn--ghost:hover {
  background: rgb(0 0 0 / 0.05);
  color: rgb(20 20 30 / 0.92);
}

/* ── Inverted (for buttons sitting on dark/wallpaper surfaces) ── */

.c-btn--inverted {
  background: rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.92);
}

.c-btn--inverted:hover {
  background: rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 1);
}

.c-btn--inverted.c-btn--primary {
  background: var(--color-blue-500, rgb(0 113 227));
  color: #fff;
}

.c-btn--inverted.c-btn--primary:hover {
  background: var(--color-blue-600, rgb(0 90 181));
  color: #fff;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
/* Usage: <input class="c-input"> or <input class="c-input c-input--on-dark">
 */

.c-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-2, 0.75rem);
  border: 1px solid rgb(0 0 0 / 0.15);
  background: rgb(255 255 255 / 0.7);
  color: rgb(20 20 30 / 0.95);
  font-size: var(--font-size-300, 1rem);
  line-height: 1.4;
  transition:
    border-color var(--duration-fast, 120ms),
    background var(--duration-fast, 120ms);
}

.c-input:focus {
  outline: none;
  border-color: rgb(0 0 0 / 0.4);
  background: rgb(255 255 255 / 0.92);
}

.c-input::placeholder {
  color: rgb(20 20 30 / 0.4);
}

/* On-dark variant (for inputs sitting on the wallpaper / dark panel) */
.c-input--on-dark {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.95);
}

.c-input--on-dark:focus {
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.14);
}

.c-input--on-dark::placeholder {
  color: rgb(255 255 255 / 0.4);
}

/* Trix editor wrapped as an input */
.c-textarea {
  width: 100%;
  padding: var(--space-3, 0.75rem);
  border-radius: var(--radius-2, 0.75rem);
  border: 1px solid rgb(0 0 0 / 0.15);
  background: rgb(255 255 255 / 0.7);
  color: rgb(20 20 30 / 0.95);
  min-height: 140px;
  font-size: var(--font-size-300, 1rem);
}

.c-textarea--on-dark {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.95);
}

/* ── Badge ────────────────────────────────────────────────────────────────── */
/* Usage: <span class="c-badge">3 reviews</span>
 *        <a class="c-badge c-badge--inverted" href="#reviews">4.5 ★</a>
 */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-round, 9999px);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  background: rgb(0 0 0 / 0.05);
  border: 1px solid rgb(0 0 0 / 0.1);
  color: rgb(20 20 30 / 0.75);
  transition:
    background var(--duration-fast, 120ms),
    color var(--duration-fast, 120ms);
}

.c-badge:hover {
  background: rgb(0 0 0 / 0.1);
  color: rgb(20 20 30 / 0.92);
}

.c-badge--inverted {
  background: rgb(255 255 255 / 0.08);
  border-color: transparent;
  color: rgb(255 255 255 / 0.85);
}

.c-badge--inverted:hover {
  background: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.95);
}

/* ── Pill nav (tab strip) ─────────────────────────────────────────────────── */
/* Usage:
 *   <nav class="c-pill-nav">
 *     <a class="c-pill-nav__item c-pill-nav__item--active">Reviews</a>
 *     <a class="c-pill-nav__item">Apps</a>
 *   </nav>
 */

.c-pill-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-wrap: wrap;
}

.c-pill-nav__item {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-round, 9999px);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  color: rgb(20 20 30 / 0.7);
  transition:
    background var(--duration-fast, 120ms),
    color var(--duration-fast, 120ms);
}

.c-pill-nav__item:hover:not(.c-pill-nav__item--disabled) {
  background: rgb(0 0 0 / 0.06);
  color: rgb(20 20 30 / 0.92);
}

.c-pill-nav__item--active {
  background: rgb(0 0 0 / 0.08);
  color: rgb(20 20 30 / 1);
}

.c-pill-nav__item--disabled {
  color: rgb(20 20 30 / 0.3);
  cursor: not-allowed;
}

/* Inverted pills (on dark wallpaper surfaces) */
.c-pill-nav--inverted .c-pill-nav__item {
  color: rgb(255 255 255 / 0.7);
}

.c-pill-nav--inverted .c-pill-nav__item:hover:not(.c-pill-nav__item--disabled) {
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.95);
}

.c-pill-nav--inverted .c-pill-nav__item--active {
  background: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 1);
}

.c-pill-nav--inverted .c-pill-nav__item--disabled {
  color: rgb(255 255 255 / 0.32);
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
/* Usage:
 *   <nav class="c-breadcrumb">
 *     <a class="c-breadcrumb__link">MacAtlas</a>
 *     <span class="c-breadcrumb__sep">/</span>
 *     <span class="c-breadcrumb__current">Profile</span>
 *   </nav>
 */

.c-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: var(--font-size-200, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: rgb(255 255 255 / 0.78);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.2);
}

.c-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: inherit;
  text-decoration: none;
}

.c-breadcrumb__link:hover {
  color: rgb(255 255 255 / 0.96);
}

.c-breadcrumb__sep {
  color: inherit;
  opacity: 0.5;
}

.c-breadcrumb__current {
  color: rgb(255 255 255 / 0.96);
}

/* ── Form field layout helpers ────────────────────────────────────────────── */

.c-field {
  display: flex;
  flex-direction: column;
}

.c-label {
  display: block;
  font-size: var(--font-size-300, 1rem);
  font-weight: 600;
  color: rgb(20 20 30 / 0.82);
  margin: 0 0 var(--space-2, 0.5rem);
}

.c-label--on-dark {
  color: rgb(255 255 255 / 0.82);
}

.c-hint {
  font-size: 0.75rem;
  color: rgb(20 20 30 / 0.5);
  margin: var(--space-2, 0.5rem) 0 0;
}

.c-hint--on-dark {
  color: rgb(255 255 255 / 0.5);
}

.c-errors {
  background: rgb(220 50 50 / 0.08);
  border: 1px solid rgb(220 50 50 / 0.25);
  border-radius: var(--radius-2, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  color: rgb(180 30 30 / 0.9);
  font-size: var(--font-size-300, 1rem);
}

.c-errors ul {
  margin: var(--space-2, 0.5rem) 0 0;
  padding-left: var(--space-4, 1rem);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
/* Usage:
 *   <nav class="c-pagination">
 *     <a class="c-pagination__btn">Previous</a>
 *     <span class="c-pagination__info">Page 1 of 5</span>
 *     <a class="c-pagination__btn">Next</a>
 *   </nav>
 */

.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) 0 0;
}

.c-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-round, 9999px);
  background: rgb(0 0 0 / 0.06);
  color: rgb(20 20 30 / 0.8);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 120ms;
}

.c-pagination__btn:hover {
  background: rgb(0 0 0 / 0.12);
}

.c-pagination__btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.c-pagination__btn--disabled:hover {
  background: rgb(0 0 0 / 0.06);
}

.c-pagination__info {
  font-size: 0.78rem;
  color: rgb(20 20 30 / 0.5);
  font-variant-numeric: tabular-nums;
}