@import "tailwindcss";

@plugin "@tailwindcss/typography";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake, bumblebee, emerald,
          corporate, synthwave, retro, cyberpunk, valentine, halloween,
          garden, forest, aqua, lofi, pastel, fantasy, wireframe, black,
          luxury, dracula, cmyk, autumn, business, acid, lemonade, night,
          coffee, winter, dim, nord, sunset;
}

/* Prevent horizontal scroll globally */
html,
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

#app {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Ensure drawer content doesn't overflow */
.drawer-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/*
 * DaisyUI v5 compatibility shim.
 * v5 removed `.form-control` and repurposed `.label` / `.label-text` (which v4 used
 * to stack a label above a full-width input). The existing markup across ~16 views
 * relies on the v4 semantics, so restore them here. These rules are intentionally
 * UNLAYERED — unlayered CSS wins over DaisyUI's `@layer` styles regardless of
 * specificity — so they reassert the v4 form layout without touching every file.
 */
.form-control {
  display: flex;
  flex-direction: column;
}
.form-control > .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;
  padding-inline: 0.25rem;
}
.label-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-base-content);
}
/* v5 gives .input/.select/.textarea an intrinsic width, so form-control's
   flex `align-items: stretch` no longer fills the row the way v4 did. Restore
   full-width controls inside form fields (low specificity via :where, but
   unlayered so it still beats DaisyUI's layer). */
.form-control :where(.input, .select, .textarea, .input-group) {
  width: 100%;
}

/* Custom styles */
@layer components {
  .btn-primary {
    @apply btn bg-primary text-primary-content hover:opacity-90;
  }

  .card-compact {
    @apply card bg-base-100 shadow-md;
  }

  .status-badge {
    @apply badge font-medium;
  }

  .status-online {
    @apply badge font-medium badge-success;
  }

  .status-offline {
    @apply badge font-medium badge-error;
  }

  .status-connecting {
    @apply badge font-medium badge-warning;
  }

  .status-unknown {
    @apply badge font-medium badge-neutral;
  }
}

/* Animations */
@layer utilities {
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .loading-dots::after {
    content: '';
    animation: dots 1.5s steps(5, end) infinite;
  }

  @keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
  }
}

/* Vue TransitionGroup animations for smooth list updates */
/* Server list transitions */
.server-list-move,
.server-list-enter-active,
.server-list-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.server-list-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.server-list-leave-to {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}

.server-list-leave-active {
  position: absolute;
}

/* Secret list transitions */
.secret-list-move,
.secret-list-enter-active,
.secret-list-leave-active {
  transition: all 0.25s ease-out;
}

.secret-list-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}

.secret-list-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

/* Tool call row transitions */
.tool-call-move,
.tool-call-enter-active,
.tool-call-leave-active {
  transition: all 0.2s ease;
}

.tool-call-enter-from {
  opacity: 0;
  transform: translateY(-5px);
}

.tool-call-leave-to {
  opacity: 0;
  transform: translateY(5px);
}

/* Repository card transitions */
.repo-card-move,
.repo-card-enter-active,
.repo-card-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.repo-card-enter-from {
  opacity: 0;
  transform: scale(0.9);
}

.repo-card-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.repo-card-leave-active {
  position: absolute;
}
