/**
 * Dashflow X Utility Classes
 * Additional helper classes for SEOLOGY.AI dashboard
 */

/* Display/Heading Typography */
.display-1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.167em;
  color: var(--neutral--800);
}

.display-2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--neutral--800);
}

.display-3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.222em;
  color: var(--neutral--800);
}

/* Badge Aliases - Map simple "badge" class to color-badge for easier use */
.badge {
  border-radius: 32px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.333em;
  display: inline-block;
}

.badge.green {
  background-color: var(--system--green-100);
  color: var(--system--green-300);
}

.badge.blue {
  background-color: var(--system--blue-100);
  color: var(--system--blue-300);
}

.badge.red {
  background-color: var(--system--red-100);
  color: var(--system--300);
}

.badge.orange {
  background-color: var(--system--orange-100);
  color: var(--system--orange-300);
}

.badge.primary {
  color: var(--neutral--100);
  background-image: linear-gradient(#3d7fff, #4b5dff);
  border: 1px solid transparent;
}

.badge.neutral {
  background-color: var(--neutral--800);
  color: var(--neutral--100);
}

/* Hover Card Effect */
.hover-card-link {
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.hover-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 var(--general--shadow-03);
}

/* Flex Utilities */
.flex-vertical {
  display: flex;
  flex-direction: column;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
}

.space-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.flex-1 {
  flex: 1;
}

/* Gap Utilities */
.gap-row-8px {
  grid-row-gap: 8px;
  row-gap: 8px;
}

.gap-row-12px {
  grid-row-gap: 12px;
  row-gap: 12px;
}

.gap-row-16px {
  grid-row-gap: 16px;
  row-gap: 16px;
}

.gap-row-24px {
  grid-row-gap: 24px;
  row-gap: 24px;
}

.gap-row-32px {
  grid-row-gap: 32px;
  row-gap: 32px;
}

.gap-column-4px {
  grid-column-gap: 4px;
  column-gap: 4px;
}

.gap-column-8px {
  grid-column-gap: 8px;
  column-gap: 8px;
}

.gap-column-12px {
  grid-column-gap: 12px;
  column-gap: 12px;
}

.gap-column-16px {
  grid-column-gap: 16px;
  column-gap: 16px;
}

/* Flexbox Gap Utilities (for non-grid flexbox layouts) */
.gap-8px {
  gap: 8px;
}

.gap-12px {
  gap: 12px;
}

.gap-16px {
  gap: 16px;
}

/* Margin Utilities */
.ml-8px {
  margin-left: 8px;
}

.ml-12px {
  margin-left: 12px;
}

/* Padding Utilities */
.pd-6px {
  padding: 6px;
}

.pd-8px {
  padding: 8px;
}

.pd-12px {
  padding: 12px;
}

/* Margin Utilities */
.mg-bottom-8px {
  margin-bottom: 8px;
}

.mg-bottom-12px {
  margin-bottom: 12px;
}

.mg-bottom-16px {
  margin-bottom: 16px;
}

.mg-bottom-24px {
  margin-bottom: 24px;
}

.mg-bottom-32px {
  margin-bottom: 32px;
}

.mg-bottom-48px {
  margin-bottom: 48px;
}

.mg-top-12px {
  margin-top: 12px;
}

.mg-top-16px {
  margin-top: 16px;
}

.mg-top-24px {
  margin-top: 24px;
}

/* Color Utilities */
.color-accent-1 {
  color: var(--accent--primary-1);
}

.color-neutral-500 {
  color: var(--neutral--500);
}

.color-neutral-600 {
  color: var(--neutral--600);
}

.color-neutral-700 {
  color: var(--neutral--700);
}

.color-neutral-800 {
  color: var(--neutral--800);
}

/* Grid Responsive Utilities */
.grid-4-columns {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

._1-column-tablet {
  /* Will be grid-template-columns: 1fr; on tablet */
}

._1-column-mbl {
  /* Will be grid-template-columns: 1fr; on mobile */
}

._2-col-mbl {
  /* Will be grid-template-columns: 1fr 1fr; on mobile */
}

/* Text Utilities */
.text-center {
  text-align: center;
}

.text-decoration-none {
  text-decoration: none;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Font Weight */
.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

/* Background */
.bg-neutral-200 {
  background-color: var(--neutral--200);
}

/* Progress Bar */
.progress-bar-wrapper {
  width: 100%;
  margin-top: 16px;
}

.progress-bar-bg {
  width: 100%;
  height: 8px;
  background-color: var(--neutral--300);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-bar.green {
  background-color: var(--system--green-300);
}

.progress-bar.orange {
  background-color: var(--system--orange-300);
}

.progress-bar.red {
  background-color: var(--system--300);
}

/* Skeleton Loading */
.skeleton-box {
  background: linear-gradient(
    90deg,
    var(--neutral--300) 0%,
    var(--neutral--200) 50%,
    var(--neutral--300) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Empty State */
.empty-state {
  padding: 48px 24px;
  text-align: center;
}

/* Container */
.container-default {
  max-width: 1312px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Checkbox */
.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--neutral--400);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.checkbox.checked {
  background-color: var(--accent--primary-1);
  border-color: var(--accent--primary-1);
  color: white;
}

/* Responsive Grid Overrides */
@media screen and (max-width: 991px) {
  .grid-4-columns._1-column-tablet,
  ._1-column-tablet {
    grid-template-columns: 1fr !important;
  }

  .grid-3-columns._1-column-tablet {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 767px) {
  .grid-4-columns,
  .grid-3-columns._1-column-mbl,
  ._1-column-mbl {
    grid-template-columns: 1fr !important;
  }

  .grid-2-columns._2-col-mbl,
  ._2-col-mbl {
    grid-template-columns: 1fr 1fr !important;
  }

  .display-1 {
    font-size: 36px;
  }

  .display-2 {
    font-size: 32px;
  }

  .display-3 {
    font-size: 28px;
  }
}

/* Component-specific utilities for Radiant UI integration */
.rt-component-section {
  margin-bottom: 32px;
}

.rt-component-heading-two {
  /* Inherits from display class */
}

.rt-text-block {
  /* Inherits from text class */
}

.rt-nav-text {
  transition: color 0.2s ease;
}

.rt-nav-text:hover {
  opacity: 0.8;
}

.hover-neutral-800:hover {
  color: var(--neutral--800) !important;
}

.rt-component-container {
  /* Generic container for components */
}

/* Webflow Layout Helpers */
.w-layout-blockcontainer {
  max-width: 100%;
  display: block;
}

.w-container {
  /* Container utility */
}

.w-layout-hflex {
  display: flex;
  flex-direction: row;
}

.w-layout-vflex {
  display: flex;
  flex-direction: column;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}