/* Product Transformation Analyzer Tab Styles */

.comparison-tabs .tab-btn {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.comparison-tabs .tab-btn:hover {
  border-color: #d1d5db;
  color: #374151;
}

.comparison-tabs .tab-btn.active {
  border-bottom-color: #3b82f6 !important;
  color: #2563eb !important;
}

.comparison-tabs .tab-content {
  display: none;
}

.comparison-tabs .tab-content.active {
  display: block !important;
}

/* Table styling for comparison data */
.comparison-tabs table tbody tr:hover {
  background-color: #f9fafb;
}

.comparison-tabs .truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badges */
.comparison-tabs .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Ensure proper spacing for tab content */
.comparison-tabs .p-6 > * {
  margin-bottom: 1rem;
}

.comparison-tabs .p-6 > *:last-child {
  margin-bottom: 0;
}

/* Legacy summary section - always visible */
.legacy-summary {
  position: relative;
  z-index: 10;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
}

.legacy-summary h3 {
  color: #1e3a8a !important;
}

/* Ensure content sections have proper spacing */
.comparison-content {
  margin-top: 1.5rem;
}

/* Summary boxes styling */
.listing-summary-box {
  transition: all 0.2s ease-in-out;
}

.listing-summary-box:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.listing-summary-box .field-label {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.listing-summary-box .field-value {
  color: #111827;
  word-wrap: break-word;
}

.listing-summary-box .source-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}
/* Intentionally empty.
   Sidebar collapse/peek styles moved to app/assets/stylesheets/application.tailwind.css
   so they are managed in the Tailwind pipeline. */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 79 70 229;
    --color-success: 16 185 129;
    --color-warning: 245 158 11;
    --color-danger: 239 68 68;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-lg border border-slate-200 shadow-soft;
  }

  .content-card {
    @apply bg-white rounded-xl border-2 border-slate-200 shadow-md;
  }

  .page-title {
    @apply text-xl font-bold text-slate-900 tracking-tight;
  }

  .page-subtitle {
    @apply text-sm text-slate-600 font-medium;
  }

  .section-title {
    @apply text-lg font-semibold text-slate-900 mb-2 tracking-tight;
  }

  .section-subtitle {
    @apply text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2;
  }

  .content-heading {
    @apply text-base font-semibold text-slate-900 mb-2;
  }

  .admin-flash {
    @apply mt-6 mb-6 px-4 py-3 rounded-r-lg shadow-soft flex items-start border-l-4;
  }

  .admin-flash-notice {
    @apply bg-emerald-50 border-emerald-500 text-emerald-800;
  }

  .admin-flash-alert {
    @apply bg-rose-50 border-rose-500 text-rose-800;
  }

  .admin-flash-icon {
    @apply w-5 h-5 mr-3 flex-shrink-0 mt-0.5;
  }

  .admin-flash-message {
    @apply flex-1;
  }

  .admin-flash-message-sm {
    @apply text-sm;
  }

  .btn {
    @apply inline-flex items-center justify-center font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded-md;
  }

  .btn-md {
    @apply px-4 py-2 text-sm rounded-md;
  }

  .btn-lg {
    @apply px-6 py-3 text-base rounded-lg;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }

  .btn-secondary {
    @apply btn bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-500;
  }

  .btn-danger {
    @apply btn bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500;
  }

  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
  }

  .tab-link {
    @apply inline-flex items-center px-4 py-3 border-b-2 font-semibold text-sm transition-all;
  }

  .tab-link-active {
    @apply tab-link border-primary-600 text-primary-600 bg-primary-50/50;
  }

  .tab-link-inactive {
    @apply tab-link border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-400;
  }

  .admin-tab-button {
    @apply whitespace-nowrap py-2 px-4 text-sm font-medium transition-all duration-150 rounded-t-lg border-t border-x;
  }

  .admin-tab-button-active {
    @apply border-slate-300 border-b-white text-primary-700 bg-white -mb-px;
  }

  .admin-tab-button-inactive {
    @apply border-transparent text-slate-500 bg-slate-100/50 hover:text-slate-700 hover:bg-slate-100;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-success {
    @apply badge bg-emerald-100 text-emerald-800;
  }

  .badge-warning {
    @apply badge bg-amber-100 text-amber-800;
  }

  .badge-danger {
    @apply badge bg-rose-100 text-rose-800;
  }

  .badge-info {
    @apply badge bg-primary-100 text-primary-800;
  }

  .badge-neutral {
    @apply badge bg-slate-100 text-slate-700;
  }

  .admin-pill-neutral {
    @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-slate-100 text-slate-800;
  }

  .admin-pill-info {
    @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-primary-100 text-primary-800;
  }

  .editorial-builder-button {
    @apply px-2 py-1 bg-white ring-1 ring-slate-300 rounded-md text-slate-700 hover:bg-slate-50;
  }

  .editorial-builder-select {
    @apply px-2 py-1 bg-white ring-1 ring-slate-300 rounded-md text-slate-700 text-xs;
  }

  .admin-toolbar-button {
    @apply inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .admin-toolbar-button-primary {
    @apply admin-toolbar-button border-transparent text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500;
  }

  .admin-toolbar-button-success {
    @apply admin-toolbar-button border-transparent text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
  }

  .admin-toolbar-button-neutral {
    @apply admin-toolbar-button border-slate-300 text-slate-700 bg-white hover:bg-slate-50 focus:ring-primary-500;
  }

  .input-focus {
    @apply focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
  }

  .csv-header-dependent-disabled {
    @apply bg-slate-100 cursor-not-allowed text-slate-500;
  }

  .csv-header-dependent-attention {
    @apply ring-2 ring-primary-300 ring-offset-1 bg-primary-50 border-primary-400;
  }

  .table-header {
    @apply bg-slate-50 text-slate-700 font-semibold text-xs uppercase tracking-wider;
  }

  .table-row-hover {
    @apply hover:bg-slate-50 transition-colors duration-150;
  }

  .job-run-row {
    @apply transition-colors duration-500;
  }

  .job-run-row-running {
    @apply bg-emerald-50/70;
    animation: job-run-row-pulse 1.8s ease-in-out infinite;
  }

  .job-run-row-issue {
    @apply bg-amber-50;
  }

  .job-run-row-failed {
    @apply bg-rose-50;
  }

  .job-run-row-completed {
    @apply bg-emerald-50/30;
  }

  .info-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
  }

  .info-label {
    @apply text-xs font-semibold text-slate-500 uppercase tracking-wide;
  }

  .info-value {
    @apply text-sm text-slate-900 font-medium;
  }

  .section-tip-attention {
    animation: section-tip-pulse 0.5s ease-in-out 10;
    border: 1px solid rgb(199 210 254);
  }

  .admin-menu-section-title {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .admin-menu-section-title::-webkit-details-marker {
    display: none;
  }

  .admin-menu-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
  }

  details[open] > .admin-menu-section-title .admin-menu-section-chevron {
    transform: rotate(90deg);
  }
}

@keyframes job-run-row-pulse {
  0%,
  100% {
    background-color: rgb(236 253 245 / 0.7);
  }

  50% {
    background-color: rgb(220 252 231 / 0.95);
  }
}

@keyframes section-tip-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(79 70 229 / 0);
    border-color: rgb(199 210 254);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(79 70 229 / 0.15);
    border-color: rgb(129 140 248);
  }
}

@media (min-width: 1024px) {
  body.admin-sidebar-collapsed #admin_content {
    margin-left: 4rem !important;
    max-width: none !important;
    width: calc(100vw - 4rem) !important;
    margin-right: 0 !important;
  }

  body.admin-sidebar-collapsed .admin-desktop-nav {
    width: 4rem !important;
    overflow-x: visible;
  }

  body.admin-sidebar-collapsed .admin-sidebar-brand-row {
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.admin-sidebar-collapsed .admin-sidebar-logo-image {
    height: 2.5rem;
    width: 2.5rem;
    object-fit: contain;
  }

  body.admin-sidebar-collapsed .admin-sidebar-toggle-button {
    position: static;
    margin: 0;
    padding: 0.375rem;
  }

  body.admin-sidebar-collapsed .admin-menu-label,
  body.admin-sidebar-collapsed .admin-menu-section-title,
  body.admin-sidebar-collapsed .admin-menu-section-title-text,
  body.admin-sidebar-collapsed .admin-menu-spotlight-shortcut,
  body.admin-sidebar-collapsed .admin-menu-spotlight-label,
  body.admin-sidebar-collapsed .admin-menu-section-chevron,
  body.admin-sidebar-collapsed .admin-sidebar-collapse-icon {
    display: none;
  }

  body:not(.admin-sidebar-collapsed) .admin-sidebar-expand-icon {
    display: none;
  }

  body.admin-sidebar-collapsed .admin-menu-spotlight-button {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.admin-sidebar-collapsed .admin-menu-item-link {
    justify-content: center;
  }

  body.admin-sidebar-collapsed .admin-menu-item-link .admin-menu-flyout-label {
    display: none;
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 70;
    pointer-events: none;
  }

  body.admin-sidebar-collapsed .admin-menu-item-link:hover .admin-menu-flyout-label,
  body.admin-sidebar-collapsed .admin-menu-item-link:focus-visible .admin-menu-flyout-label {
    display: inline-flex;
    align-items: center;
  }

  body.admin-sidebar-collapsed .admin-desktop-nav:hover,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within {
    width: 12rem !important;
  }

  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-label,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-label,
  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-section-title,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-section-title,
  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-section-title-text,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-section-title-text,
  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-section-chevron,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-section-chevron,
  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-spotlight-label,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-spotlight-label,
  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-spotlight-shortcut,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-spotlight-shortcut {
    display: inline-block;
  }

  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-section-title,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-section-title,
  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-section-chevron,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-section-chevron {
    display: flex;
  }

  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-item-link,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-item-link {
    justify-content: flex-start;
  }

  body.admin-sidebar-collapsed .admin-desktop-nav:hover .admin-menu-flyout-label,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within .admin-menu-flyout-label {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  body.admin-sidebar-collapsed .admin-desktop-nav:hover,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within {
    width: 14rem !important;
  }
}

@media (min-width: 1536px) {
  body.admin-sidebar-collapsed .admin-desktop-nav:hover,
  body.admin-sidebar-collapsed .admin-desktop-nav:focus-within {
    width: 16rem !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */