/* ==========================================================================
   Tapin Next — Base Components
   Every rule below references only variables from tapin-design-tokens.css.
   Load order: tokens first, this file second, then per-surface CSS.
   RTL-first: uses logical properties (margin-inline-*, padding-inline-*).
   ========================================================================== */


/* --- Buttons -------------------------------------------------------------- */
.tapin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tapin-space-2);
  min-height: var(--tapin-control-height-md);
  padding: 0 var(--tapin-space-5);
  border: 1px solid transparent;
  border-radius: var(--tapin-radius-md);
  background: transparent;
  color: var(--tapin-color-text);
  font: inherit;
  font-family: var(--tapin-font-sans);
  font-size: var(--tapin-font-size-base);
  font-weight: var(--tapin-font-weight-semibold);
  line-height: var(--tapin-line-height-tight);
  letter-spacing: var(--tapin-letter-spacing-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform var(--tapin-transition-fast),
              box-shadow var(--tapin-transition-base),
              background-color var(--tapin-transition-base),
              border-color var(--tapin-transition-base),
              color var(--tapin-transition-base);
}
.tapin-btn:disabled,
.tapin-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.tapin-btn:focus-visible {
  outline: none;
  box-shadow: var(--tapin-shadow-focus-ring);
}

/* The user's canonical brand pink is the vivid magenta #ff00ff (originally
   defined in assets/producer-approvals.css as --tapin-pink). Action CTAs
   ("שמור אירוע" / "בקש עריכה" / "סיום והמשך לתשלום") must render in this
   solid color across EVERY page, regardless of whether the legacy SharedCss
   is also loaded inline. Using the design-token gradient here would create
   an inconsistency where pages that load only tapin-components got a
   pink-to-purple gradient while pages that ALSO inline SharedCss got the
   solid magenta — confusing.
   The signature pink→purple gradient is still used for the active nav pill
   (.tapin-pec-nav__tab.is-active) — different visual role. */
.tapin-btn--primary {
  background: #ff00ff;
  color: var(--tapin-color-on-primary);
  border-color: transparent;
  box-shadow: var(--tapin-shadow-sm);
}
.tapin-btn--primary:hover:not(:disabled) {
  background: #d900d9;
  transform: translateY(-1px);
  box-shadow: var(--tapin-shadow-glow-strong);
}
.tapin-btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--tapin-shadow-xs);
}

.tapin-btn--secondary {
  background: var(--tapin-color-surface);
  color: var(--tapin-color-primary);
  border-color: var(--tapin-color-primary);
}
.tapin-btn--secondary:hover:not(:disabled) {
  background: var(--tapin-color-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--tapin-shadow-glow);
}
.tapin-btn--secondary:active:not(:disabled) { transform: translateY(1px); }

.tapin-btn--ghost {
  background: transparent;
  color: var(--tapin-color-text);
  border-color: var(--tapin-color-border);
}
.tapin-btn--ghost:hover:not(:disabled) {
  background: var(--tapin-color-bg-muted);
  border-color: var(--tapin-color-border-strong);
}

.tapin-btn--danger {
  background: var(--tapin-color-danger);
  color: #FFFFFF;
  border-color: var(--tapin-color-danger);
}
.tapin-btn--danger:hover:not(:disabled) {
  background: var(--tapin-color-danger-fg);
  border-color: var(--tapin-color-danger-fg);
  transform: translateY(-1px);
}
.tapin-btn--danger:active:not(:disabled) { transform: translateY(1px); }

.tapin-btn--sm {
  min-height: var(--tapin-control-height-sm);
  padding: 0 var(--tapin-space-3);
  font-size: var(--tapin-font-size-sm);
  border-radius: var(--tapin-radius-sm);
}
.tapin-btn--lg {
  min-height: var(--tapin-control-height-lg);
  padding: 0 var(--tapin-space-8);
  font-size: var(--tapin-font-size-lg);
  border-radius: var(--tapin-radius-lg);
}
.tapin-btn--block { width: 100%; }


/* --- Cards ---------------------------------------------------------------- */
.tapin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tapin-space-4);
  padding: var(--tapin-space-6);
  background: var(--tapin-color-surface);
  border: 1px solid var(--tapin-color-border);
  border-radius: var(--tapin-radius-lg);
  box-shadow: var(--tapin-shadow-xs);
  transition: transform var(--tapin-transition-base),
              box-shadow var(--tapin-transition-base),
              border-color var(--tapin-transition-base);
}

.tapin-card--interactive { cursor: pointer; }
.tapin-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--tapin-color-border-strong);
  box-shadow: var(--tapin-shadow-lg);
}
.tapin-card--interactive:focus-within {
  border-color: var(--tapin-color-primary);
  box-shadow: var(--tapin-shadow-focus-ring);
}

.tapin-card--featured { background: var(--tapin-color-surface); }
.tapin-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--tapin-gradient-primary);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.tapin-card__title {
  margin: 0;
  font-size: var(--tapin-font-size-lg);
  font-weight: var(--tapin-font-weight-semibold);
  color: var(--tapin-color-text-strong);
  line-height: var(--tapin-line-height-snug);
}
.tapin-card__meta {
  font-size: var(--tapin-font-size-sm);
  color: var(--tapin-color-text-muted);
}


/* --- Nav tabs ------------------------------------------------------------- */
.tapin-nav-tabs {
  display: flex;
  align-items: center;
  gap: var(--tapin-space-1);
  padding: var(--tapin-space-1);
  background: var(--tapin-color-bg-soft);
  border: 1px solid var(--tapin-color-border);
  border-radius: var(--tapin-radius-full);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tapin-nav-tabs::-webkit-scrollbar { display: none; }

.tapin-nav-tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tapin-space-2);
  padding: var(--tapin-space-2) var(--tapin-space-4);
  min-height: var(--tapin-control-height-sm);
  border-radius: var(--tapin-radius-full);
  background: transparent;
  border: none;
  color: var(--tapin-color-text-muted);
  font-family: var(--tapin-font-sans);
  font-size: var(--tapin-font-size-sm);
  font-weight: var(--tapin-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--tapin-transition-base),
              background-color var(--tapin-transition-base);
}
.tapin-nav-tabs__item:hover { color: var(--tapin-color-text); }
.tapin-nav-tabs__item:focus-visible {
  outline: none;
  box-shadow: var(--tapin-shadow-focus-ring);
}
.tapin-nav-tabs__item[aria-current="page"],
.tapin-nav-tabs__item.is-active {
  color: var(--tapin-color-on-primary);
  background: var(--tapin-gradient-primary);
  box-shadow: var(--tapin-shadow-glow);
}
/* Pseudo-element underline for keyboard-focused inactive tabs.
   transform-only (no width animation) to keep paint cost low. */
.tapin-nav-tabs__item::after {
  content: '';
  position: absolute;
  inset-inline: var(--tapin-space-4);
  inset-block-end: 0;
  height: 2px;
  background: var(--tapin-color-primary);
  border-radius: var(--tapin-radius-full);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tapin-transition-base);
}
.tapin-nav-tabs__item:hover::after { transform: scaleX(0.4); }
.tapin-nav-tabs__item[aria-current="page"]::after,
.tapin-nav-tabs__item.is-active::after { transform: scaleX(0); }


/* --- Badges --------------------------------------------------------------- */
.tapin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0 var(--tapin-space-2);
  height: 1.5em;
  background: var(--tapin-color-bg-muted);
  color: var(--tapin-color-text-muted);
  font-size: var(--tapin-font-size-xs);
  font-weight: var(--tapin-font-weight-semibold);
  line-height: 1;
  border-radius: var(--tapin-radius-full);
  font-variant-numeric: tabular-nums;
}
.tapin-badge--primary {
  background: var(--tapin-color-primary);
  color: var(--tapin-color-on-primary);
}
.tapin-badge--neutral { /* default */ }
.tapin-badge--success {
  background: var(--tapin-color-success-bg);
  color: var(--tapin-color-success-fg);
  border: 1px solid var(--tapin-color-success-border);
}
.tapin-badge--warning {
  background: var(--tapin-color-warning-bg);
  color: var(--tapin-color-warning-fg);
  border: 1px solid var(--tapin-color-warning-border);
}
.tapin-badge--danger {
  background: var(--tapin-color-danger-bg);
  color: var(--tapin-color-danger-fg);
  border: 1px solid var(--tapin-color-danger-border);
}


/* --- Form controls -------------------------------------------------------- */
.tapin-input,
.tapin-textarea,
.tapin-select {
  display: block;
  width: 100%;
  min-height: var(--tapin-control-height-md);
  padding: var(--tapin-space-2) var(--tapin-space-3);
  padding-inline-start: var(--tapin-space-4);
  background: var(--tapin-color-surface);
  border: 1px solid var(--tapin-color-border);
  border-radius: var(--tapin-radius-md);
  color: var(--tapin-color-text);
  font-family: var(--tapin-font-sans);
  font-size: var(--tapin-font-size-base);
  line-height: var(--tapin-line-height-normal);
  transition: border-color var(--tapin-transition-base),
              box-shadow var(--tapin-transition-base);
  appearance: none;
}
.tapin-textarea {
  min-height: calc(var(--tapin-control-height-md) * 2.5);
  padding: var(--tapin-space-3) var(--tapin-space-4);
  resize: vertical;
  line-height: var(--tapin-line-height-relaxed);
}
.tapin-input::placeholder,
.tapin-textarea::placeholder { color: var(--tapin-color-text-subtle); }

.tapin-input:hover,
.tapin-textarea:hover,
.tapin-select:hover { border-color: var(--tapin-color-border-strong); }

.tapin-input:focus,
.tapin-textarea:focus,
.tapin-select:focus {
  outline: none;
  border-color: var(--tapin-color-primary);
  box-shadow: var(--tapin-shadow-focus-ring);
}

.tapin-input:disabled,
.tapin-textarea:disabled,
.tapin-select:disabled {
  background: var(--tapin-color-bg-muted);
  color: var(--tapin-color-text-subtle);
  cursor: not-allowed;
}

.tapin-input[aria-invalid="true"],
.tapin-textarea[aria-invalid="true"],
.tapin-select[aria-invalid="true"] {
  border-color: var(--tapin-color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Select dropdown chevron — RTL-correct via logical inset */
.tapin-select {
  padding-inline-end: var(--tapin-space-10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left var(--tapin-space-4) center;
  background-size: 12px 8px;
}
[dir="rtl"] .tapin-select { background-position: left var(--tapin-space-4) center; }
[dir="ltr"] .tapin-select { background-position: right var(--tapin-space-4) center; }

.tapin-field { display: flex; flex-direction: column; gap: var(--tapin-space-2); }
.tapin-field__label {
  font-size: var(--tapin-font-size-sm);
  font-weight: var(--tapin-font-weight-semibold);
  color: var(--tapin-color-text-strong);
}
.tapin-field__hint {
  font-size: var(--tapin-font-size-xs);
  color: var(--tapin-color-text-muted);
  line-height: var(--tapin-line-height-snug);
}
.tapin-field__error {
  font-size: var(--tapin-font-size-xs);
  color: var(--tapin-color-danger);
  font-weight: var(--tapin-font-weight-medium);
}
.tapin-field__required {
  color: var(--tapin-color-danger);
  margin-inline-start: var(--tapin-space-1);
  font-weight: var(--tapin-font-weight-bold);
}


/* --- Skeleton loader ------------------------------------------------------ */
@keyframes tapin-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
.tapin-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--tapin-color-bg-muted);
  border-radius: var(--tapin-radius-md);
  min-height: 1em;
  color: transparent;
  user-select: none;
}
.tapin-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: tapin-shimmer 1.4s var(--tapin-easing-out) infinite;
  will-change: transform;
}
@media (prefers-color-scheme: dark) {
  .tapin-skeleton::after {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 100%
    );
  }
}
.tapin-skeleton--text { height: var(--tapin-font-size-base); width: 80%; }
.tapin-skeleton--title { height: var(--tapin-font-size-2xl); width: 60%; }
.tapin-skeleton--block { height: 120px; width: 100%; }
.tapin-skeleton--circle { border-radius: var(--tapin-radius-full); aspect-ratio: 1; width: 48px; }


/* --- Empty state ---------------------------------------------------------- */
.tapin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tapin-space-3);
  padding: var(--tapin-space-12) var(--tapin-space-6);
  text-align: center;
  background: var(--tapin-color-bg-soft);
  border: 1px dashed var(--tapin-color-border);
  border-radius: var(--tapin-radius-lg);
  color: var(--tapin-color-text-muted);
}
.tapin-empty__illustration {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tapin-color-primary);
  margin-block-end: var(--tapin-space-2);
}
.tapin-empty__illustration > svg { width: 100%; height: 100%; }
.tapin-empty__title {
  margin: 0;
  font-size: var(--tapin-font-size-lg);
  font-weight: var(--tapin-font-weight-semibold);
  color: var(--tapin-color-text-strong);
}
.tapin-empty__sub {
  margin: 0;
  font-size: var(--tapin-font-size-sm);
  color: var(--tapin-color-text-muted);
  max-width: 42ch;
  line-height: var(--tapin-line-height-relaxed);
}
.tapin-empty__cta { margin-block-start: var(--tapin-space-3); }