/*
 * influex.css — Influex Custom Styles
 *
 * RULES:
 * - All classes use BEM naming: .block, .block__element, .block--modifier
 * - NEVER hard-code colour values here — always use var(--influex-*)
 * - Never use bare tag selectors for custom styles (the body / a typography
 *   layer below is the one curated exception — sets the design-system
 *   defaults that every page inherits)
 * - Bootstrap utility classes are used as-is alongside BEM classes
 *
 * Load order: theme-*.css (defines variables) → influex.css (consumes them)
 *
 * Design system: see /design.md at the repo root for the visual rationale
 * (Vercel-inspired achromatic palette, shadow-as-border, compressed
 * typography). Section comments below cross-reference the design.md
 * sections they implement.
 */

/* ── Base typography (design.md §3) ───────────────────────────────────────
 * Sets system-font stack, OpenType ligatures, three-weight scale, and the
 * compressed-heading letter-spacing on every page. Bootstrap's heading
 * defaults (font-weight: 700, no negative tracking) are overridden so any
 * un-restyled <h1>–<h3> still gets the design-system look.
 * ──────────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--influex-bg);
  color: var(--influex-text-primary);
  font-family: var(--influex-font-family);
  font-size: var(--influex-fs-body);
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: var(--influex-fs-h1);
  font-weight: var(--influex-fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--influex-tracking-h1);
  color: var(--influex-text-primary);
}

h2, .h2 {
  font-size: var(--influex-fs-h2);
  font-weight: var(--influex-fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--influex-tracking-h2);
  color: var(--influex-text-primary);
}

h3, .h3 {
  /* Bootstrap's .h3 utility is widely used on list pages as <h1 class="h3">.
     Map it to the H1 design-system size so the visual scale matches the new
     spec without requiring Razor edits. */
  font-size: var(--influex-fs-h1);
  font-weight: var(--influex-fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--influex-tracking-h1);
  color: var(--influex-text-primary);
}

h4, .h4, h5, .h5, h6, .h6 {
  font-weight: var(--influex-fw-semibold);
  letter-spacing: var(--influex-tracking-card);
  color: var(--influex-text-primary);
}

/* Strong / b — Bootstrap default is 700; clamp to our 600 max. */
strong, b {
  font-weight: var(--influex-fw-semibold);
}

/* Global focus ring (design.md §6, level 4) — saturated blue, deliberately
   distinct from the brand accent. Applied via :focus-visible so mouse users
   don't see the ring on click. */
:focus-visible {
  outline: var(--influex-focus-ring-width) solid var(--influex-focus-ring-color);
  outline-offset: var(--influex-focus-ring-offset);
  border-radius: var(--influex-radius-xs);
}

/* Reduced-motion guard — disables transitions/transforms for users who opt
   out. Per WCAG 2.3.3 + design.md §7 "Do". */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Nav bar (design.md §4 "Navigation") ─────────────────────────────────
 * White surface, ring-shadow bottom edge (no CSS border).
 * ──────────────────────────────────────────────────────────────────────── */

.nav-bar {
  background-color: var(--influex-nav-bg);
  border-bottom: 0;
  box-shadow: 0 1px 0 0 var(--influex-nav-border);
  padding: .5rem 1.25rem;
}

.nav-bar__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--influex-text-primary);
}

.nav-bar__logo {
  width: var(--influex-nav-logo-size);
  height: var(--influex-nav-logo-size);
  object-fit: contain;
}

.nav-bar__brand-text {
  font-weight: var(--influex-fw-semibold);
  font-size: 1.0625rem;
  letter-spacing: var(--influex-tracking-card);
  color: var(--influex-primary);
}

.nav-bar__link {
  color: var(--influex-nav-text) !important;
  font-size: var(--influex-fs-ui);
  font-weight: var(--influex-fw-medium);
}

.nav-bar__link:hover,
.nav-bar__link.active {
  color: var(--influex-nav-link-active) !important;
  font-weight: var(--influex-fw-semibold);
}

.nav-bar__user-name {
  font-size: var(--influex-fs-ui);
  color: var(--influex-text-secondary);
}

.nav-bar__signout-btn {
  background-color: var(--influex-btn-signout-bg);
  color: var(--influex-btn-signout-text);
  border: 0;
  box-shadow: var(--influex-shadow-ring-light);
  font-size: var(--influex-fs-ui);
  font-weight: var(--influex-fw-medium);
  border-radius: var(--influex-radius-btn);
}

.nav-bar__signout-btn:hover {
  background-color: var(--influex-surface-border);
}

/* ── Page content wrapper ────────────────────────────────────────────── */

.page-content {
  padding: var(--influex-content-padding);
  min-height: calc(100vh - 60px);
}

/* ── Card surfaces — shared ───────────────────────────────────────────────
 * Brand, Campaign, and Product cards use the shadow-as-border + multi-layer
 * stack from design.md §6. We zero out Bootstrap's .card border + own
 * box-shadow rather than fighting specificity. Hover lifts to the full
 * stack with a subtle translate; respect prefers-reduced-motion via the
 * global guard above.
 * ──────────────────────────────────────────────────────────────────────── */

.brand-card,
.campaign-card,
.product-card {
  background-color: var(--influex-card-bg);
  border: 0;
  border-radius: var(--influex-card-radius);
  box-shadow: var(--influex-shadow-card);
  transition: box-shadow var(--influex-transition-fast),
              transform var(--influex-transition-fast);
  overflow: hidden;
}

.brand-card:hover,
.campaign-card:hover,
.product-card:hover {
  box-shadow: var(--influex-shadow-card-full);
  transform: translateY(-1px);
}

/* a11y — keyboard focus ring on interactive cards. The <a> inside the card
   receives focus, so :focus-within on the card surface gives a visible
   indicator without depending on the inner anchor's outline. */
.brand-card:focus-within,
.campaign-card:focus-within,
.product-card:focus-within {
  outline: var(--influex-focus-ring-width) solid var(--influex-focus-ring-color);
  outline-offset: var(--influex-focus-ring-offset);
}

/* ── Brand card ──────────────────────────────────────────────────────── */

.brand-card__thumbnail {
  width: 100%;
  height: var(--influex-card-thumb-height);
  object-fit: cover;
}

.brand-card__thumbnail--placeholder {
  width: 100%;
  height: var(--influex-card-thumb-height);
  background-color: var(--influex-card-thumb-bg);
}

/* Inline logo glyph rendered inside the placeholder thumbnail. */
.brand-card__placeholder-icon,
.campaign-card__placeholder-icon {
  width: var(--influex-card-placeholder-icon-size);
  opacity: .2;
}

.brand-card__body {
  padding: 1rem 1rem .5rem;
}

.brand-card__name {
  color: var(--influex-text-primary);
  font-weight: var(--influex-fw-semibold);
  font-size: var(--influex-fs-card-title);
  letter-spacing: var(--influex-tracking-card);
}

.brand-card__client {
  color: var(--influex-text-secondary);
  font-size: var(--influex-fs-caption);
}

.brand-card__meta {
  color: var(--influex-text-muted);
  font-size: var(--influex-fs-caption);
}

.brand-card__footer {
  background-color: transparent;
  border-top: 0;
  box-shadow: 0 -1px 0 0 var(--influex-card-border);
  color: var(--influex-text-muted);
  font-size: var(--influex-fs-caption);
  padding: .625rem 1rem;
}

/* ── Brand list empty state ──────────────────────────────────────────── */

.brand-list__empty {
  color: var(--influex-text-muted);
}

/* ── Primary button override (design.md §4 "Buttons") ────────────────────
 * The Bootstrap .btn-primary is colour-mapped to Influex Indigo with the
 * 6px functional radius and the design-system padding scale.
 * ──────────────────────────────────────────────────────────────────────── */

.btn-primary {
  background-color: var(--influex-btn-primary-bg);
  border-color: var(--influex-btn-primary-bg);
  color: var(--influex-btn-primary-text);
  border-radius: var(--influex-btn-radius);
  padding: var(--influex-btn-padding-y) var(--influex-btn-padding-x);
  font-weight: var(--influex-fw-medium);
  font-size: var(--influex-fs-ui);
  letter-spacing: 0;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--influex-btn-primary-hover);
  border-color: var(--influex-btn-primary-hover);
  color: var(--influex-btn-primary-text);
}

/* ── Campaign card ───────────────────────────────────────────────────── */

.campaign-card__thumbnail {
  width: 100%;
  height: var(--influex-card-thumb-height);
  object-fit: cover;
}

.campaign-card__thumbnail--placeholder {
  width: 100%;
  height: var(--influex-card-thumb-height);
  background-color: var(--influex-card-thumb-bg);
}

/* 2x2 product-thumbnail grid for the campaign card. */
.campaign-card__product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: var(--influex-card-thumb-height);
  background-color: var(--influex-card-thumb-bg);
}

.campaign-card__product-cell {
  position: relative;
  overflow: hidden;
  background-color: var(--influex-card-thumb-bg);
}

.campaign-card__product-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-card__product-cell--placeholder {
  width: 48px !important;
  height: auto !important;
  opacity: .2;
  display: block;
  margin: auto;
}

/* "+N" overlay badge on the 4th cell when more than 4 products exist. */
.campaign-card__product-overflow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--influex-card-overflow-bg);
  color: var(--influex-card-overflow-text);
  font-weight: var(--influex-fw-semibold);
  font-size: 1.25rem;
  letter-spacing: var(--influex-tracking-h2);
}

.campaign-card__body {
  padding: 1rem 1rem .5rem;
}

.campaign-card__name {
  color: var(--influex-text-primary);
  font-weight: var(--influex-fw-semibold);
  font-size: var(--influex-fs-card-title);
  letter-spacing: var(--influex-tracking-card);
}

.campaign-card__meta {
  color: var(--influex-text-muted);
  font-size: var(--influex-fs-caption);
}

.campaign-card__footer {
  background-color: transparent;
  border-top: 0;
  box-shadow: 0 -1px 0 0 var(--influex-card-border);
  color: var(--influex-text-muted);
  font-size: var(--influex-fs-caption);
  padding: .625rem 1rem;
}

/* ── Status badge (standalone block) ─────────────────────────────────────
 * Used wherever a campaign-status pill is rendered. The base block sets
 * the pill shape and typography; the modifiers carry the tinted palette.
 * Note: today markup applies both `badge` (Bootstrap) and `status-badge`
 * — Bootstrap's `.badge` sets font-weight: 700 / color: #fff which we
 * override here. The Razor cleanup to drop `badge` is tracked as a
 * deferred item in design.md §11.
 * ──────────────────────────────────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--influex-radius-pill);
  font-size: var(--influex-fs-caption);
  font-weight: var(--influex-fw-medium);
  letter-spacing: 0;
  line-height: 1.4;
}

.status-badge--draft {
  background-color: var(--influex-status-draft-bg);
  color: var(--influex-status-draft-text);
}
.status-badge--active {
  background-color: var(--influex-status-active-bg);
  color: var(--influex-status-active-text);
}
.status-badge--completed {
  background-color: var(--influex-status-completed-bg);
  color: var(--influex-status-completed-text);
}
.status-badge--archived {
  background-color: var(--influex-status-archived-bg);
  color: var(--influex-status-archived-text);
}

/* ── Product card (Campaign Details Products tab) ────────────────────── */

.product-card__thumbnail {
  width: 100%;
  height: var(--influex-product-thumb-height);
  object-fit: cover;
}

.product-card__thumbnail--placeholder {
  width: 100%;
  height: var(--influex-product-thumb-height);
  background-color: var(--influex-card-thumb-bg);
}

.product-card__placeholder-icon {
  width: var(--influex-product-placeholder-icon-size);
  opacity: .2;
}

.product-card__name {
  color: var(--influex-text-primary);
  font-weight: var(--influex-fw-semibold);
  font-size: var(--influex-fs-card-title);
  letter-spacing: var(--influex-tracking-card);
}

/* ── Goal / Phrase lists (Campaign Details Overview tab) ─────────────────
 * Lists render as flex chip rows (wrap onto multiple rows when needed).
 * ──────────────────────────────────────────────────────────────────────── */

.goal-list,
.phrase-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--influex-chip-gap);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.goal-list__item,
.phrase-list__item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  background: var(--influex-chip-bg);
  border: 0;
  box-shadow: var(--influex-shadow-ring-light);
  border-radius: var(--influex-radius-pill);
}

.goal-list__text,
.phrase-list__text {
  color: var(--influex-text-primary);
  font-size: var(--influex-fs-ui);
}

/* ── Entity thumbnail (header avatars + edit-form previews) ──────────────
 * Reusable square thumbnail used in header rows and the "current image"
 * preview inside Create/Edit fieldsets. The placeholder modifier applies
 * the muted logo treatment.
 * ──────────────────────────────────────────────────────────────────────── */

.entity-thumb {
  width: var(--influex-entity-thumb-size);
  height: var(--influex-entity-thumb-size);
  object-fit: cover;
  border-radius: var(--influex-radius-sm);
  display: block;
  box-shadow: var(--influex-shadow-ring-light);
}

.entity-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--influex-card-thumb-bg);
}

.entity-thumb--placeholder img {
  width: var(--influex-entity-thumb-icon-size);
  height: auto;
  opacity: .2;
}

/* Edit-form image preview — sized similarly but allowed to be larger. */
.entity-thumb--preview {
  width: auto;
  height: auto;
  max-width: var(--influex-entity-thumb-preview-max);
  max-height: var(--influex-entity-thumb-preview-max);
  object-fit: cover;
}

/* ── Empty-state (list page placeholder) ─────────────────────────────── */
.empty-state__icon {
  width: var(--influex-empty-icon-size);
  opacity: .25;
}

/* ── Form container max-width ────────────────────────────────────────── */
.form-container {
  max-width: var(--influex-form-container-max);
}

.form-container--wide {
  max-width: var(--influex-form-container-wide-max);
}

/* ── Settings page ───────────────────────────────────────────────────────
 * Tabbed layout for /Settings — five tabs (Company Image, Theme, Crawler,
 * Categories, Internal Contacts). Container width caps at the same value
 * as Brand/Campaign forms.
 * ──────────────────────────────────────────────────────────────────────── */

.settings-page {
  max-width: var(--influex-settings-max-width);
}

.settings-tabs {
  /* No custom styling beyond Bootstrap's nav-tabs — keeps consistent with
     Campaign Details. Full BEM tab restyle is deferred (design.md §11). */
}

.settings-tabs__content {
  background-color: var(--influex-settings-tab-bg);
  border-radius: var(--influex-radius-sm);
  box-shadow: var(--influex-shadow-card);
  padding: 1.25rem;
}

.settings-form {
  max-width: var(--influex-form-container-max);
}

/* ── Influencer category chip list (Settings tab 4) ──────────────────── */

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--influex-chip-gap);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.category-list__item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  background: var(--influex-chip-bg);
  border: 0;
  box-shadow: var(--influex-shadow-ring-light);
  border-radius: var(--influex-radius-pill);
}

.category-list__text {
  color: var(--influex-text-primary);
  font-size: var(--influex-fs-ui);
}

/* ── Internal contacts table (Settings tab 5) ────────────────────────── */

.contact-list {
  color: var(--influex-text-primary);
}

.contact-list__row {
  border-bottom: 0;
  box-shadow: 0 1px 0 0 var(--influex-card-border);
}

.contact-list__cell {
  vertical-align: middle;
  font-size: var(--influex-fs-body);
}

.contact-list__cell--name {
  font-weight: var(--influex-fw-semibold);
}

.contact-list__empty {
  font-size: var(--influex-fs-ui);
}

/* ── Login page ──────────────────────────────────────────────────────── */

.login-page {
  background-color: var(--influex-login-bg);
}

.login-page__logo {
  width: var(--influex-login-logo-width);
  height: auto;
}

.login-page__card {
  background-color: var(--influex-surface);
  border: 0;
  border-radius: var(--influex-radius-md);
  box-shadow: var(--influex-shadow-card-full);
}

.login-page__google-btn {
  background-color: var(--influex-btn-google-bg);
  color: var(--influex-btn-google-text);
  border: 0;
  box-shadow: var(--influex-shadow-ring-light);
  border-radius: var(--influex-radius-btn);
  font-weight: var(--influex-fw-medium);
  padding: .6rem 1rem;
}

.login-page__google-btn:hover {
  background-color: var(--influex-surface-border);
}

/* ── Platform handles list (Influencer Details page) ─────────────────────
 * Per-influencer list of platform handles + inline edit/add forms. Rows
 * use the design-system shadow-as-border treatment so they read as small
 * card surfaces. The --editing modifier subtly tints the row to signal the
 * inline editor is active.
 *
 * The warning banner (rendered when an influencer has zero active handles)
 * extends Bootstrap's .alert-warning for colour; we only contribute spacing.
 * ──────────────────────────────────────────────────────────────────────── */

.platform-handle-list {
  /* No own styles — pure BEM block wrapper for the section. Margins come
     from utility classes on the element. */
}

.platform-handle-list__warning {
  /* Spacing-only override; colour comes from Bootstrap's .alert-warning
     (yellow tone), which is theme-agnostic enough to use here without a
     dedicated --influex-warning-* token. */
  max-width: 640px;
  margin-bottom: 1rem;
}

.platform-handle-list__row {
  background-color: var(--influex-card-bg);
  border-radius: var(--influex-radius-sm);
  box-shadow: var(--influex-shadow-ring-light);
  margin-bottom: .5rem;
}

.platform-handle-list__row--editing {
  background-color: var(--influex-chip-bg);
  box-shadow: var(--influex-shadow-ring);
}

.platform-handle-list__platform {
  color: var(--influex-text-primary);
  font-size: var(--influex-fs-ui);
}

.platform-handle-list__handle {
  color: var(--influex-text-secondary);
  font-size: var(--influex-fs-body);
}

.platform-handle-form {
  width: 100%;
}

.platform-handle-form__field {
  min-width: 140px;
}