style.md

function createStyles(theme: ReturnType) { return StyleSheet.create({ screen: { flex: 1 }, header: { paddingHorizontal: spacing[4], paddingTop: spacing[4], paddingBottom: spacing[3], gap: spacing[1], }, headerSubtitle: { color: theme.colors.onSurfaceVariant, letterSpacing: 0.8, textTransform: 'uppercase', }, headerTitle: { color: theme.colors.primary, fontWeight: 'bold' }, devRow: { paddingHorizontal: spacing[4], marginBottom: spacing[2], flexDirection: 'row', gap: spacing[2], }, devButtonTertiary: { flex: 1, borderColor: theme.colors.tertiary, borderRadius: 10, }, devButtonError: { flex: 1, borderColor: theme.colors.error, borderRadius: 10, }, searchRow: { paddingHorizontal: spacing[4], marginBottom: spacing[3] }, searchbar: { borderRadius: 12 }, separator: { height: spacing[3] }, emptyCard: { borderRadius: 16, backgroundColor: theme.colors.elevation.level1, padding: spacing[6], alignItems: 'center', gap: spacing[3], }, emptyText: { color: theme.colors.onSurfaceVariant }, listContent: { padding: spacing[4], paddingTop: 0 }, violationCard: { borderRadius: 16, overflow: 'hidden', backgroundColor: theme.colors.elevation.level1, }, cardAccentStrip: { height: 3, backgroundColor: theme.colors.primary }, cardHeader: { flexDirection: 'row', alignItems: 'center', gap: spacing[2], paddingHorizontal: spacing[4], paddingTop: spacing[3], paddingBottom: spacing[2], }, cardHeaderPlate: { color: theme.colors.primary, fontWeight: 'bold', letterSpacing: 0.8, flex: 1, }, cardHeaderDateRow: { flexDirection: 'row', alignItems: 'center', gap: 4 }, cardHeaderDate: { color: theme.colors.onSurfaceVariant }, divider: { backgroundColor: theme.colors.outlineVariant, marginHorizontal: spacing[4], }, cardBody: { padding: spacing[4], flexDirection: 'row', gap: spacing[4], }, cardBodyCol: { flex: 1, gap: spacing[1] }, fieldLabelRow: { flexDirection: 'row', alignItems: 'center', gap: 6 }, fieldLabelText: { color: theme.colors.onSurfaceVariant, textTransform: 'uppercase', letterSpacing: 0.5, }, fieldValue: { color: theme.colors.onSurface, fontWeight: '600' }, fieldNote: { color: theme.colors.onSurfaceVariant }, }) }

      <Link asChild href={`/violation/${item.id}`}>
        <TouchableOpacity activeOpacity={0.8}>
          <Surface elevation={0} style={styles.violationCard}>
            <View style={styles.cardAccentStrip} />
            {/* Card header */}
            <View style={styles.cardHeader}>
              <CarIcon color={theme.colors.primary} size={14} />
              <Text style={styles.cardHeaderPlate} variant="labelLarge">
                {item.vehicle.plate.toUpperCase()}
              </Text>
              <View style={styles.cardHeaderDateRow}>
                <CalendarIcon
                  color={theme.colors.onSurfaceVariant}
                  size={11}
                />
                <Text style={styles.cardHeaderDate} variant="labelSmall">
                  {dateFormatter(item.createdAt, true)}
                </Text>
              </View>
            </View>

            <Divider style={styles.divider} />

            {/* Card body */}
            <View style={styles.cardBody}>
              <View style={styles.cardBodyCol}>
                <View style={styles.fieldLabelRow}>
                  <UserIcon
                    color={theme.colors.onSurfaceVariant}
                    size={12}
                  />
                  <Text style={styles.fieldLabelText} variant="labelSmall">
                    Condutor
                  </Text>
                </View>
                <Text style={styles.fieldValue} variant="bodyMedium">
                  {item.driver.name} {item.driver.surname}
                </Text>
                <Text style={styles.fieldNote} variant="labelSmall">
                  {item.driver.civilianId}
                </Text>
              </View>

              <View style={styles.cardBodyCol}>
                <View style={styles.fieldLabelRow}>
                  <MapPinIcon
                    color={theme.colors.onSurfaceVariant}
                    size={12}
                  />
                  <Text style={styles.fieldLabelText} variant="labelSmall">
                    Local
                  </Text>
                </View>
                <Text style={styles.fieldValue} variant="bodyMedium">
                  {item.location.street}
                  {item.location.number ? `, ${item.location.number}` : ''}
                </Text>
              </View>
            </View>
          </Surface>
        </TouchableOpacity>
      </Link>
    )}