@import "./tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .focus-ring {
    @apply outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out;
  }

  .popover {
    @apply relative inline-flex;
  }

  .popover__panel {
    @apply focus-ring absolute left-0 top-full z-[70] mt-2 min-w-[12rem] origin-top rounded-lg border border-border border-opacity-40 bg-panel px-4 py-3 text-sm text-text shadow-lg transition-transform transition-opacity duration-[var(--motion-duration-base)] ease-[var(--motion-ease-out)] opacity-0 scale-95 pointer-events-none;
  }

  .popover__panel[data-state="open"] {
    @apply pointer-events-auto opacity-100 scale-100;
  }

  .btn {
    @apply focus-ring inline-flex items-center justify-center gap-2 rounded-lg border border-transparent bg-primary px-4 py-2 text-sm font-semibold uppercase tracking-wide text-white shadow-md transition duration-base ease-in-out;
  }

  .btn:hover {
    @apply bg-info-strong shadow-lg;
  }

  .btn:focus-visible {
    @apply bg-info-pressed;
  }

  .btn:disabled {
    @apply pointer-events-none cursor-not-allowed opacity-60 shadow-none;
  }

  .btn-ghost {
    @apply btn border border-border border-opacity-60 bg-transparent text-white shadow-none;
  }

  .btn-ghost:hover {
    @apply bg-panel-hover text-text;
  }

  .btn-ghost:focus-visible {
    @apply bg-panel-hover;
  }

  .btn-ghost:disabled {
    @apply pointer-events-none opacity-50 shadow-none;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-full bg-panel px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-strong;
  }

  .badge[data-variant="critical"] {
    @apply bg-critical bg-opacity-20 text-critical-strong;
  }

  .badge[data-variant="info"] {
    @apply bg-info bg-opacity-20 text-info-strong;
  }

  .badge[data-variant="neutral"] {
    @apply bg-border bg-opacity-40 text-muted-strong;
  }

  .menu {
    @apply flex flex-col gap-1 py-2;
  }

  .menu__heading {
    @apply px-4 pb-2 text-xs font-semibold uppercase tracking-wide text-muted;
  }

  .menu__separator {
    @apply my-2 h-px bg-border bg-opacity-20;
  }

  .menu__item {
    @apply focus-ring relative flex w-full items-center gap-3 rounded-md px-4 py-2 text-sm font-medium text-text transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-in-out)];
  }

  .menu__item:hover {
    @apply bg-panel-hover text-text;
  }

  .menu__item[data-state="active"] {
    @apply bg-info bg-opacity-20 text-info-strong;
  }

  .menu__item[data-variant="critical"] {
    @apply text-critical-strong;
  }

  .menu__item[data-variant="critical"]:hover {
    @apply bg-critical bg-opacity-20;
  }

  .menu__item:disabled,
  .menu__item[aria-disabled="true"] {
    @apply cursor-not-allowed bg-transparent text-muted opacity-60;
  }

  .menu__item:disabled:hover,
  .menu__item[aria-disabled="true"]:hover {
    @apply bg-transparent text-muted;
  }

  .card {
    @apply focus-ring relative rounded-lg border border-transparent bg-card text-text shadow-md transition duration-base ease-in-out;
  }

  .card:hover {
    @apply shadow-lg;
  }

  .card:focus-visible {
    @apply border-info border-opacity-40 shadow-lg;
  }

  .card[data-state="critical"] {
    @apply border border-critical border-opacity-40 bg-card-critical;
  }

  .card[data-state="private"] {
    @apply bg-card-private shadow-lg;
  }

  .card[data-state="disabled"] {
    @apply opacity-60 shadow-none;
  }

  .form-control {
    @apply focus-ring block w-full rounded-md border border-border-subtle bg-surface-alt px-3 py-2 text-sm text-text shadow-sm transition duration-base ease-in-out placeholder:text-muted;
  }

  .form-control:hover {
    @apply border-border;
  }

  .form-control:focus-visible {
    @apply border-info-strong;
  }

  .form-control:disabled {
    @apply cursor-not-allowed bg-surface text-muted opacity-60;
  }

  .form-control:invalid {
    @apply border-critical border-opacity-60;
  }

  .input {
    @apply form-control;
  }

  .textarea {
    @apply form-control min-h-[8rem] resize-y;
  }

  .select {
    @apply form-control appearance-none pr-10;
    --select-arrow-color: var(--color-border);
    background-image: linear-gradient(135deg, transparent 50%, var(--select-arrow-color) 50%),
      linear-gradient(45deg, var(--select-arrow-color) 50%, transparent 50%),
      linear-gradient(to right, var(--color-border-subtle), var(--color-border-subtle));
    background-position: right 0.75rem center, right 0.4rem center, right 2.5rem center;
    background-size: 0.6rem 0.6rem, 0.6rem 0.6rem, 1px 60%;
    background-repeat: no-repeat;
  }

  .select:hover {
    --select-arrow-color: var(--color-border);
  }

  .select:focus-visible {
    --select-arrow-color: var(--color-info-strong);
  }

  .select:disabled {
    --select-arrow-color: var(--color-border-subtle);
  }

  .select:invalid {
    --select-arrow-color: var(--color-critical);
  }

  .checkbox {
    @apply focus-ring inline-flex h-5 w-5 cursor-pointer appearance-none items-center justify-center rounded border border-border-subtle bg-surface-alt text-white transition duration-base ease-in-out;
  }

  .checkbox:hover {
    @apply border-border;
  }

  .checkbox:disabled {
    @apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60;
  }

  .checkbox::after {
    content: "";
    @apply pointer-events-none h-2 w-3 border-b-2 border-r-2 border-white opacity-0 transition duration-base ease-in-out;
    transform: rotate(45deg) translateY(-0.125rem) scale(0.85);
  }

  .checkbox:checked,
  .checkbox[aria-checked="true"] {
    @apply border-info-strong bg-info-strong;
  }

  .checkbox:checked::after,
  .checkbox[aria-checked="true"]::after {
    @apply opacity-100;
    transform: rotate(45deg) translateY(-0.125rem) scale(1);
  }

  .switch {
    @apply focus-ring relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border border-border-subtle bg-border-subtle transition-colors duration-base ease-in-out;
  }

  .switch::before {
    content: "";
    @apply pointer-events-none absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 transform rounded-full bg-surface shadow-md transition duration-base ease-in-out;
  }

  .switch:disabled {
    @apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60;
  }

  .switch[aria-checked="true"],
  .switch.is-on {
    @apply border-info-strong bg-info-strong;
  }

  .switch[aria-checked="true"]::before,
  .switch.is-on::before {
    @apply translate-x-5;
  }

  @media (prefers-reduced-motion: reduce) {
    .form-control,
    .checkbox,
    .checkbox::after,
    .switch,
    .switch::before,
    .popover__panel,
    .menu__item {
      transition: none !important;
    }
  }

  .bv-modal {
    @apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-4 sm:p-6;
  }

  .bv-modal__panel {
    @apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-3xl rounded-xl border border-border border-opacity-40 bg-surface px-6 py-8 text-left text-white shadow-modal transition duration-base ease-out;
  }

  .bv-modal__panel:focus-visible {
    @apply border-info border-opacity-50;
  }

  .bv-modal-backdrop {
    @apply absolute inset-0 z-[var(--z-modal-overlay)] bg-overlay bg-opacity-80 backdrop-blur;
  }

  .grid-stack {
    @apply grid gap-lg;
  }

  .grid-stack[data-variant="cards"] {
    @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-3;
  }

  .grid-stack[data-orientation="vertical"] {
    @apply flex flex-col gap-md;
  }

  .bv-stack {
    @apply flex flex-col gap-lg;
  }

  .bv-stack--tight {
    @apply gap-md;
  }

  .bv-grid-video {
    @apply grid gap-xl py-lg;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }

  /* Legacy compatibility shims */
  .video-card {
    @apply card overflow-visible;
  }

  .video-card.video-card--owner-private {
    @apply bg-card-private;
  }

  .video-card.video-card--nsfw-owner {
    @apply border border-critical border-opacity-40 bg-black;
  }

  .video-card.video-card--nsfw-owner:hover {
    @apply border-opacity-60 shadow-lg;
  }

  .video-card img.video-card__thumbnail--blurred {
    @apply transition duration-base ease-in-out;
    filter: blur(18px);
    transform: scale(1.05);
  }

  .video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
    @apply border border-critical border-opacity-40 bg-card-critical;
  }

  .video-visibility-toggle {
    @apply inline-flex items-center gap-1 rounded-full border border-border bg-panel px-1 py-1;
  }

  .video-visibility-toggle__option {
    @apply inline-flex items-center justify-center rounded-full border border-transparent bg-panel px-3 py-2 text-xs font-semibold uppercase text-muted transition duration-base ease-in-out;
  }

  .video-visibility-toggle__option:not(.is-disabled):hover {
    @apply bg-panel-hover text-text;
  }

  .video-visibility-toggle__option[data-active="true"] {
    @apply border border-info border-opacity-60 text-text shadow-lg;
  }

  .video-visibility-toggle__option.is-disabled {
    @apply cursor-not-allowed opacity-45;
  }

  .video-modal__container {
    @apply flex h-full min-h-screen w-full flex-1 flex-col;
  }

  .player-modal__container {
    @apply video-modal__container;
  }

  .video-modal__panel {
    @apply bv-modal__panel relative flex w-full flex-1 flex-col overflow-visible bg-surface shadow-none;
  }

  .player-modal__content {
    @apply video-modal__panel;
  }

  .video-modal__nav {
    @apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-surface;
  }

  .modal-nav {
    @apply video-modal__nav;
  }

  .video-modal__actions {
    @apply ml-auto flex flex-nowrap items-center justify-end gap-2;
  }

  .modal-actions {
    @apply video-modal__actions;
  }

  .video-modal__video {
    @apply sticky top-0 z-[51] flex w-full flex-shrink-0 items-center justify-center border-b border-border border-opacity-20 bg-surface;
  }

  .player-modal__video {
    @apply video-modal__video;
  }

  .video-modal__media {
    @apply block aspect-video w-full rounded-xl bg-black object-contain shadow-2xl;
  }

  .player-modal__video video {
    @apply video-modal__media;
  }

  .video-modal__info {
    @apply flex-none border-t border-border border-opacity-20 bg-surface;
  }

  .player-modal__info {
    @apply video-modal__info;
  }

  .profile-pane {
    @apply flex flex-col gap-lg;
  }

  .profile-pane.hidden {
    display: none;
  }

  .profile-switcher {
    @apply card flex flex-col gap-lg;
  }

  .profile-switcher__badge {
    @apply badge self-start;
  }

  .profile-switcher__header {
    @apply flex flex-col gap-sm sm:flex-row sm:items-center sm:justify-between;
  }

  .profile-switcher__intro {
    @apply flex flex-col gap-2xs;
  }

  .profile-switcher__title {
    @apply text-base font-semibold text-text;
  }

  .profile-switcher__subtitle {
    @apply text-sm text-muted;
  }

  .profile-switcher__list {
    @apply flex flex-col gap-md;
  }

  .profile-switcher__helper {
    @apply text-xs text-muted;
  }

  .profile-card {
    @apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-info focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center;
  }

  .profile-card--active {
    @apply border-info border-opacity-60 shadow-lg;
  }

  .profile-card__avatar {
    @apply flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-full border border-border border-opacity-30 bg-surface;
  }

  .profile-card__avatar img {
    @apply h-full w-full rounded-full object-cover;
  }

  .profile-card--active .profile-card__avatar {
    @apply border-info border-opacity-70 ring-2 ring-info ring-opacity-20;
  }

  .profile-card__meta {
    @apply flex min-w-0 flex-1 flex-col gap-sm;
  }

  .profile-card__topline {
    @apply flex w-full flex-wrap items-center gap-sm sm:justify-between;
  }

  .profile-card__label {
    @apply text-xs font-semibold uppercase tracking-wide text-info;
  }

  .profile-card__name {
    @apply truncate text-sm font-semibold text-text;
  }

  .profile-card__npub {
    @apply break-all font-mono text-xs text-muted;
  }

  .profile-card__action,
  .profile-nav-button {
    @apply btn-ghost ml-auto flex-shrink-0 px-3 py-1 text-xs;
  }

  .profile-switcher__add {
    @apply card hover:bg-info/10 flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-info hover:border-opacity-60 hover:text-white focus-visible:border-info focus-visible:border-opacity-60;
  }

  .profile-switcher__addAvatar {
    @apply flex h-12 w-12 flex-none items-center justify-center rounded-full border border-dashed border-current bg-surface;
  }

  .profile-switcher__addAvatar svg {
    @apply h-5 w-5;
  }

  .profile-switcher__addCopy {
    @apply flex flex-col gap-1 text-left;
  }

  .profile-switcher__addTitle {
    @apply text-sm font-semibold text-inherit;
  }

  .profile-switcher__addHint {
    @apply text-xs text-muted;
  }

  .watch-history-grid {
    @apply flex w-full flex-col gap-5 py-6 sm:gap-6;
  }

  .watch-history-grid.watch-history-grid--modal {
    @apply gap-5 py-0 sm:gap-6;
  }

  .watch-history-card {
    @apply card flex flex-wrap items-stretch gap-5 p-4 transition duration-base ease-out hover:-translate-y-0.5 hover:shadow-lg sm:gap-6 sm:p-5;
  }

  .watch-history-card--private {
    @apply border-info border-opacity-60;
  }

  .watch-history-card__primary {
    @apply flex min-w-0 flex-1 flex-wrap items-stretch gap-4 sm:flex-nowrap;
  }

  .watch-history-card__thumbnail {
    @apply block flex-none text-white no-underline sm:w-56;
  }

  .watch-history-card__thumbnailInner {
    @apply aspect-video w-full overflow-hidden rounded-lg bg-surface;
  }

  .watch-history-card__thumbnailInner img {
    @apply h-full w-full object-cover;
  }

  .watch-history-card__details {
    @apply flex min-w-0 flex-1 flex-col justify-center gap-sm;
  }

  .watch-history-card__title {
    @apply cursor-pointer text-lg font-semibold leading-snug text-white transition duration-base ease-out;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .watch-history-card__title:hover,
  .watch-history-card__title:focus {
    @apply text-info;
  }

  .watch-history-card__created {
    @apply text-sm text-muted;
  }

  .watch-history-card__meta {
    @apply flex min-w-0 flex-col justify-between gap-4 sm:min-w-[14rem] sm:flex-[0_0_16rem];
  }

  .watch-history-card__watched {
    @apply text-sm text-border-subtle;
  }

  .watch-history-card__creator {
    @apply flex items-center gap-3;
  }

  .watch-history-card__creatorAvatar {
    @apply flex h-10 w-10 items-center justify-center rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-info hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-50;
  }

  .watch-history-card__creatorAvatar img {
    @apply h-full w-full rounded-full object-cover;
  }

  .watch-history-card__creatorName {
    @apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-info focus-visible:text-info;
  }

  .watch-history-card__actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .watch-history-card__action {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-white focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-white;
  }

  .watch-history-card__action--primary {
    @apply bg-info-strong text-white hover:bg-info-pressed focus-visible:bg-info-pressed;
  }

  .watch-history-card__action--danger {
    @apply bg-critical text-white hover:bg-critical-strong focus-visible:bg-critical-strong;
  }
}

@media (max-width: 40rem) {
  .bv-grid-video {
    gap: var(--space-md);
    grid-template-columns: 1fr;
  }
}