/* ──────────────────────────────────────────────────────────────────────────
   shadcn/ui components — ported to vanilla CSS (no React, no Tailwind)
   Mirrors the Arabian-Singer Desktop ui/*.tsx recipes (button, badge, switch,
   input, tabs, sidebar nav), driven by the --as-* design tokens in style.css.
   Sizing is scaled UP for the web app (vs the desktop's compact h-9 / text-sm).
   Use opt-in: add `.ui-*` classes to elements; nothing here is global.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Button — desktop ui/button.tsx ───────────────────────────────────────
   Base (cva): inline-flex items-center justify-center gap-2 rounded-md
               text-sm font-medium transition-colors focus ring, disabled.
   Web scale:  h-9 → h-11, text-sm → 1rem, px-4 → px-5.
   Variants:   default / secondary / ghost / outline / live
   Sizes:      .ui-btn--sm / .ui-btn--lg / .ui-btn--icon
   ────────────────────────────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  height: 44px;                 /* h-11 */
  padding: 0 20px;              /* px-5 */
  border: 1px solid transparent;
  border-radius: 12px;          /* rounded-md (web-scaled) */
  font-family: "Tajawal", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--as-bg), 0 0 0 4px var(--as-accent);
}
.ui-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* variant: default (primary) */
.ui-btn--default {
  background-color: var(--as-accent);
  color: var(--as-accent-fg);
}
.ui-btn--default:hover { background-color: var(--as-accent-90); }

/* variant: secondary */
.ui-btn--secondary {
  background-color: var(--as-muted);
  color: var(--as-fg);
}
.ui-btn--secondary:hover { background-color: var(--as-surface); }

/* variant: ghost */
.ui-btn--ghost {
  background-color: transparent;
  color: var(--as-muted-fg);
}
.ui-btn--ghost:hover {
  background-color: var(--as-muted);
  color: var(--as-fg);
}

/* variant: outline */
.ui-btn--outline {
  background-color: transparent;
  border-color: var(--as-border);
  color: var(--as-fg);
}
.ui-btn--outline:hover { background-color: var(--as-muted); }

/* variant: live (red broadcast) */
.ui-btn--live {
  background-color: var(--as-live);
  color: #fff;
}
.ui-btn--live:hover { background-color: hsl(0 80% 45%); }

/* sizes */
.ui-btn--sm   { height: 36px; padding: 0 14px; font-size: 0.875rem; border-radius: 10px; }
.ui-btn--lg   { height: 52px; padding: 0 32px; font-size: 1.125rem; }
.ui-btn--icon { width: 44px; height: 44px; padding: 0; }
.ui-btn--icon.ui-btn--sm { width: 36px; height: 36px; }

/* press feedback (desktop uses framer whileTap scale 0.97) */
.ui-btn:active { transform: scale(0.97); }

/* ── Badge / tag — desktop ui/badge.tsx ───────────────────────────────────
   Base: inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium.
   Web scale: text-xs → 0.875rem, py-0.5 → py-1.
   Variants: outline (default) / active (solid) / soft (primary tint)
   ────────────────────────────────────────────────────────────────────────── */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: "Tajawal", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ui-badge--outline {
  border-color: var(--as-border);
  color: var(--as-muted-fg);
  background-color: transparent;
}
.ui-badge--outline:hover {
  background-color: var(--as-muted);
  color: var(--as-fg);
}
.ui-badge--active {
  background-color: var(--as-accent);
  color: var(--as-accent-fg);
}
.ui-badge--soft {
  background-color: var(--as-accent-tint);
  color: var(--as-accent);
}
.ui-badge--soft:hover { background-color: var(--as-accent-tint-hover); }

/* ── Tabs (segmented soft-tint) — desktop active tab pattern ───────────────
   Inactive: muted-foreground, ghost hover. Active: primary/20 tint + primary.
   ────────────────────────────────────────────────────────────────────────── */
.ui-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background-color: transparent;
  color: var(--as-muted-fg);
  font-family: "Tajawal", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ui-tab:hover {
  background-color: var(--as-muted);
  color: var(--as-fg);
}
.ui-tab.is-active,
.ui-tab[aria-selected="true"] {
  background-color: var(--as-accent-tint);
  color: var(--as-accent);
  font-weight: 700;
}
.ui-tab.is-active:hover,
.ui-tab[aria-selected="true"]:hover {
  background-color: var(--as-accent-tint-hover);
  color: var(--as-accent);
}

/* ── Nav / icon button — desktop layouts/Sidebar.tsx ──────────────────────
   Inactive: muted-fg, hover muted. Active: primary/20 tint + primary.
   Web scale: w-10 h-10 → w-12 h-12.
   ────────────────────────────────────────────────────────────────────────── */
.ui-nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 12px;          /* rounded-lg, web-scaled */
  background-color: transparent;
  color: var(--as-muted-fg);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ui-nav-icon:hover {
  background-color: var(--as-muted);
  color: var(--as-fg);
}
.ui-nav-icon.is-active {
  background-color: var(--as-accent-tint);
  color: var(--as-accent);
}
.ui-nav-icon.is-active:hover { background-color: var(--as-accent-tint-hover); }

/* ── Input — desktop ui/input.tsx ─────────────────────────────────────────
   Base: h-9 rounded-md border-input bg-muted px-3 text-sm, ring on focus.
   Web scale: h-9 → h-11, text-sm → 1rem.
   ────────────────────────────────────────────────────────────────────────── */
.ui-input {
  display: flex;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--as-border);
  border-radius: 12px;
  background-color: var(--as-muted);
  color: var(--as-fg);
  font-family: "Tajawal", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-input::placeholder { color: var(--as-muted-fg); }
.ui-input:focus-visible,
.ui-input:focus {
  outline: none;
  border-color: var(--as-accent);
  box-shadow: 0 0 0 2px var(--as-accent-tint);
}
.ui-input:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── Switch — desktop ui/switch.tsx ───────────────────────────────────────
   Pill track h-6 w-11; knob h-5 w-5 white; on = bg-primary, off = muted-fg/30.
   Web scale: track 28×52, knob 22.  Toggle via `.is-on` (or aria-checked).
   ────────────────────────────────────────────────────────────────────────── */
.ui-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 52px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: var(--as-track-off);
  cursor: pointer;
  transition: background-color 0.2s ease;
  direction: ltr;
}
.ui-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background-color: var(--as-knob);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.ui-switch.is-on,
.ui-switch[aria-checked="true"] {
  background-color: var(--as-accent);
}
.ui-switch.is-on::after,
.ui-switch[aria-checked="true"]::after {
  transform: translateX(24px);
}
.ui-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Card / panel — desktop .app-panel ────────────────────────────────────
   Flat surface, 1px border, rounded, no shadow (shadow = legacy feel).
   ────────────────────────────────────────────────────────────────────────── */
.ui-card {
  background-color: var(--as-card);
  border: 1px solid var(--as-border);
  border-radius: 14px;
  overflow: hidden;
}