/* First-frame styles for the compact creative workspace. Loaded before the app mounts. */
html[data-direto-creative-workspace="true"] main {
  max-width: 1580px !important;
  padding: 24px clamp(16px, 2vw, 32px) 42px !important;
  overflow-x: clip !important;
}

html[data-direto-creative-workspace="true"] main .space-y-6:has(.card-hero:has(table)) > :not([hidden]) ~ :not([hidden]) {
  margin-top: 14px !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) {
  display: grid !important;
  grid-template-columns: minmax(230px, 1.5fr) minmax(130px, .85fr) minmax(180px, 1.25fr) minmax(130px, .85fr) repeat(3, minmax(112px, .8fr)) minmax(150px, 1fr) !important;
  align-items: end !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border-color: rgba(63, 104, 127, .42) !important;
  background: linear-gradient(145deg, rgba(10, 26, 33, .96), rgba(8, 17, 25, .96)) !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) > div.inline-flex.uppercase {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #65ead8 !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) > div.grid {
  display: contents !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) > div.grid > div {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) [class*="md:col-span-2"] {
  grid-column: auto !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) .space-y-2 {
  display: grid !important;
  gap: 4px !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) label {
  margin: 0 !important;
  color: #9bb0c2 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: .04em !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) button,
html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) input,
html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) [role="combobox"],
html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) select {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 11px !important;
}

html[data-direto-creative-workspace="true"] main .flex.flex-wrap.items-center.justify-between.gap-3:has([role="combobox"]) {
  min-height: 34px !important;
  margin-top: 8px !important;
  padding: 0 2px !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) {
  overflow: hidden !important;
  border-radius: 16px !important;
  border-color: rgba(63, 104, 127, .42) !important;
  background: linear-gradient(180deg, rgba(8, 20, 30, .98), rgba(6, 13, 21, .98)) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .2) !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) > div:has(> table) {
  max-height: 72vh !important;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) table {
  min-width: 1180px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  height: 38px !important;
  padding: 8px 10px !important;
  background: rgba(11, 27, 40, .98) !important;
  color: #9db1c4 !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody tr {
  transition: background .16s ease, border-color .16s ease;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody tr:nth-child(even) {
  background: rgba(18, 34, 49, .28) !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody tr:hover {
  background: rgba(29, 78, 104, .28) !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody td {
  height: 42px !important;
  padding: 7px 10px !important;
  border-color: rgba(71, 95, 116, .26) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody td:nth-child(2) {
  max-width: 280px;
  color: #e7f3fb;
  font-weight: 700;
}

html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody td:nth-child(4),
html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody td:nth-child(5),
html[data-direto-creative-workspace="true"] main .card-hero:has(table) tbody td:nth-child(6) {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (max-width: 1300px) {
  html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) {
    grid-template-columns: repeat(4, minmax(105px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 10px !important;
  }

  html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) > div:nth-child(2) > div:first-child,
  html[data-direto-creative-workspace="true"] main .card-hero:has(> div.inline-flex.uppercase) > div:nth-child(2) > div:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  html[data-direto-creative-workspace="true"] main .card-hero:has(table) > div:has(> table) {
    max-height: 65vh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-direto-creative-workspace="true"] main .card-hero:has(table) * {
    transition: none !important;
  }
}